Componente `Callout`: verificare e migliorare semantica HTML, verificare indicazioni a11y icona ed esempi

Cosa

Secondo me non c'è una struttura e semantica HTML chiara che comunichi ai lettori di schermo il significato degli elementi del Callout. Vedi anche documentazione BSI del componente qui.

Suggerirei di valutare di

• racchiudere il componente dentro un tag section
• con role="note" (reference)

e, in seconda battuta,

• di mettere (o documentare la possibilità di mettere) il titolo del callout come heading. In questo caso la profondità h2-h6 sarebbe da valutare a seconda della posizione nella struttura delle titolazioni.

Inoltre, le indicazioni per l'accessibilità dell'icona nella documentazione non sono chiare. È fuorviante la presenza del testo visually-hiddenin tutti gli esempi base senza che sia chiaro che sono testi per spiegare l'icona laddove necessario e non chiaro già col titolo, come indica il disclaimer accessibilità (talvolta gli esempi ripetono il titolo, altre volte contengono un generico "Confermato", altre volte non sono presenti).

Perché

Amichevole con i lettori di schermo e Navigabile. Documentazione chiara.

Contesto

Verifiche di accessibilità sui componenti.

⚠️ Sarà da aggiornare lo status delle verifiche nella board census alla risoluzione.

Altro

Da verificare, uniformare, anche in React kit e Angular kit.

Chiederei un parere sulle possibili indicazioni anche a @cfabry con cui ne parlammo tempo fa.