20.07.27 - Note di rilascio del portale integrato Apigee Edge

Stai visualizzando la documentazione di Apigee Edge.
Consulta la documentazione di Apigee X. info

Lunedì 27 luglio inizieremo a rilasciare una nuova versione del portale integrato Apigee Edge.

Nuove funzionalità e miglioramenti

Questa sezione descrive le nuove funzionalità e i miglioramenti di questa release.

Miglioramenti all'accessibilità e alla reattività

Di seguito sono elencati i miglioramenti dell'accessibilità e della reattività implementati per questa release.

• Navigazione da tastiera:ora è possibile navigare nelle barre di navigazione dell'intestazione e del piè di pagina, nella navigazione laterale di Smart Docs, nell'elenco delle app, nella visualizzazione delle app e nelle schede API utilizzando la tastiera.
  
• Gestione dello stato attivo : la navigazione con la barra di navigazione dell'intestazione e la navigazione laterale di Smart Docs sposta lo stato attivo sul primo <H1> della pagina dopo un'azione di navigazione.
• Regioni attive:le modifiche all'elenco delle API derivanti dal filtro testuale vengono ora segnalate agli utenti che utilizzano un lettore di schermo.
• Utilizzo semantico delle intestazioni HTML:tutto il testo è ora contenuto in tag HTML semanticamente appropriati. Ora in tutto il portale viene utilizzata una struttura di intestazioni gerarchica appropriata.
• Utilizzo singolare di <H1>: ora ogni pagina ha un solo <H1>, in modo che gli screen reader possano identificare facilmente la descrizione più informativa dei contenuti della pagina.
• Maiuscole stilistiche: l'utilizzo di tutte le maiuscole come accento visivo viene ora applicato esclusivamente con CSS anziché nel testo vero e proprio.
• Ordinamento logico del DOM: i pulsanti di azione nelle pagine Crea e Modifica app sono stati spostati sotto gli elementi del modulo nel DOM in modo che possano essere attivati in ordine logico, al termine dell'interazione con il modulo.
• Descrizioni testuali degli elementi visivi: è stato migliorato l'utilizzo di etichette, testo alternativo e testo dei pulsanti, il che migliora la navigazione con uno screen reader.
• Contrasto di colore: il contrasto di colore è stato aumentato per soddisfare i requisiti di contrasto WCAG AA in molte parti del prodotto. I titoli delle API nell'elenco delle API sono stati spostati sotto l'immagine per evitare un contrasto di colore potenzialmente insufficiente.
• Convalida del modulo:nelle pagine Crea e Modifica app, i pulsanti di invio del modulo non sono più disattivati e possono essere attivati per convalidare il modulo. I campi del modulo convalidati nelle pagine Crea e modifica app ora includono descrizioni testuali dell'errore di convalida.
• Reattività:ora esiste una larghezza massima che si applica a tutte le pagine, ad eccezione di Smart Docs. La navigazione di Smart Docs ora funziona su schermi stretti delle dimensioni di uno smartphone. Le pagine Crea e modifica app ora sono più reattive agli schermi stretti.

Modifiche al DOM che potrebbero influire sul tuo portale

In particolare, valuta se:

