27/07/2027 - Notas da versão do portal integrado do Apigee Edge

Você está lendo a documentação do Apigee Edge.
Acesse a documentação da Apigee X. info

Na segunda-feira, 27 de julho, começaremos a lançar uma nova versão do portal integrado do Apigee Edge.

Novos recursos e melhorias

Esta seção descreve os novos recursos e melhorias desta versão.

Melhorias de acessibilidade e capacidade de resposta

A seguir, listamos as melhorias de acessibilidade e capacidade de resposta implementadas para esta versão.

• Navegação com teclado:agora é possível navegar pelas barras de navegação do cabeçalho e rodapé, pela navegação lateral do SmartDocs, pela lista de apps, pela visualização de apps e pelos cartões de API usando o teclado.
  
• Gerenciamento de foco: a navegação com a barra de navegação do cabeçalho e a navegação lateral do SmartDocs movem o foco para o primeiro <H1> na página após uma ação de navegação.
• Regiões dinâmicas:as mudanças na lista de APIs resultantes da filtragem textual agora são informadas aos usuários que utilizam um leitor de tela.
• Uso semântico de títulos HTML:todo o texto agora está contido em tags HTML semanticamente apropriadas. Uma estrutura de título hierárquica adequada agora é usada em todo o portal.
• Uso singular de <H1>: cada página agora tem apenas um <H1>, para que os leitores de tela possam identificar facilmente a descrição mais informativa do conteúdo da página.
• Capitalização estilística:o uso de letras maiúsculas como um acento visual agora é aplicado exclusivamente com CSS, em vez de no texto real.
• Ordenação lógica do DOM:os botões de ação nas páginas "Criar app" e "Editar app" foram movidos para baixo dos elementos do formulário no DOM para que possam ser ativados em ordem lógica, após a conclusão da interação do formulário.
• Descrições textuais de elementos visuais:há um uso aprimorado de rótulos, texto alternativo e texto de botão, que melhoram a navegação com um leitor de tela.
• Contraste de cor:o contraste de cor foi aumentado para atender aos requisitos de contraste WCAG AA em muitos lugares do produto. Os títulos de API na lista de APIs foram movidos para baixo da imagem para evitar um contraste de cor insuficiente.
• Validação de formulário:nas páginas "Criar app" e "Editar app", os botões de envio de formulário não estão mais desativados e podem ser ativados para validar o formulário. Os campos de formulário validados nas páginas "Criar app" e "Editar app" agora incluem descrições textuais do erro de validação.
• Capacidade de resposta:agora há uma largura máxima que se aplica a todas as páginas, exceto o SmartDocs. A navegação do SmartDocs agora funciona em telas estreitas de smartphones. As páginas "Criar app" e "Editar app" agora são mais responsivas a telas estreitas.

Mudanças no DOM que podem afetar seu portal

Considere especialmente se:

• As barras de navegação (cabeçalho e rodapé) e os títulos de página foram estilizados (ou ocultos) com substituições de CSS: agora há uma largura máxima para o conteúdo da página. Para estender as barras de navegação e os cabeçalhos de página até a borda da janela do navegador, o Apigee estiliza o pseudo-elemento :before. Para mais informações, consulte Substituir cores primárias para barras de navegação e cabeçalhos de página.
• Há elementos de página com planos de fundo que se estendem até a borda da janela do navegador (além da imagem de plano de fundo em tela cheia) : a largura máxima do conteúdo da página foi limitada para melhorar a capacidade de resposta, o que pode restringir todos os painéis de largura total nas páginas personalizadas. Para mais informações sobre como usar as novas configurações de largura máxima, consulte Criar um painel de largura total em uma página do portal.
• Níveis de título HTML específicos foram segmentados com seletores CSS para modificar estilos de texto:o nível de título aplicado a determinado conteúdo foi alterado. Por exemplo: <H1> → <H2> Revise a lista de mudanças detalhada desta versão para entender exatamente qual conteúdo é afetado.
• Uma cor branca ou muito clara é selecionada como a "cor secundária" no editor de temas do portal:a cor secundária é usada para elementos de navegação que serão difíceis de ver em um plano de fundo branco. Recomendamos escolher uma cor secundária acessível e substituí-la, se necessário, por scss personalizado em situações específicas.
• Os links no texto foram estilizados:O estilo dos links agora é mais acessível. Consulte as mudanças abaixo para entender como ele pode interagir com seu estilo atual.
• A borda inferior de 2 px na área de conteúdo dos cards de visualização inicial foi estilizada ou oculta com substituições de CSS : essa borda foi movida de <mat-card-content> para uma borda superior em <mat-card-actions>.

