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 na acessibilidade e na capacidade de resposta

Confira abaixo as melhorias de acessibilidade e capacidade de resposta implementadas nesta 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 cards de API usando o teclado.
  
• Gerenciamento de foco : ao navegar com a barra de navegação do cabeçalho e a navegação lateral do SmartDocs, o foco é movido 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 usam um leitor de tela.
• Uso semântico de cabeçalhos HTML:todo o texto agora está contido em tags HTML semanticamente apropriadas. Uma estrutura de cabeçalho hierárquica adequada agora é usada em todo o portal.
• Uso singular de <H1>: agora cada página 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 destaque visual agora é aplicado exclusivamente com CSS, e não no texto real.
• Ordenação lógica do DOM:os botões de ação nas páginas "Criar" e "Editar app" foram movidos para baixo dos elementos do formulário no DOM para que possam ser ativados em ordem lógica, ao concluir a interação com o formulário.
• Descrições textuais de elementos visuais:o uso de rótulos, texto alternativo e texto de botões foi aprimorado, o que melhora a navegação com um leitor de tela.
• Contraste de cor:o contraste de cor foi aumentado para atender aos requisitos de contraste AA das WCAG em vários lugares do produto. Os títulos das APIs na lista foram movidos para baixo da imagem para evitar um possível contraste de cores insuficiente.
• Validação de formulário:nas páginas "Criar" 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" 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 do tamanho de um smartphone. As páginas "Criar e editar app" agora são mais responsivas em 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 das páginas foram estilizados (ou ocultados) 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, a Apigee estilizou o pseudoelemento :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 cabeçalho HTML específicos foram segmentados com seletores de CSS para modificar estilos de texto:o nível de cabeçalho aplicado a determinado conteúdo mudou. Por exemplo: <H1> → <H2> Revise a lista detalhada de mudanças 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 substituir por scss personalizada em situações específicas, se necessário.
• Os links no texto foram estilizados:agora a estilização dos links é mais acessível. Confira 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 do painel da casa foi estilizada ou ocultada 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

Confira abaixo um resumo das mudanças em todo o portal.

• 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 oferecem controle sobre a largura máxima da área de conteúdo principal e o padding horizontal mínimo da área de conteúdo principal:
  • $layout-main-content-max-width
  • $layout-horizontal-min-padding

Mudanças na barra de navegação principal

Confira abaixo um resumo das mudanças na barra de navegação principal.

• O logotipo <img> agora está envolvido em um <a> para tamanhos de tela de computador 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 fundo (com base na configuração do tema "cor secundária") ao passar o cursor.

Mudanças na página 404

Confira abaixo um resumo das mudanças na página 404.

• "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" estão resumidas abaixo, por categoria.

• Card de entrada de pesquisa/filtro de API:
  • O <mat-card-content class="mat-card-content"> agora envolve o título e a entrada do card das 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:
  • A rede >div class="api-doc-card-content-image-gradient"></div> foi removida
  • 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>.
  • Os títulos das APIs agora são <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á deformado em um <a>

Criar e editar páginas de apps

Confira abaixo um resumo das mudanças nas páginas "Criar app" e "Editar app".

• <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 chaves 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.
• Agora as tabelas são unidas a um <div> com a classe .app-table-wrapper.
• Os cabeçalhos de tabela agora usam o wrapper <thead>.
• Os corpos de tabela agora usam o wrapper <tbody>.
• [style.width] não é mais usado para definir as larguras das colunas da tabela
• Todas as tags <a> na tabela agora usam <button.

Lista de equipes

Confira abaixo um resumo das mudanças na lista de equipes.

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

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

Criar e editar páginas da equipe

Confira abaixo um resumo das mudanças nas páginas "Criar" e "Editar equipe".

• Na <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

Confira abaixo um resumo das mudanças na interface do SmartDocs.

• Navegação lateral:
  • A navegação lateral foi completamente reescrita com componentes angular-material.
  • Os títulos da 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, em foco e em que o cursor está posicionado 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

Se você já tiver um portal, edite 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 cabeçalho do card em <mat-card-header>.
3. Dentro do cabeçalho do card <h2>, coloque o texto em um <a class="navigable-content" href="href-name"> e defina o href-name com o valor adequado para a navegação do card.

Como alternativa, use 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 tema 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
  }
}

Procedimento de atualização 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 "Apps", se aplicável. Para mais informações, consulte Como 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.