20.07.27 – Versionshinweise zum integrierten Portal von Apigee Edge

Sie lesen gerade die Dokumentation zu Apigee Edge.
Apigee X-Dokumentation aufrufen. info

Am Montag, dem 27. Juli, wird eine neue Version des integrierten Portals von Apigee Edge veröffentlicht.

Neue Features und Verbesserungen

In diesem Abschnitt werden die neuen Features und Verbesserungen in diesem Release beschrieben.

Verbesserungen bei Bedienungshilfen und Reaktionsschnelligkeit

Im Folgenden sind die Verbesserungen in Bezug auf Barrierefreiheit und Reaktionsfähigkeit aufgeführt, die in diesem Release implementiert wurden.

• Tastaturnavigation:Die Kopf- und Fußzeilen-Navigationsleisten, die SmartDocs-Seitenleiste, die App-Liste, die App-Ansicht und die API-Karten können jetzt über die Tastatur aufgerufen werden.
  
• Fokusverwaltung : Wenn Sie über die Kopfzeilennavigation oder die SmartDocs-Seitenleiste navigieren, wird der Fokus nach einer Navigationsaktion auf das erste <H1> auf der Seite verschoben.
• Live-Regionen:Änderungen an der Liste der APIs, die sich aus der Textfilterung ergeben, werden jetzt Nutzern mit Screenreader gemeldet.
• Semantische Verwendung von HTML-Überschriften:Der gesamte Text ist jetzt in semantisch passenden HTML-Tags enthalten. Im gesamten Portal wird jetzt eine angemessen hierarchische Überschriftenstruktur verwendet.
• Einmalige Verwendung von <H1>: Jede Seite hat jetzt nur noch ein <H1>, sodass Screenreader die informativste Beschreibung des Seiteninhalts leicht erkennen können.
• Stilistische Großschreibung:Die Verwendung von Großbuchstaben als visuelles Stilmittel erfolgt jetzt ausschließlich mit CSS und nicht mehr im eigentlichen Text.
• Logische Reihenfolge des DOM:Die Aktionsschaltflächen auf den Seiten „App erstellen“ und „App bearbeiten“ wurden im DOM unter die Formularelemente verschoben, damit sie nach Abschluss der Formularinteraktion in logischer Reihenfolge aktiviert werden können.
• Textbeschreibungen visueller Elemente:Labels, Alt-Text und Schaltflächentext werden besser verwendet, was die Navigation mit einem Screenreader erleichtert.
• Farbkontrast:Der Farbkontrast wurde an vielen Stellen im Produkt erhöht, um die WCAG AA-Kontrastanforderungen zu erfüllen. API-Titel in der API-Liste wurden unter das Bild verschoben, um einen möglicherweise unzureichenden Farbkontrast zu vermeiden.
• Formularvalidierung:Auf den Seiten „App erstellen“ und „App bearbeiten“ sind die Schaltflächen zum Senden von Formularen nicht mehr deaktiviert und können aktiviert werden, um das Formular zu validieren. Für validierte Formularfelder auf den Seiten „App erstellen“ und „App bearbeiten“ sind jetzt Textbeschreibungen des Validierungsfehlers verfügbar.
• Responsivität:Für alle Seiten mit Ausnahme von SmartDocs gilt jetzt eine maximale Breite. Die SmartDocs-Navigation funktioniert jetzt auch auf schmalen Smartphone-Bildschirmen. Die Seiten zum Erstellen und Bearbeiten von Apps sind jetzt responsiver und werden auch auf schmalen Bildschirmen gut dargestellt.

DOM-Änderungen, die sich auf Ihr Portal auswirken können

Berücksichtigen Sie insbesondere Folgendes:

• Die Navigationsleisten (Kopf- und Fußzeile) und Seitenüberschriften wurden mit CSS-Überschreibungen formatiert oder ausgeblendet: Es gibt jetzt eine maximale Breite für Seiteninhalte. Damit die Navigationsleisten und Seitenheader bis zum Rand des Browserfensters reichen, hat Apigee das Pseudoelement :before formatiert. Weitere Informationen finden Sie unter Primärfarben für Navigationsleisten und Seitenheader überschreiben.
• Es gibt Seitenelemente mit Hintergründen, die sich bis zum Rand des Browserfensters erstrecken (mit Ausnahme des Vollbild-Hintergrundbilds): Die maximale Breite des Seiteninhalts wurde begrenzt, um die Reaktionsfähigkeit zu verbessern. Dadurch werden eventuell früher Darstellungsbereiche in voller Breite auf benutzerdefinierten Seiten eingeschränkt. Weitere Informationen zur Verwendung der neuen Einstellungen für die maximale Breite finden Sie unter Steuerfeld in voller Breite auf einer Portalseite erstellen.
• Bestimmte HTML-Überschriftenebenen wurden mit CSS-Selektoren angesprochen, um Textstile zu ändern:Die auf bestimmte Inhalte angewendete Überschriftenebene hat sich geändert. Beispiel: <H1> → <H2> Sehen Sie sich die detaillierte Änderungsliste für diese Version an, um genau zu erfahren, welche Inhalte betroffen sind.
• Im Portal-Themeneditor ist Weiß oder eine sehr helle Farbe als „sekundäre Farbe“ ausgewählt:Die sekundäre Farbe wird für Navigationselemente verwendet, die auf einem weißen Hintergrund schwer zu erkennen sind. Wir empfehlen, eine barrierefreie sekundäre Farbe auszuwählen und sie dann bei Bedarf in bestimmten Situationen mit benutzerdefiniertem SCSS zu überschreiben.
• Links im Text wurden neu gestaltet:Die Gestaltung von Links ist jetzt barrierefreier. Unten sehen Sie die Änderungen und wie sie sich auf Ihr vorhandenes Styling auswirken können.
• Der 2 px breite border-bottom-Rahmen im Inhaltsbereich von Karten in der Home View wurde mit CSS-Überschreibungen formatiert oder ausgeblendet : Dieser Rahmen wurde von <mat-card-content> zu einem border-top-Rahmen für <mat-card-actions> verschoben.

Zusammenfassung der detaillierten Änderungen

In den folgenden Abschnitten werden die detaillierten Änderungen, die in dieser Version implementiert wurden, nach Kategorie zusammengefasst.

Portalweite Änderungen

Die portalweiten Änderungen werden unten zusammengefasst.

• Die folgenden Variablen werden nicht mehr verwendet:
  • $layout-horizontal-padding
  • $layout-main-content-horiz-padding
  • $layout-header-horiz-padding
  • $layout-context-bar-horiz-padding
• Es gibt neue Variablen, mit denen Sie die maximale Breite des Hauptinhaltsbereichs und den minimalen horizontalen Innenabstand des Hauptinhaltsbereichs festlegen können:
  • $layout-main-content-max-width
  • $layout-horizontal-min-padding

Änderungen an der primären Navigationsleiste

Änderungen an der primären Navigationsleiste sind unten zusammengefasst.

• Das Logo <img> ist jetzt sowohl für Desktop- als auch für Mobilgeräte-Bildschirmgrößen in ein <a>-Tag eingeschlossen.
• Die Drop-down-Schaltfläche für Nutzer ist jetzt <button> statt <a>.

Änderungen am Linkstil

Standardlinks <a> im Text sind jetzt standardmäßig unterstrichen und haben bei Mouseover eine Hintergrundfarbe (basierend auf der sekundären Farbe in den Designeinstellungen).

Änderungen an der 404-Fehlerseite

Änderungen an der 404-Seite sind unten zusammengefasst.

• „Jetzt anmelden“ ist jetzt <H2> statt <H1>
• Der Erklärungstext lautet jetzt <H2> statt <H1>.

Seite "APIs"

Die Änderungen auf der Seite „APIs“ sind unten nach Kategorie zusammengefasst.

