L'API Popover arriva nella base di riferimento

Una Kravets

È arrivato il momento: Una delle funzionalità che mi entusiasma di più è appena stata rilasciata su tutti i browser moderni e fa ufficialmente parte di Baseline 2024. Questa funzionalità è l'API Popup. Popover offre molte primitive e funzionalità per gli sviluppatori per creare interfacce a più livelli come descrizioni comando, menu, UI didattiche e altro ancora.

Ecco alcuni punti salienti delle funzionalità dei popup:

• Promozione al livello superiore. I popup vengono visualizzati nel livello superiore sopra il resto della pagina, quindi non devi fare esperimenti con z-index.
• Funzionalità di chiusura rapida. Se fai clic all'esterno dell'area del popup, il popup si chiuderà e il focus tornerà al campo precedente.
• Gestione dell'attenzione predefinita. L'apertura del popup imposta la tabulazione successiva all'interno del popup.
• Scorciatoie da tastiera accessibili. Se premi il tasto esc o se esegui il doppio abilitazione/disabilitazione, il popup si chiuderà e lo stato attivo tornerà al campo precedente.
• Associazioni di componenti accessibili. Collegamento semantico di un elemento popup a un trigger popup.

Creazione di popup

La creazione dei popup è abbastanza semplice. Per utilizzare i valori predefiniti, ti basta un button per attivare il popup e un elemento da attivare.

• Innanzitutto, imposta un attributo popover sull'elemento che diventerà il popup.
• Poi, aggiungi un id univoco all'elemento popover.
• Infine, per collegare il pulsante al popup, imposta popovertarget del pulsante sul valore di id dell'elemento popup.

Questo è 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 sul popover, puoi impostare esplicitamente i tipi di popover. Ad esempio, l'utilizzo di un attributo popover senza valore è equivalente a popover="auto". Il valore auto attiva il comportamento di chiusura rapida e chiude automaticamente gli altri popup. Utilizza popover="manual" e dovrai aggiungere un pulsante di chiusura. I popover manuali non chiudono altri popover né consentono agli utenti di ignorarli facendo clic nell'interfaccia utente. Per creare un popup manuale, utilizza 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

Potresti chiederti se hai bisogno di un popup quando esiste una finestra di dialogo e la risposta è: forse no.

È importante notare che l'attributo popover non fornisce semantica da solo. Ora puoi creare esperienze simili a finestre di dialogo modali utilizzando i popup, ma ci sono alcune differenze chiave tra i due:

Conclusione e letture consigliate

popover offre molte funzionalità interessanti alla piattaforma. Per scoprire di più su questa API, inclusa la documentazione relativa all'accessibilità della funzionalità e al set di funzionalità, di seguito sono riportate alcune letture consigliate per ulteriori informazioni:

• Semantica e attributo popover: cosa usare e quando? di Hidde de Vries
• Sull'accessibilità dei popup: cosa fa e cosa non fa il browser di Hidde de Vries
• Documentazione MDN sui popup