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

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

Lundi 27 juillet, nous débuterons le lancement d'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é

La liste suivante présente les améliorations de l'accessibilité et de la réactivité mises en œuvre pour cette version.

• Navigation au clavier : il est désormais possible de naviguer dans les barres de navigation de l'en-tête et du pied de page, dans la navigation latérale SmartDocs, dans la liste des applications, dans la vue Application et dans les fiches d'API à l'aide du clavier.
  
• Gestion du focus : la navigation à l'aide de la barre de navigation de l'en-tête et de la navigation latérale SmartDocs déplace le focus vers le premier <H1> de la page après une action de navigation.
• Régions dynamiques : les modifications apportées à la liste des API résultant du filtrage textuel sont désormais signalées aux utilisateurs qui utilisent un lecteur 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 titre 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> afin que les lecteurs d'écran puissent facilement identifier la description la plus informative du contenu de la page.
• Capitalisation stylistique : l'utilisation de majuscules comme accent visuel est désormais appliquée exclusivement avec CSS plutôt que dans le texte proprement dit.
• 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 du 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é pour répondre aux exigences de contraste WCAG AA dans de nombreux endroits du produit. Les titres d'API de la liste des API ont été déplacés sous l'image pour éviter un contraste des couleurs potentiellement insuffisant.
• Validation de 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 une application" incluent désormais des descriptions textuelles de l'erreur de validation.
• Réactivité : une largeur maximale s'applique désormais à toutes les pages, à l'exception de SmartDocs. La navigation SmartDocs fonctionne désormais sur les écrans étroits de la taille d'un téléphone. Les pages "Créer une application" et "Modifier une application" sont désormais plus réactives sur les écrans étroits.

Modifications du DOM susceptibles d'avoir un impact sur votre portail

En particulier, vérifiez si :

• 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 maximale 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 la section Remplacer les couleurs principales des barres de navigation et des en-têtes de page.
• Des éléments de page dont l'arrière-plan s'étend jusqu'au bord de la fenêtre du navigateur (autre que 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 max-width, consultez la section Créer un panneau en pleine largeur sur une page du portail.
• Des niveaux de titre 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 de 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 arrière-plan blanc. Nous vous recommandons de choisir une couleur secondaire accessible, puis de la remplacer si nécessaire par un scss personnalisé dans des situations spécifiques.
• Les liens intégrés au texte ont été stylisés : le style des liens est désormais plus accessible. Consultez les modifications ci-dessous pour comprendre comment il peut interagir avec votre style existant.
• La bordure inférieure de 2 px de la zone de contenu des fiches de la vue d'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ésument les modifications détaillées qui ont été mises en œuvre dans cette version, par catégorie.

Modifications à l'échelle du portail

Les modifications à l'échelle du portail sont résumées ci-dessous.

• 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 principale et la marge intérieure horizontale minimale de la zone de contenu principale :
  • $layout-main-content-max-width
  • $layout-horizontal-min-padding

Modifications de la barre de navigation principale

Les modifications apportées à la barre de navigation principale sont résumées ci-dessous.

• Le logo <img> est désormais encapsulé dans un <a> pour les écrans d'ordinateur et de mobile.
• Le bouton de menu déroulant de l'utilisateur 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 de thème "couleur secondaire") au survol.

Modifications de la page 404

Les modifications apportées à la page 404 sont résumées ci-dessous.

• "Se connecter maintenant" est désormais <H2> au lieu de <H1>.
• Le texte d'explication est désormais <H2> au lieu de <H1>.

Page des API

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

• Fiche d'entrée de recherche/filtre d'API :
  • <mat-card-content class="mat-card-content"> encapsule désormais le titre et l'entrée de la fiche des API de recherche.
  • Le <H2> utilise désormais class="mat-subheading-1" au lieu de class="api-doc-filter-title"
  • Le<mat-form-field> utilise désormais appearance="outline".
  • Une icône de recherche a été ajoutée au <mat-form-field> avant l'entrée : "<mat-icon matPrefix>search</mat-icon>"
  • Des libellés Aria et des références de contrôle ont été ajoutés à l'entrée.
• Message de liste d'API vide :
  • « 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 :

  "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>
  • Le titre de l'API est désormais <H2> au lieu de <H1>.

Liste des applications :

• État vide :
  • "Premiers pas" est désormais <H2> au lieu de <H1>.
  • Les conseils sur l'état vide sont désormais <H3> au lieu de <H2>.
• Liste :
  • « Mes applications » est désormais <H2> au lieu de <H1>.
  • <mat-row> est désormais encapsulé dans un <a>.

Pages "Créer une application" et "Modifier une application"

Les modifications apportées aux pages "Créer une application" et "Modifier une application" sont résumées ci-dessous.

• <div class="app-buttons"> a été déplacé à la fin du <form> et remplacé par <div class="form-buttons-sticky-container">.
• Toutes les utilisations de la classe .app-layout-section ont été remplacées par .details-layout-section.
• Toutes les utilisations de la classe .app-layout-section-title ont été remplacées par .details-layout-section-title.
• Tous les titres de section sont désormais <H2> au lieu de <div>.
• Toutes les utilisations de la classe .app-layout-section-content ont été remplacées par .details-layout-section-content.
• La liste des API n'est plus une liste de fiches d'API avec des boutons d'activation/de désactivation (semblable à la liste des API). Il s'agit désormais d'un tableau d'API.
• L'entrée de l'URL de rappel a été déplacée vers une nouvelle section.
• Le bouton "Enregistrer" utilise désormais le style mat-raised-button et l'arrière-plan de couleur principale.
• 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 l'encapsuleur <thead>.
• Les corps de tableau utilisent désormais l'encapsuleur <tbody>.
• [style.width] n'est plus utilisé pour définir la largeur des colonnes du tableau.
• Toutes les balises <a> du tableau utilisent désormais <button à la place.

Liste des équipes

Les modifications apportées à la liste des équipes sont résumées ci-dessous.

• État vide :
  • "Premiers pas" est désormais <H2> au lieu de <H1>
  • "Créer une équipe pour gérer la propriété partagée des applications" est désormais <H3> au lieu de <H2>.
• Liste :

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

Pages "Créer une équipe" et "Modifier une équipe"

Les modifications apportées aux pages "Créer une équipe" et "Modifier une équipe" sont résumées ci-dessous.

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

SmartDocs

Les modifications apportées à l'interface SmartDocs sont résumées ci-dessous.

• 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, ciblés et survolés dans la navigation latérale utilisent désormais des variations 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 de la page de présentation 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> au lieu de <H1> pour le titre de la fiche dans <mat-card-header>.
3. Dans le titre de la fiche <h2>, encapsulez le texte dans un <a class="navigable-content" href="href-name"> et définissez le href-name sur la valeur appropriée pour la navigation de la fiche.

Vous pouvez également utiliser le modèle de fiche 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 des barres de navigation et des 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
  }
}

Mettre à jour la procédure de gestion des API pour une application

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

Mettez à jour toutes les procédures de votre portail qui décrivent comment gérer les API sur la page des applications, le cas échéant. Pour en savoir plus, consultez la section 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é.