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 di 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 all'accessibilità e alla 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 SmartDocs, nell'elenco delle app, nella vista 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 SmartDocs sposta lo stato attivo sul primo <H1> della pagina dopo un'azione di navigazione.
• Regioni live:le modifiche all'elenco delle API derivanti dal filtro testuale vengono ora segnalate agli utenti che utilizzano uno screen reader.
• Utilizzo semantico delle intestazioni HTML:tutto il testo è ora contenuto in tag HTML semanticamente appropriati. Ora viene utilizzata una struttura di intestazione gerarchica appropriata in tutto il portale.
• Utilizzo singolo di <H1>: ogni pagina ora ha un solo <H1> in modo che gli screen reader possano identificare facilmente la descrizione più informativa dei contenuti della pagina.
• Capitalizzazione stilistica:l'utilizzo di tutte le maiuscole come accento visivo viene ora applicato esclusivamente con CSS anziché nel testo effettivo.
• 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 molti punti del prodotto. I titoli delle API nell'elenco delle API sono stati spostati sotto l'immagine per evitare un possibile contrasto di colore 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 è presente una larghezza massima che si applica a tutte le pagine, ad eccezione di SmartDocs. La navigazione di SmartDocs ora funziona sugli 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, considera se:

• Le barre di navigazione (intestazione e piè di pagina) e le intestazioni delle pagine sono state stilizzate (o nascoste) con sostituzioni CSS: ora è presente 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 saperne di più, vedi Sostituire i 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 limitare i pannelli a larghezza intera nelle pagine personalizzate. Per saperne di più sull'utilizzo delle nuove impostazioni di larghezza massima, vedi Creare un pannello a larghezza intera in una pagina del portale.
• Sono stati presi di mira livelli di intestazione HTML specifici con selettori CSS per modificare gli stili del 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 poi di sostituirlo, se necessario, con scss personalizzato in situazioni specifiche.
• Sono stati applicati stili ai 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 visualizzazione Home è stato stilizzato o nascosto con sostituzioni 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 presenti nuove variabili che consentono di controllare la larghezza massima dell'area dei contenuti principali e il padding orizzontale minimo per l'area dei contenuti principali:
  • $layout-main-content-max-width
  • $layout-horizontal-min-padding

Modifiche alla barra di navigazione principale

Di seguito è riportato un riepilogo delle modifiche alla barra di navigazione principale.

• L'elemento <img> del logo ora è racchiuso in un elemento <a> sia per le dimensioni dello schermo del computer che per quelle dei dispositivi mobili.
• Il pulsante del menu a discesa dell'utente ora è un elemento <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 (basato sul "colore secondario" delle impostazioni del tema) al passaggio del mouse.

Modifiche alla pagina 404

Di seguito è riportato un riepilogo delle modifiche alla pagina 404.

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

Pagina API

Di seguito è riportato un riepilogo delle modifiche alla pagina API, per categoria.

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

  "Nessuna API corrisponde alla tua ricerca" ora è <H2> anziché <H1>.

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

Elenco delle app:

• Stato vuoto:
  • "Inizia" ora è <H2> anziché <H1>
  • Le indicazioni sullo stato vuoto ora sono <H3> anziché <H2>.
• Elenco:
  • "Le mie app" ora è <H2> anziché <H1>.
  • <mat-row> ora è racchiuso in un <a>

Pagine Crea e modifica app

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

• <div class="app-buttons"> è stato spostato alla fine dell'elemento <form> e sostituito da <div class="form-buttons-sticky-container">.
• Tutti gli utilizzi della classe .app-layout-section sono stati modificati in .details-layout-section.
• Tutti gli utilizzi della classe .app-layout-section-title sono stati modificati in .details-layout-section-title.
• Tutte le intestazioni delle sezioni ora sono <H2> anziché <div>
• Tutti gli utilizzi della classe .app-layout-section-content sono stati modificati in .details-layout-section-content.
• L'elenco delle API non è più un elenco di schede API con interruttori (simile all'elenco delle API). È invece 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 la 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 all'elenco delle squadre.

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

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

Pagine Crea e modifica squadra

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

• Nell'elemento <form>, la classe .teams-form è stata sostituita da .details-form.
• <div class="teams-buttons"> è stato spostato alla fine dell'elemento <form> e sostituito da <div class="form-buttons-sticky-container">.
• Tutti gli utilizzi della classe .teams-layout-section sono stati modificati in .details-layout-section.
• Tutti gli utilizzi della classe .teams-layout-section-title sono stati modificati in .details-layout-section-title.
• Tutti gli utilizzi della classe .teams-layout-section-content sono stati modificati in .details-layout-section-content.
• È stato aggiunto <div class="team-apps-container"> che racchiude <table class="team-apps">.

SmartDocs

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

• Navigazione laterale:
  • La navigazione laterale è stata completamente riscritta con i componenti di Angular Material.
  • Le intestazioni 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 al passaggio del mouse nella navigazione laterale ora utilizzano le varianti chiare e scure del "colore secondario" dell'editor del tema del portale rispettivamente per il testo e lo sfondo.
• Contenuti:
  • Molte sottotitoli come "Parametri del percorso" e "Parametri dell'intestazione" ora sono <H2> anziché <H3>
  • Le entità dello schema nella pagina Panoramica ora sono <H3>=> anziché <H2>

Aggiungere miglioramenti all'accessibilità a una home page esistente

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

1. Rimuovi href="" dal contenitore <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 elemento <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 scheda:

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

Sostituire i 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 del tema 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
  }
}

Aggiornare la procedura per la gestione delle API per un'app

L'interazione dell'utente per gestire le API in un'app sul portale integrato è cambiata. In particolare, quando gestiscono un'app, nella sezione API gli utenti devono fare clic su o (anziché su un interruttore) per attivare o disattivare, rispettivamente, l'accesso a un'API dall'app.

Se applicabile, aggiorna tutte le procedure del portale che descrivono come gestire le API nella pagina delle app. Per saperne di più, vedi 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 a tutti gli utenti.

Problemi noti

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