20.07.27 : notes de version du portail intégré Apigee Edge

Vous consultez la documentation Apigee Edge.
Accédez à la documentation Apigee X.

Le lundi 27 juillet, nous commencerons à déployer une nouvelle version du portail intégré Apigee Edge.

Nouvelles fonctionnalités et améliorations

Cette section décrit les nouvelles fonctionnalités et les améliorations proposées dans cette release.

Améliorations de l'accessibilité et de la réactivité

Vous trouverez ci-dessous la liste des améliorations apportées à l'accessibilité et à la réactivité pour cette version.

• Navigation au clavier : il est désormais possible de parcourir les barres de navigation de l'en-tête et du pied de page, la navigation latérale SmartDocs, la liste des applications, la vue de l'application et les fiches d'API à l'aide du clavier.
  
• Gestion de la sélection  : lorsque vous naviguez à l'aide de la barre de navigation de l'en-tête et de la navigation latérale Smart Docs, la sélection se déplace vers le premier <H1> de la page après une action de navigation.
• Régions dynamiques : les modifications apportées à la liste des API à la suite d'un filtrage textuel sont désormais signalées aux utilisateurs de lecteurs d'écran.
• Utilisation sémantique des titres HTML : tout le texte est désormais contenu dans des balises HTML sémantiquement appropriées. Une structure de titres hiérarchique appropriée est désormais utilisée dans l'ensemble du portail.
• Utilisation unique de <H1> : chaque page ne comporte désormais qu'un seul <H1>. Les lecteurs d'écran peuvent ainsi identifier facilement la description la plus informative du contenu de la page.
• Casse stylistique : l'utilisation de majuscules comme accent visuel est désormais appliquée exclusivement avec CSS plutôt que dans le texte lui-même.
• Ordre logique du DOM : les boutons d'action des pages "Créer une application" et "Modifier une application" ont été déplacés sous les éléments de formulaire dans le DOM afin de pouvoir être activés dans un ordre logique, à la fin de l'interaction avec le formulaire.
• Descriptions textuelles des éléments visuels : l'utilisation des libellés, du texte alternatif et du texte des boutons a été améliorée, ce qui facilite la navigation avec un lecteur d'écran.
• Contraste des couleurs : le contraste des couleurs a été augmenté dans de nombreux endroits du produit pour répondre aux exigences de contraste WCAG AA. Les titres des API dans la liste des API ont été déplacés sous l'image pour éviter un contraste de couleur potentiellement insuffisant.
• Validation du formulaire : sur les pages "Créer une application" et "Modifier une application", les boutons d'envoi de formulaire ne sont plus désactivés et peuvent être activés pour valider le formulaire. Les champs de formulaire validés sur les pages "Créer une application" et "Modifier l'application" incluent désormais des descriptions textuelles de l'erreur de validation.
• Responsivité : une largeur maximale s'applique désormais à toutes les pages, à l'exception de Smart Docs. La navigation SmartDocs fonctionne désormais sur les écrans étroits de la taille d'un téléphone. Les pages de création et de modification d'applications sont désormais plus réactives sur les écrans étroits.

Modifications du DOM pouvant avoir un impact sur votre portail

Tenez également compte des points suivants :

