L'API Popover arriva nella base di riferimento

Una Kravets

È arrivato il momento: Una delle funzionalità che mi piacciono di più è appena arrivata su tutti i browser moderni ed è ufficialmente parte di Baseline 2024. Si tratta dell'API Popover. Popover offre moltissime primitive e fantastiche opportunità di sviluppo per gli sviluppatori per la creazione di interfacce a più livelli come descrizioni dei comandi, menu, UI per l'insegnamento e altro ancora.

Ecco alcuni esempi di funzionalità popover:

• Promozione al livello superiore. I popover verranno visualizzati nel livello superiore sopra il resto della pagina, quindi non dovrai sperimentare con z-index.
• Funzionalità per ignorare la sveglia. Se fai clic all'esterno dell'area popover, il popover verrà chiuso e verrà ripristinato lo stato attivo.
• Gestione predefinita dell'elemento attivo. Quando apri il popover, la tabulazione successiva viene bloccata all'interno del popover.
• Associazioni da tastiera accessibili. Premi il tasto esc o attiva/disattiva due volte il popover per chiudere il popover e ripristinare lo stato attivo.
• Associazioni di componenti accessibili. La connessione di un elemento popover a un popover attiva in modo semantico.

Creazione di popover

La creazione dei popover è piuttosto semplice. Per utilizzare i valori predefiniti, è sufficiente un button per attivare il popover e un elemento da attivare.

• Per prima cosa, imposta un attributo popover sull'elemento che sarà il popover.
• Quindi, aggiungi un id univoco nell'elemento popover.
• Infine, per collegare il pulsante al popover, imposta popovertarget del pulsante sul valore id dell'elemento popover.

Questo viene mostrato nel seguente codice:

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p><p>I am a popover with more information. Hit <kbd>esc</kbd> or click away to close me.<p></p>
</div>

Per un controllo più granulare sui popover, puoi impostare esplicitamente i tipi di popover. Ad esempio, utilizzare un attributo popover essenziale senza valore equivale a utilizzare popover="auto". Il valore auto consente di spegnere la sveglia e chiude automaticamente gli altri popover. Usa popover="manual" e dovrai aggiungere un pulsante di chiusura. I popover manuali non chiudono altri popover né consentono agli utenti di ignorarli facendo clic fuori dall'interfaccia utente. Per creare un popover manuale devi utilizzare quanto segue:

<button popovertarget="my-popover" class="trigger-btn"> Open Popover </button>

<div id="my-popover" popover=manual>
  <p>I am a popover with more information. Hit the close button or toggle to close me.<p>
  <button class="close-btn" popovertarget="my-popover" popovertargetaction="hide">
    <span aria-hidden="true">❌</span>
    <span class="sr-only">Close</span>
  </button>
</div>

Popover e finestra di dialogo modale

Forse ti starai chiedendo se hai bisogno del popover quando è presente una finestra di dialogo e la risposta è: forse no.

È importante notare che l'attributo popover non fornisce la semantica in modo autonomo. Anche se ora è possibile creare esperienze simili a finestre di dialogo modali utilizzando i popover, esistono alcune differenze fondamentali tra i due:

Conclusione e ulteriore lettura

popover offre molte funzionalità interessanti sulla piattaforma. Per saperne di più su questa API, ad esempio sull'accessibilità della funzione e sulla documentazione relativa al set di funzionalità, di seguito sono riportate alcune informazioni consigliate:

• Semantica e attributo popover: cosa usare quando? di Hidde de Vries
• Per quanto riguarda l'accessibilità dei popover: cosa fa e non il browser, secondo Hidde de Vries
• Documentazione MDN sui popover