• Eingabekarte für die API-Suche/-Filterung:
  • <mat-card-content class="mat-card-content"> umschließt jetzt die Überschrift und die Eingabe der Karte für Such-APIs.
  • Für <H2> wird jetzt class="mat-subheading-1" anstelle von class="api-doc-filter-title" verwendet.
  • Die<mat-form-field> verwendet jetzt appearance="outline"
  • Vor der Eingabe wurde in <mat-form-field> ein Suchsymbol hinzugefügt: "<mat-icon matPrefix>search</mat-icon>"
  • Dem Input wurden Aria-Labels und Steuerelementreferenzen hinzugefügt.
• Meldung für leere API-Liste:
  • „Keine APIs gefunden“ wird jetzt als <H2> statt als <H1> angezeigt.
  • Die Erklärung lautet jetzt <H3> statt <H2>
• Liste der API-Karten:

  „No APIs match your search“ (Keine APIs entsprechen Ihrer Suche) wird jetzt als <H2> statt als <H1> angezeigt.

• API-Karten:
  • >div class="api-doc-card-content-image-gradient"></div> wurde entfernt
  • Der API-Titel wurde aus dem Bild mit <div> in <div class="api-doc-card-content-title"></div> direkt nach dem Bild <div> verschoben.
  • API-Titel sind jetzt <H2> statt <H1>

Liste der Apps:

• Leerer Zustand:
  • „Jetzt starten“ ist jetzt <H2> statt <H1>
  • Die Anleitung für den leeren Zustand lautet jetzt <H3> statt <H2>.
• Liste:
  • „Meine Apps“ heißt jetzt <H2> statt <H1>
  • <mat-row> wird jetzt in einem <a> verzerrt

App-Seiten erstellen und bearbeiten

Die Änderungen an den Seiten „App erstellen“ und „App bearbeiten“ sind unten zusammengefasst.

• <div class="app-buttons"> wurde ans Ende des <form> verschoben und durch <div class="form-buttons-sticky-container"> ersetzt.
• Alle Verwendungen der Klasse .app-layout-section wurden in .details-layout-section geändert.
• Alle Verwendungen der Klasse .app-layout-section-title wurden in .details-layout-section-title geändert.
• Alle Überschriften sind jetzt <H2> statt <div>.
• Alle Verwendungen der Klasse .app-layout-section-content wurden in .details-layout-section-content geändert.
• Die Liste der APIs ist nicht mehr eine Liste von API-Karten mit Ein/Aus-Schaltern (ähnlich der API-Liste). Stattdessen ist es eine Tabelle mit APIs.
• Die Eingabe der Callback-URL wurde in einen neuen Bereich verschoben
• Die Schaltfläche „Speichern“ hat jetzt den Stil „mat-raised-button“ und den primären Farbhintergrund.
• Tabellen werden jetzt in ein <div> mit der Klasse .app-table-wrapper eingeschlossen.
• Tabellenüberschriften verwenden jetzt den <thead>-Wrapper
• Für Tabellenkörper wird jetzt der <tbody>-Wrapper verwendet
• [style.width] wird nicht mehr zum Festlegen der Spaltenbreiten von Tabellen verwendet
• Für alle <a>-Tags in der Tabelle wird jetzt stattdessen <button verwendet.

Teams-Liste

Änderungen an der Teamliste sind unten zusammengefasst.

• Leerer Zustand:
  • „Jetzt starten“ ist jetzt <H2> statt <H1>
  • „Team erstellen, um die gemeinsame Inhaberschaft von Apps zu verwalten“ ist jetzt <H3> anstelle von <H2>
• Liste:

  Der Titel „Teams“ lautet jetzt <H2> statt <H1>

Teamseiten erstellen und bearbeiten

Die Änderungen an den Seiten zum Erstellen und Bearbeiten von Teams sind unten zusammengefasst.

