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

<ph type="x-smartling-placeholder"></ph> Vous consultez la documentation Apigee Edge.
Accédez à la page Documentation sur Apigee X. En savoir plus

Le lundi 27 juillet, nous commencerons à publier 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élioration 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é de cette version.

• Navigation au clavier:il est désormais possible de parcourir les barres de navigation en-tête et pied de page, la barre de navigation latérale SmartDocs, la liste des applications, la vue des applications et les fiches API à l'aide du clavier.
  
• Gestion du ciblage : lorsque vous naviguez à l'aide de la barre de navigation de l'en-tête et du menu de navigation latérale SmartDocs, le curseur est placé sur la première <H1> de la page après une action de navigation.
• Régions actives:les modifications apportées à la liste des API résultant du filtrage textuel sont désormais signalées aux utilisateurs utilisant un lecteur d'écran.
• Utilisation sémantique des en-têtes 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 à présent utilisée sur 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.
• Majuscules stylistiques:l'utilisation des majuscules tout en majuscules comme accent visuel est désormais appliquée exclusivement avec CSS plutôt que dans le texte réel.
• Ordre logique du DOM:les boutons d'action des pages "Create" (Créer une application) et "Edit App" (Modifier l'application) ont été déplacés sous les éléments du formulaire dans le DOM. Ils peuvent ainsi être activés dans un ordre logique, une fois l'interaction terminée.
• 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 améliore la navigation avec un lecteur d'écran.
• Contraste des couleurs:le contraste des couleurs a été augmenté à de nombreux endroits du produit pour répondre aux exigences de contraste des couleurs WCAG AA. Les titres des API de la liste des API ont été déplacés sous l'image pour éviter un contraste des couleurs insuffisant.
• Validation des formulaires:sur les pages "Créer" et "Modifier une application", les boutons d'envoi de formulaire sont désormais désactivés. Vous pouvez les activer pour valider les formulaires. Les champs de formulaire validés sur les pages "Créer" et "Modifier une application" incluent désormais des descriptions textuelles de l'erreur de validation.
• Réactivité:désormais, une largeur maximale s'applique à toutes les pages, à l'exception des pages SmartDocs. La navigation SmartDocs fonctionne désormais sur les écrans de téléphone étroits. Les pages "Create" (Créer) et "Edit App" (Modifier l'application) sont désormais plus réactives aux écrans étroits.

Modifications DOM pouvant avoir un impact sur votre portail

Tenez compte en particulier si:

• Les barres de navigation (en-tête et pied de page) et les en-têtes de page ont été stylisés (ou masqués) avec des remplacements CSS: une largeur maximale a désormais été définie pour le contenu de la page. 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.
• Certains éléments de page avec un arrière-plan s'étendent jusqu'au bord de la fenêtre du navigateur (autres que l'image de fond en plein écran) : la largeur maximale du contenu de la page a été limitée afin d'améliorer la réactivité, ce qui peut avoir pour effet de restreindre les anciens panneaux pleine largeur dans les pages personnalisées. Pour en savoir plus sur l'utilisation des nouveaux paramètres de largeur maximale, consultez Créer un panneau en pleine largeur sur la page d'un portail.
• Des niveaux de titres HTML spécifiques ont été ciblés à l'aide de sélecteurs CSS afin de 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 pour 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 sont difficiles à voir sur un fond blanc. Nous vous recommandons de choisir une couleur secondaire accessible, puis de la remplacer si nécessaire par une couleur CSS personnalisée dans certains cas.
• Style des liens dans le texte: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 pixels 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 en haut de <mat-card-actions>.

Résumé des modifications détaillées

Les sections suivantes récapitulent en détail les modifications apportées 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: <ph type="x-smartling-placeholder">
  </ph>
  • $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 cette zone: <ph type="x-smartling-placeholder">
  </ph>
  • $layout-main-content-max-width
  • $layout-horizontal-min-padding

Modifications apportées à 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 enveloppé dans un <a> pour les tailles d'écran d'ordinateur de bureau et de mobile
• Le bouton du menu déroulant de l'utilisateur est désormais un <button> au lieu d'un <a>

Modifications apportées au style des liens

Les liens standards <a> dans le texte sont désormais soulignés par défaut et une couleur d'arrière-plan (selon les paramètres du thème "couleur secondaire") lorsque l'utilisateur pointe sur l'élément

Modifications des pages 404

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

• "Se connecter" 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écapitulées ci-dessous, par catégorie.

• Fiche de saisie Recherche/filtre de l'API: <ph type="x-smartling-placeholder">
  </ph>
  • <mat-card-content class="mat-card-content"> encapsule désormais l'en-tête et l'entrée de la fiche des API de recherche.
  • <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 à <mat-form-field> avant l'entrée: "<mat-icon matPrefix>search</mat-icon>"
  • Étiquettes Aria et références de commandes ajoutées à l'entrée
• Message de liste d'API vide: <ph type="x-smartling-placeholder">
  </ph>
  • "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 API:

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

• Fiches API: <ph type="x-smartling-placeholder">
  </ph>
  • >div class="api-doc-card-content-image-gradient"></div> a été supprimé
  • Le titre de l'API a été déplacé de l'image contenant <div> vers <div class="api-doc-card-content-title"></div> juste après l'image <div>
  • Le titre de l'API est désormais <H2> au lieu de <H1>

Liste des applications:

• État vide: <ph type="x-smartling-placeholder">
  </ph>
  • "Commencer" est désormais <H2> au lieu de <H1>
  • Le guidage d'état vide est désormais <H3> au lieu de <H2>
• Liste: <ph type="x-smartling-placeholder">
  </ph>
  • "Mes applications" est 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" 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 en-têtes 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 API avec des boutons bascule (comme la liste des API). Il s'agit plutôt d'un tableau d'API
• L'entrée de l'URL de rappel a été déplacée dans une nouvelle section
• Le bouton "Save" (Enregistrer) utilise désormais le style "mat-riseed-button" et la couleur d'arrière-plan principale.
• Les tables sont désormais encapsulées dans un <div> avec la classe .app-table-wrapper.
• Les en-têtes de table utilisent désormais le wrapper <thead>
• Les corps de table utilisent désormais le wrapper <tbody>.
• [style.width] n'est plus utilisé pour définir la largeur des colonnes d'un tableau.
• Toutes les balises <a> de la table utilisent désormais <button à la place

Liste des équipes

Les modifications apportées à la liste "Équipe" sont résumées ci-dessous.

• État vide: <ph type="x-smartling-placeholder">
  </ph>
  • "Commencer" est désormais <H2> au lieu de <H1>
  • "Créer une équipe pour gérer la propriété partagée de l'application" est désormais <H3> au lieu de <H2>
• Liste :

  « Équipes » le titre est désormais <H2> au lieu de <H1>

Pages "Créer et modifier une équipe"

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

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

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

• Navigation latérale: <ph type="x-smartling-placeholder">
  </ph>
  • La navigation latérale a été entièrement réécrite avec des composants angulaires Material.
  • Les en-têtes de navigation latérales 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 en surbrillance et pointés dans la navigation latérale utilisent désormais des variantes sombres et claires de l'éditeur de thème du portail "couleur secondaire" pour le texte et l'arrière-plan, respectivement
• Contenu:
  • De nombreux sous-titres, comme "Paramètres du 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 "Vue d'ensemble" sont désormais au format <H3>=> au lieu de <H2>

Améliorer l'accessibilité d'une page d'accueil existante

Si vous disposez d'un portail existant, vous devez modifier la page d'accueil pour bénéficier des nouvelles améliorations d'accessibilité apportées aux fiches navigables, comme décrit ci-dessous:

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

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 primaires des barres de navigation et des en-têtes de page

Pour étendre les barres de navigation et les en-têtes de page 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 pour la barre de navigation d'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 d'une application sur le portail intégré a changé. Plus précisément, lorsqu'ils gèrent une application, dans la section "API", les utilisateurs doivent cliquer sur ou (au lieu d'un bouton d'activation) pour activer ou désactiver respectivement l'accès à une API depuis l'application.

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

ID du problème	Nom du composant	Description
161269688	Portail intégré	Les vignettes des éléments ne s'affichent pas correctement dans Apigee hybrid Les miniatures s'affichent désormais correctement sur la page "Éléments".
161295683	Portail intégré	Échec du serveur sans description définie pour l'application Désormais, l'application peut être créée si la description (champ facultatif) n'est pas définie pour une application.
160898967	Portail intégré	La page de destination du portail ne défile pas correctement Il est désormais possible de faire défiler la page de destination du portail.
160613314, 159197760, 158643196, 158069283, 158069066, 140154942	Portail intégré	Correctifs de sécurité divers
158593496	Portail intégré	Échec de la création d'applications de développement dans les portails V1 Un problème a été résolu qui empêchait la création d'applications de développement sur les portails V1.
158318079	Portail intégré	L'ajout ou la modification d'une URL de rappel dans le portail des développeurs ne fonctionne pas Un problème a été résolu qui empêchait les utilisateurs du portail d'ajouter ou de modifier une URL de rappel sur la page des API.
157902256	Portail intégré	La publication peut remplacer une mise à jour du nom d'une page sur la page "Détails de la page" Un problème a été résolu : la mise à jour du nom d'une page était ignorée lors de la publication du portail (en raison d'une condition de concurrence).
138993728	Portail intégré	Les programmes pour les développeurs ne fonctionnent pas avec le tri et la recherche des e-mails La recherche et le tri des comptes utilisateur personnels fonctionnent désormais comme prévu.

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