Resumo das mudanças detalhadas

As seções a seguir resumem as mudanças detalhadas que foram implementadas nesta versão, por categoria.

Mudanças em todo o portal

As mudanças em todo o portal são resumidas abaixo.

• As seguintes variáveis não estão mais em uso:
  • $layout-horizontal-padding
  • $layout-main-content-horiz-padding
  • $layout-header-horiz-padding
  • $layout-context-bar-horiz-padding
• Há novas variáveis que fornecem controle sobre a largura máxima da área de conteúdo principal e o preenchimento horizontal mínimo para a área de conteúdo principal:
  • $layout-main-content-max-width
  • $layout-horizontal-min-padding

Mudanças na barra de navegação principal

As mudanças na barra de navegação principal são resumidas abaixo.

• O logotipo <img> agora está envolvido em um <a> para tamanhos de tela de computadores e dispositivos móveis.
• O botão suspenso do usuário agora é um <button> em vez de um <a>

Mudanças no estilo do link

Os links padrão <a> no texto agora têm um sublinhado por padrão e uma cor de plano de fundo (com base nas configurações do tema "cor secundária") ao passar o cursor.

Mudanças na página 404

As mudanças na página 404 são resumidas abaixo.

• "Fazer login agora" agora é <H2> em vez de <H1>.
• O texto explicativo agora é <H2> em vez de <H1>

Página "APIs"

As mudanças na página "APIs" são resumidas abaixo, por categoria.

• Card de entrada de pesquisa/filtro de API:
  • <mat-card-content class="mat-card-content"> agora envolve o título e a entrada do card de APIs de pesquisa.
  • O <H2> agora usa class="mat-subheading-1" em vez de class="api-doc-filter-title".
  • O<mat-form-field> agora usa appearance="outline".
  • Um ícone de pesquisa foi adicionado ao <mat-form-field> antes da entrada: "<mat-icon matPrefix>search</mat-icon>"
  • Rótulos Aria e referências de controle foram adicionados à entrada.
• Mensagem de lista de APIs vazia:
  • "Nenhuma API encontrada" agora é <H2> em vez de <H1>
  • A explicação agora é <H3> em vez de <H2>
• Lista de cards de API:

  "Nenhuma API corresponde à sua pesquisa" agora é <H2> em vez de <H1>

• Cards de API:
  • >div class="api-doc-card-content-image-gradient"></div> foi removido.
  • O título da API foi movido da imagem que contém <div> para <div class="api-doc-card-content-title"></div> imediatamente após a imagem <div>
  • O título da API agora é <H2> em vez de <H1>.

Lista de apps:

• Estado vazio:
  • "Começar" agora é <H2> em vez de <H1>.
  • A orientação de estado vazio agora é <H3> em vez de <H2>.
• Lista:
  • "Meus apps" agora é <H2> em vez de <H1>.
  • <mat-row> agora está envolvido em um <a>.

Páginas "Criar app" e "Editar app"

As mudanças nas páginas "Criar app" e "Editar app" são resumidas abaixo.

• <div class="app-buttons"> foi movido para o final do <form> e substituído por <div class="form-buttons-sticky-container">.
• Todo o uso da classe .app-layout-section foi alterado para .details-layout-section.
• Todo o uso da classe .app-layout-section-title foi alterado para .details-layout-section-title.
• Todos os títulos de seção agora são <H2> em vez de <div>.
• Todo o uso da classe .app-layout-section-content foi alterado para .details-layout-section-content.
• A lista de APIs não é mais uma lista de cards de API com botões de alternância (semelhante à lista de APIs). Em vez disso, é uma tabela de APIs.
• A entrada do URL de callback foi movida para uma nova seção.
• O botão "Salvar" agora usa o estilo mat-raised-button e o plano de fundo da cor primária.
• As tabelas agora estão envolvidas em um <div> com a classe .app-table-wrapper.
• Os cabeçalhos de tabela agora usam o <thead> wrapper.
• Os corpos de tabela agora usam o <tbody> wrapper.
• [style.width] não é mais usado para definir larguras de coluna de tabela.
• Todas as tags <a> na tabela agora usam <button.

Lista de equipes

As mudanças na lista de equipes são resumidas abaixo.

