Componente `Steppers`: migliorare accessibilità icone svg

[Fupete]

Esiste già una discussione sul tema che ti interessa, o su un tema simile?

• [X] Ho verificato e non esiste

Versione della libreria

2.9.0

Cosa

Icone svg negli esempi di varianti di questo componente veicolano significato. Quindi dovrebbero essere annunciate dai lettori di schermo.

È un po' strano navigarle e sentire annunciare solo "Immagine" e magari il messaggio è veicolato subito dopo da uno span nascosto subito dopo (es. tick "Confermato"). In altre icone non c'è proprio annuncio invece e non hanno alternative testuali.

Andare verso una soluzione uniforme Es. con role=img e poi tag <title> dentro prima di <use>? Oppure con proprietà aria-labelledBy e puntare allo con classevisually-hidden`? Oppure?

Da verificare la soluzione migliore, si veda anche: https://github.com/italia/bootstrap-italia/issues/749#issuecomment-1293294166. E renderla coerente in tutti i componenti laddove dove serve 'annunciare' significato di una svg. Ci sono diverse issue già aperte di dettaglio per altri componenti, magari è utile documentare la cosa centralmente nella pagina icone principalmente? Pensiamoci.

Perché

Amichevole con i lettori di schermo.

Contesto

Verifiche di accessibilità sui componenti.

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

Altro

Uniformare anche in React kit e Angular kit. Da notare che in React kit il problema svg potrebbe essere diversa perché implementate in modo diverso (da verificare).