• Le barre di navigazione (intestazione e piè di pagina) e le intestazioni delle pagine sono state stilizzate (o nascoste) con override CSS: ora esiste una larghezza massima per i contenuti della pagina. Per estendere le barre di navigazione e le intestazioni delle pagine fino al bordo della finestra del browser, Apigee ha applicato lo stile allo pseudo elemento :before. Per maggiori informazioni, vedi Override dei colori principali per le barre di navigazione e le intestazioni delle pagine.
• Sono presenti elementi della pagina con sfondi che si estendono fino al bordo della finestra del browser (diversi dall'immagine di sfondo a schermo intero): la larghezza massima dei contenuti della pagina è stata limitata per migliorare la reattività, il che potrebbe vincolare i pannelli precedentemente a larghezza intera all'interno delle pagine personalizzate. Per saperne di più sull'utilizzo delle nuove impostazioni di larghezza massima, vedi Creare un riquadro a larghezza intera in una pagina del portale.
• Livelli di intestazione HTML specifici sono stati presi di mira con i selettori CSS per modificare gli stili di testo: il livello di intestazione applicato a determinati contenuti è cambiato. Ad esempio: <H1> → <H2> esamina l'elenco dettagliato delle modifiche per questa release per capire esattamente quali contenuti sono interessati.
• Nel tema del portale è selezionato un colore bianco o molto chiaro come "colore secondario":il colore secondario viene utilizzato per gli elementi di navigazione che saranno difficili da vedere su uno sfondo bianco. Ti consigliamo di scegliere un colore secondario accessibile e di sostituirlo, se necessario, con un file SCSS personalizzato in situazioni specifiche.
• Stile dei link nel testo:lo stile dei link è ora più accessibile. Consulta le modifiche riportate di seguito per capire come potrebbe interagire con lo stile esistente.
• Il bordo inferiore di 2 px nell'area dei contenuti delle schede della schermata Home è stato modificato o nascosto con gli override CSS: questo bordo è stato spostato da <mat-card-content> a un bordo superiore su <mat-card-actions>.

Riepilogo delle modifiche dettagliate

Le sezioni seguenti riepilogano le modifiche dettagliate implementate in questa release, per categoria.

Modifiche a livello di portale

Di seguito è riportato un riepilogo delle modifiche a livello di portale.

• Le seguenti variabili non sono più in uso:
  • $layout-horizontal-padding
  • $layout-main-content-horiz-padding
  • $layout-header-horiz-padding
  • $layout-context-bar-horiz-padding
• Sono disponibili nuove variabili che consentono di controllare la larghezza massima dell'area dei contenuti principali e il padding orizzontale minimo dell'area dei contenuti principali:
  • $layout-main-content-max-width
  • $layout-horizontal-min-padding

Modifiche alla barra di navigazione principale

Le modifiche alla barra di navigazione principale sono riassunte di seguito.

• Il logo <img> ora è racchiuso in un <a> sia per le dimensioni dello schermo del computer che per quelle del dispositivo mobile.
• Il pulsante del menu a discesa dell'utente ora è <button> anziché <a>

Modifiche allo stile dei link

I link standard <a> all'interno del testo ora hanno una sottolineatura per impostazione predefinita e un colore di sfondo (in base all'impostazione del tema "Colore secondario") al passaggio del mouse.

Modifiche alla pagina 404

Di seguito sono riassunte le modifiche alla pagina 404.

• "Accedi ora" ora è <H2> invece di <H1>
• Il testo della spiegazione ora è <H2> anziché <H1>

Pagina API

Di seguito sono riassunte le modifiche alla pagina API, per categoria.

• Scheda di input per la ricerca/il filtro API:
  • <mat-card-content class="mat-card-content"> ora include l'intestazione e l'input della scheda delle API di ricerca
  • <H2> ora utilizza class="mat-subheading-1" anziché class="api-doc-filter-title"
  • <mat-form-field> ora utilizza appearance="outline"
  • È stata aggiunta un'icona di ricerca a <mat-form-field> prima dell'input: "<mat-icon matPrefix>search</mat-icon>"
  • Sono state aggiunte etichette ARIA e riferimenti di controllo all'input
• Messaggio di elenco API vuoto:
  • "Nessuna API trovata" ora è <H2> invece di <H1>
  • La spiegazione ora è <H3> anziché <H2>
• Elenco delle schede API:

  "Nessuna API corrisponde alla tua ricerca" ora è <H2> invece di <H1>

• Schede API:
  • L'utente >div class="api-doc-card-content-image-gradient"></div> è stato rimosso
  • Il titolo dell'API è stato spostato dall'immagine contenente <div> a <div class="api-doc-card-content-title"></div> immediatamente dopo l'immagine <div>
  • I titoli delle API ora sono <H2> anziché <H1>

Elenco di app:

• Stato vuoto:
  • "Inizia" ora è <H2> invece di <H1>
  • Le indicazioni per lo stato vuoto ora sono <H3> anziché <H2>
• Elenco:
  • "Le mie app" ora è <H2> invece di <H1>
  • <mat-row> è ora deformato in un <a>

Creare e modificare le pagine dell'app

Di seguito è riportato un riepilogo delle modifiche apportate alle pagine Crea e modifica app.

• <div class="app-buttons"> è stato spostato alla fine di <form> e sostituito da <div class="form-buttons-sticky-container">
• Tutto l'utilizzo della classe .app-layout-section è stato modificato in .details-layout-section
• Tutto l'utilizzo della classe .app-layout-section-title è stato modificato in .details-layout-section-title
• Tutti i titoli delle sezioni ora sono <H2> anziché <div>
• Tutto l'utilizzo della classe .app-layout-section-content è stato modificato in .details-layout-section-content
• L'elenco delle API non è più un elenco di schede API con pulsanti di attivazione/disattivazione (simile all'elenco delle API). Si tratta invece di una tabella di API
• L'input dell'URL di callback è stato spostato in una nuova sezione
• Il pulsante Salva ora utilizza lo stile mat-raised-button e lo sfondo del colore principale
• Le tabelle ora sono racchiuse in un <div> con classe .app-table-wrapper
• Le intestazioni delle tabelle ora utilizzano il wrapper <thead>
• I corpi delle tabelle ora utilizzano il wrapper <tbody>
• [style.width] non viene più utilizzato per impostare la larghezza delle colonne della tabella
• Tutti i tag <a> all'interno della tabella ora utilizzano <button