• Estado vazio:
  • "Começar" agora é <H2> em vez de <H1>.
  • "Crie uma equipe para gerenciar a propriedade compartilhada do app" agora é <H3> em vez de <H2>
• Lista:

  O título "Equipes" agora é <H2> em vez de <H1>

Páginas "Criar equipe" e "Editar equipe"

As mudanças nas páginas "Criar equipe" e "Editar equipe" são resumidas abaixo.

• No <form>, a classe .teams-form foi substituída por .details-form.
• <div class="teams-buttons"> foi movido para o final do <form> e substituído por <div class="form-buttons-sticky-container">.
• Todo o uso da classe .teams-layout-section foi alterado para .details-layout-section.
• Todo o uso da classe .teams-layout-section-title foi alterado para .details-layout-section-title.
• Todo o uso da classe .teams-layout-section-content foi alterado para .details-layout-section-content.
• <div class="team-apps-container"> foi adicionado ao redor de <table class="team-apps">.

SmartDocs

As mudanças na interface do SmartDocs são resumidas abaixo.

• Navegação lateral:
  • A navegação lateral foi completamente reescrita com componentes do Angular Material.
  • Os títulos de navegação lateral agora são <H2> em vez de <div>.
  • Os itens de navegação agora usam a cor de texto padrão do portal em vez da "cor secundária" do editor de temas do portal.
  • Os itens selecionados, focados e com o cursor na navegação lateral agora usam variações claras e escuras da "cor secundária" do editor de temas do portal para o texto e o plano de fundo, respectivamente.
• Conteúdo:
  • Muitos subtítulos, como "Parâmetros de caminho" e "Parâmetros de cabeçalho", agora são <H2> em vez de <H3>
  • As entidades de esquema na página de visão geral agora são <H3>=> em vez de <H2>

Adicionar melhorias de acessibilidade a uma página inicial atual

Se você tiver um portal de saída, será necessário editar a página inicial para aproveitar as novas melhorias de acessibilidade para cards navegáveis, conforme descrito abaixo:

1. Remova href="" do contêiner <mat-card>.
2. Use <H2> em vez de <H1> para o título do card em <mat-card-header>.
3. Dentro do título do card <h2>, envolva o texto em um <a class="navigable-content" href="href-name"> e defina o href-name como o valor apropriado para a navegação do card.

Como alternativa, você pode usar o seguinte modelo de card:

<mat-card class="home-page-card quick-start">
  <mat-card-header class="home-page-card-header" color="primary">
    <mat-icon class="home-page-card-header-icon">
      check_circle
    </mat-icon>
    <h2 class="home-page-card-header-text">
      <a class="navigable-content" href="page-route">
        Card heading
      </a>
    </h2>
  </mat-card-header>
  <mat-card-content class="home-page-card-content">
    <p class="home-page-card-content-text">
      Extra content
    </p>
  </mat-card-content>
</mat-card>
</p>

Substituir cores primárias para barras de navegação e cabeçalhos de página

Para estender as barras de navegação e os cabeçalhos de página até a borda da janela do navegador, adicione um estilo personalizado para as barras de navegação e os cabeçalhos de página usando o editor de temas avançado, semelhante ao seguinte para a barra de navegação do cabeçalho:

// Override use of the primary color for header navigation bar background-color
.nav-header .mat-toolbar {
  color: #fff //  color for navigation text

  // Use the :before pseudo element to style the background of full-width bars
  // (header and footer navigation bars and page headers)
  &:before {
    background-color: #000; // background color for header navigation bar
  }
}

Atualizar o procedimento para gerenciar APIs de um app

A interação do usuário para gerenciar as APIs em um app no portal integrado mudou. Especificamente, ao gerenciar um app, na seção "APIs", os usuários precisam clicar em ou (em vez de um botão de alternância) para ativar ou desativar o acesso, respectivamente, a uma API do app.

Atualize todos os procedimentos no seu portal que descrevem como gerenciar APIs na página de apps, se aplicável. Para mais informações, consulte Gerenciar as APIs no seu app.

Bugs corrigidos

Os bugs a seguir foram corrigidos nesta versão. Esta lista é principalmente para usuários que verificam se os tíquetes de suporte foram corrigidos. Ela não foi projetada para fornecer informações detalhadas a todos os usuários.

Problemas conhecidos

Para uma lista de problemas conhecidos com o portal integrado, consulte Problemas conhecidos com o portal integrado.