• Les barres de navigation (en-tête et pied de page) et les titres de page ont été stylisés (ou masqués) avec des remplacements CSS : la largeur du contenu de la page est désormais limitée. Pour étendre les barres de navigation et les en-têtes de page jusqu'au bord de la fenêtre du navigateur, Apigee a stylisé le pseudo-élément :before. Pour en savoir plus, consultez Remplacer les couleurs primaires des barres de navigation et des en-têtes de page.
• Certains éléments de la page ont des arrière-plans qui s'étendent jusqu'au bord de la fenêtre du navigateur (à l'exception de l'image d'arrière-plan en plein écran) : la largeur maximale du contenu de la page a été limitée pour améliorer la réactivité, ce qui peut restreindre la taille des panneaux auparavant en pleine largeur au sein des pages personnalisées. Pour en savoir plus sur l'utilisation des nouveaux paramètres de largeur maximale, consultez Créer un panneau pleine largeur sur une page du portail.
• Des niveaux de titres HTML spécifiques ont été ciblés avec des sélecteurs CSS pour modifier les styles de texte : le niveau de titre appliqué à certains contenus a changé. Par exemple : <H1> → <H2> Consultez la liste détaillée des modifications apportées à cette version pour comprendre exactement quel contenu est concerné.
• Une couleur blanche ou très claire est sélectionnée comme "couleur secondaire" dans l'éditeur de thème du portail : la couleur secondaire est utilisée pour les éléments de navigation qui seront difficiles à voir sur un fond blanc. Nous vous recommandons de choisir une couleur secondaire accessible, puis de la remplacer si nécessaire par un fichier SCSS personnalisé dans des situations spécifiques.
• Mise en forme des liens dans le texte : la mise en forme des liens est désormais plus accessible. Consultez les modifications ci-dessous pour comprendre comment elles peuvent interagir avec votre style existant.
• La bordure inférieure de 2 px de la zone de contenu des cartes de la vue "Accueil" a été stylisée ou masquée avec des remplacements CSS  : cette bordure a été déplacée de <mat-card-content> vers une bordure supérieure sur <mat-card-actions>.

Résumé des modifications détaillées

Les sections suivantes récapitulent les modifications détaillées qui ont été implémentées dans cette version, par catégorie.

Modifications à l'échelle du portail

Vous trouverez ci-dessous un récapitulatif des modifications apportées au portail.

• Les variables suivantes ne sont plus utilisées :
  • $layout-horizontal-padding
  • $layout-main-content-horiz-padding
  • $layout-header-horiz-padding
  • $layout-context-bar-horiz-padding
• De nouvelles variables permettent de contrôler la largeur maximale de la zone de contenu principal et la marge intérieure horizontale minimale de la zone de contenu principal :
  • $layout-main-content-max-width
  • $layout-horizontal-min-padding

Modifications apportées à la barre de navigation principale

Vous trouverez ci-dessous un récapitulatif des modifications apportées à la barre de navigation principale.

• Le logo <img> est désormais encapsulé dans un <a> pour les tailles d'écran d'ordinateur et de mobile.
• Le bouton de menu déroulant des utilisateurs est désormais un <button> au lieu d'un <a>.

Modifications du style des liens

Les liens standards <a> dans le texte sont désormais soulignés par défaut et ont une couleur d'arrière-plan (basée sur le paramètre "Couleur secondaire" du thème) au passage de la souris.

Modifications apportées à la page 404

Vous trouverez ci-dessous un récapitulatif des modifications apportées à la page 404.

• Le libellé "Se connecter maintenant" est désormais <H2> au lieu de <H1>
• Le texte explicatif est désormais <H2> au lieu de <H1>

Page des API

Les modifications apportées à la page "API" sont résumées ci-dessous, par catégorie.

• Fiche de saisie de recherche/filtre d'API :
  • <mat-card-content class="mat-card-content"> enveloppe désormais le titre et l'entrée de la fiche des API Search
  • <H2> utilise désormais class="mat-subheading-1" au lieu de class="api-doc-filter-title".
  • <mat-form-field> utilise désormais appearance="outline"
  • Une icône de recherche a été ajoutée à <mat-form-field> avant l'entrée : "<mat-icon matPrefix>search</mat-icon>"
  • Des libellés Aria et des références de commandes ont été ajoutés à la saisie.
• Message de liste d'API vide :
  • Le message "Aucune API trouvée" est désormais <H2> au lieu de <H1>
  • L'explication est désormais <H3> au lieu de <H2>
• Liste des fiches d'API :

  Le message "Aucune API ne correspond à votre recherche" est désormais <H2> au lieu de <H1>.

• Fiches d'API :
  • >div class="api-doc-card-content-image-gradient"></div> a été supprimé
  • Le titre de l'API a été déplacé hors de l'image contenant <div> et dans <div class="api-doc-card-content-title"></div> immédiatement après l'image <div>.
  • Les titres des API sont désormais <H2> au lieu de <H1>.

Liste des applications :

• État vide :
  • Le prix de "C'est parti" est actuellement de <H2> au lieu de <H1>
  • Les consignes concernant l'état vide sont désormais <H3> au lieu de <H2>
• Liste :
  • "Mes applications" s'appelle désormais <H2> au lieu de <H1>
  • <mat-row> est désormais déformé dans un <a>

Créer et modifier des pages d'application

Vous trouverez ci-dessous un récapitulatif des modifications apportées aux pages "Créer une application" et "Modifier une application".

• <div class="app-buttons"> a été déplacé à la fin de <form> et remplacé par <div class="form-buttons-sticky-container">
• Toute utilisation de la classe .app-layout-section a été remplacée par .details-layout-section.
• Toute utilisation de la classe .app-layout-section-title a été remplacée par .details-layout-section-title.
• Tous les titres de section sont désormais <H2> au lieu de <div>.
• Toute utilisation de la classe .app-layout-section-content a été remplacée par .details-layout-section-content.
• La liste des API n'est plus une liste de fiches d'API avec des boutons bascule (comme la liste des API). Il s'agit plutôt d'un tableau d'API.
• Le champ de saisie de l'URL de rappel a été déplacé dans une nouvelle section.
• Le bouton "Enregistrer" utilise désormais le style mat-raised-button et l'arrière-plan de couleur primaire.
• Les tableaux sont désormais encapsulés dans un <div> avec la classe .app-table-wrapper.
• Les en-têtes de tableau utilisent désormais le wrapper <thead>
• Les corps de tableau utilisent désormais le wrapper <tbody>
• [style.width] n'est plus utilisé pour définir la largeur des colonnes du tableau
• Tous les tags <a> du tableau utilisent désormais <button.

Liste des équipes

Vous trouverez ci-dessous un récapitulatif des modifications apportées à la liste des équipes.

• État vide :
  • Le prix de "Commencer" est actuellement de <H2> au lieu de <H1>
  • L'option "Créer une équipe pour gérer la propriété partagée des applications" s'appelle désormais <H3> au lieu de <H2>.
• Liste :

  Le titre "Équipes" est désormais <H2> au lieu de <H1>

Créer et modifier des pages d'équipe

Vous trouverez ci-dessous un récapitulatif des modifications apportées aux pages "Créer une équipe" et "Modifier une équipe".

• Sur <form>, la classe .teams-form a été remplacée par .details-form.
• <div class="teams-buttons"> a été déplacé à la fin de <form> et remplacé par <div class="form-buttons-sticky-container">
• Toute utilisation de la classe .teams-layout-section a été remplacée par .details-layout-section.
• Toute utilisation de la classe .teams-layout-section-title a été remplacée par .details-layout-section-title.
• Toute utilisation de la classe .teams-layout-section-content a été remplacée par .details-layout-section-content.
• <div class="team-apps-container"> a été ajouté autour de <table class="team-apps">

SmartDocs

Vous trouverez ci-dessous un récapitulatif des modifications apportées à l'interface Smart Docs.

• Navigation latérale :
  • La navigation latérale a été entièrement réécrite avec des composants angular-material.
  • Les titres de la navigation latérale sont désormais <H2> au lieu de <div>.
  • Les éléments de navigation utilisent désormais la couleur de texte par défaut du portail au lieu de la "couleur secondaire " de l'éditeur de thème du portail.
  • Les éléments sélectionnés, mis au point et survolés dans la navigation latérale utilisent désormais des variantes claires et sombres de la "couleur secondaire" de l'éditeur de thème du portail pour le texte et l'arrière-plan, respectivement.
• Contenu :
  • De nombreux sous-titres, tels que "Paramètres de chemin" et "Paramètres d'en-tête", sont désormais <H2> au lieu de <H3>.
  • Les entités de schéma sur la page "Vue d'ensemble" sont désormais <H3>=> au lieu de <H2>

Ajouter des améliorations d'accessibilité à une page d'accueil existante

Si vous disposez d'un portail existant, vous devez modifier la page d'accueil pour profiter des nouvelles améliorations d'accessibilité pour les fiches navigables, comme décrit ci-dessous :

1. Supprimez href="" du conteneur <mat-card>.
2. Utilisez <H2> à la place de <H1> pour l'en-tête de la fiche dans <mat-card-header>.
3. Dans l'en-tête de la fiche <h2>, insérez le texte dans un <a class="navigable-content" href="href-name"> et définissez href-name sur la valeur appropriée pour la navigation de la fiche.

Vous pouvez également utiliser le modèle de carte suivant :

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

Remplacer les couleurs principales pour les barres de navigation et les en-têtes de page

Pour étendre les barres de navigation et les en-têtes de page jusqu'au bord de la fenêtre du navigateur, ajoutez un style personnalisé pour les barres de navigation et les en-têtes de page à l'aide de l'éditeur de thème avancé, comme suit pour la barre de navigation de l'en-tête :

// 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
  }
}

Procédure de mise à jour pour gérer les API d'une application

L'interaction utilisateur permettant de gérer les API dans une application sur le portail intégré a changé. Plus précisément, lorsqu'ils gèrent une application, les utilisateurs doivent cliquer sur ou (au lieu d'un bouton bascule) dans la section "API" pour activer ou désactiver l'accès à une API depuis l'application.

Si nécessaire, mettez à jour les procédures de votre portail qui décrivent comment gérer les API sur la page des applications. Pour en savoir plus, consultez Gérer les API dans votre application.

Bugs résolus

Les bugs suivants sont résolus dans cette version. Cette liste s'adresse principalement aux utilisateurs qui veulent vérifier si leurs demandes d'assistance ont été corrigées. Elle n'est pas conçue pour fournir des informations détaillées à tous les utilisateurs.

Problèmes connus

Pour obtenir la liste des problèmes connus liés au portail intégré, consultez la page Problèmes connus liés au portail intégré.