Elenco delle squadre

Di seguito è riportato un riepilogo delle modifiche apportate all'elenco Team.

• Stato vuoto:
  • "Inizia" ora è <H2> invece di <H1>
  • "Crea un team per gestire la proprietà condivisa dell'app" ora è <H3> anziché <H2>
• Elenco:

  Il titolo "Squadre" ora è <H2> anziché <H1>

Creare e modificare le pagine del team

Di seguito è riportato un riepilogo delle modifiche apportate alle pagine Crea e modifica team.

• Il giorno <form>, la classe .teams-form è stata sostituita da .details-form
• <div class="teams-buttons"> è stato spostato alla fine di <form> e sostituito da <div class="form-buttons-sticky-container">
• Tutto l'utilizzo della classe .teams-layout-section è stato modificato in .details-layout-section
• Tutto l'utilizzo della classe .teams-layout-section-title è stato modificato in .details-layout-section-title
• Tutto l'utilizzo della classe .teams-layout-section-content è stato modificato in .details-layout-section-content
• <div class="team-apps-container"> è stato aggiunto intorno a <table class="team-apps">

SmartDocs

Di seguito è riportato un riepilogo delle modifiche all'interfaccia di Smart Docs.

• Navigazione laterale:
  • La navigazione laterale è stata completamente riscritta con i componenti angular-material
  • I titoli della navigazione laterale ora sono <H2> anziché <div>
  • Gli elementi di navigazione ora utilizzano il colore del testo predefinito del portale anziché il "colore secondario " dell'editor del tema del portale
  • Gli elementi selezionati, attivi e su cui è stato passato il mouse nella navigazione laterale ora utilizzano le varianti scure e chiare del "colore secondario" dell'editor del tema del portale per il testo e lo sfondo, rispettivamente.
• Contenuti:
  • Molti sottotitoli, come "Parametri di percorso" e "Parametri di intestazione", ora sono <H2> anziché <H3>
  • Le entità dello schema nella pagina Panoramica ora sono <H3>=> anziché <H2>

Aggiunta di miglioramenti dell'accessibilità a una home page esistente

Se hai un portale esistente, dovrai modificare la home page per sfruttare i nuovi miglioramenti dell'accessibilità per le schede navigabili, come descritto di seguito:

1. Rimuovi href="" dal container <mat-card>.
2. Utilizza <H2> anziché <H1> per l'intestazione della scheda all'interno di <mat-card-header>.
3. All'interno dell'intestazione della scheda <h2> racchiudi il testo in un <a class="navigable-content" href="href-name"> e imposta href-name sul valore appropriato per la navigazione della scheda.

In alternativa, puoi utilizzare il seguente modello di carta:

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

Override dei colori principali per le barre di navigazione e le intestazioni delle pagine

Per estendere le barre di navigazione e le intestazioni delle pagine fino al bordo della finestra del browser, aggiungi uno stile personalizzato per le barre di navigazione e le intestazioni delle pagine utilizzando l'editor di temi avanzato, in modo simile al seguente per la barra di navigazione dell'intestazione:

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

Procedura di aggiornamento per la gestione delle API per un'app

L'interazione utente per gestire le API in un'app sul portale integrato è cambiata. Nello specifico, quando gestiscono un'app, nella sezione API gli utenti devono fare clic su o (anziché su un pulsante di attivazione/disattivazione) per abilitare o disabilitare, rispettivamente, l'accesso a un'API dall'app.

Se applicabile, aggiorna le procedure sul tuo portale che descrivono come gestire le API nella pagina delle app. Per saperne di più, consulta Gestire le API nella tua app.

Bug corretti

In questa release sono stati corretti i seguenti bug. Questo elenco è destinato principalmente agli utenti che vogliono verificare se i loro ticket di assistenza sono stati risolti. Non è progettato per fornire informazioni dettagliate per tutti gli utenti.

Problemi noti

Per un elenco dei problemi noti relativi al portale integrato, vedi Problemi noti relativi al portale integrato.