• Auf der <form> wurde die Klasse .teams-form durch .details-form ersetzt.
• <div class="teams-buttons"> wurde ans Ende von <form> verschoben und durch <div class="form-buttons-sticky-container"> ersetzt.
• Alle Verwendungen der Klasse .teams-layout-section wurden in .details-layout-section geändert.
• Alle Verwendungen der Klasse .teams-layout-section-title wurden in .details-layout-section-title geändert.
• Alle Verwendungen der Klasse .teams-layout-section-content wurden in .details-layout-section-content geändert.
• <div class="team-apps-container"> wurde um <table class="team-apps"> herum hinzugefügt

SmartDocs

Änderungen an der SmartDocs-Benutzeroberfläche sind unten zusammengefasst.

• Seitliche Navigationsleiste:
  • Die Seitenleiste wurde komplett mit Angular Material-Komponenten neu geschrieben.
  • Überschriften in der Seitenleiste sind jetzt <H2> statt <div>
  • Navigationselemente verwenden jetzt die Standardtextfarbe des Portals anstelle der „Sekundärfarbe“ des Portal-Designeditors.
  • Für ausgewählte, fokussierte und mit dem Mauszeiger überfahrene Elemente in der Seitenleiste werden jetzt dunkle und helle Varianten der „Sekundärfarbe“ des Portaldesign-Editors für den Text bzw. den Hintergrund verwendet.
• Inhalt:
  • Viele Unterüberschriften wie „Pfadparameter“ und „Header-Parameter“ sind jetzt <H2> anstelle von <H3>.
  • Schema-Entitäten auf der Übersichtsseite sind jetzt <H3>=> statt <H2>

Bedienungshilfen zu einer vorhandenen Startseite hinzufügen

Wenn Sie ein bestehendes Portal haben, müssen Sie die Startseite bearbeiten, um die neuen Verbesserungen der Barrierefreiheit für navigierbare Karten nutzen zu können. Gehen Sie dazu so vor:

1. Entfernen Sie href="" aus dem <mat-card>-Container.
2. Verwenden Sie <H2> anstelle von <H1> für die Kartenüberschrift in <mat-card-header>.
3. Schließen Sie den Text in der Kartenüberschrift <h2> in <a class="navigable-content" href="href-name"> ein und legen Sie href-name auf den entsprechenden Wert für die Navigation der Karte fest.

Alternativ können Sie die folgende Kartenvorlage verwenden:

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

Primärfarben für Navigationsleisten und Seitenüberschriften überschreiben

Wenn Sie die Navigationsleisten und Seitenüberschriften bis zum Rand des Browserfensters erweitern möchten, fügen Sie mit dem erweiterten Designeditor benutzerdefinierte Formatierungen für die Navigationsleisten und Seitenüberschriften hinzu, ähnlich wie im folgenden Beispiel für die Kopfzeilen-Navigationsleiste:

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

Aktualisierungsprozedur für die Verwaltung von APIs für eine App

Die Nutzerinteraktion zum Verwalten der APIs in einer App im integrierten Portal hat sich geändert. Wenn Nutzer eine App verwalten, müssen sie im Abschnitt „APIs“ auf  oder  (statt auf einen Umschalter) klicken, um den Zugriff auf eine API über die App zu aktivieren bzw. zu deaktivieren.

Aktualisieren Sie gegebenenfalls alle Anleitungen in Ihrem Portal, in denen beschrieben wird, wie APIs auf der Seite „Apps“ verwaltet werden. Weitere Informationen finden Sie unter APIs in Ihrer App verwalten.

Fehlerkorrekturen

Folgende Fehler wurden in diesem Release behoben. Diese Liste ist hauptsächlich für Nutzer gedacht, die prüfen möchten, ob ihre Support-Tickets erfolgreich bearbeitet wurden. Sie enthält keine detaillierten Informationen für allgemeine Nutzer.

Bekannte Probleme

Eine Liste bekannter Probleme des integrierten Portals finden Sie unter Bekannte Probleme des integrierten Portals.