ion-icon without a label is exposed as an image with no name

Aperta Adatta ai principianti
  • Qualcosa non va?
#1,518 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
84/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
typescript, web-dev
Ambito
accessibility, frontend

Direzione di ricerca

La issue rimanda a icon.tsx su main; inizia leggendo come vengono renderizzati role e gli attributi ARIA dell’host. Controlla se esistono già test di accessibilità, poi verifica che un’icona senza aria-label né aria-labelledby sia nascosta alle tecnologie assistive, mentre un’icona con etichetta rimanga un’immagine. La issue non indica alcun file di test, quindi individua il test pertinente prima di eseguirlo.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

triage

Current behaviour

ion-icon always renders role="img" on its host. When no aria-label is given, which is the usual
case for an icon next to text, screen readers meet an image with no name. axe reports this as
role-img-alt. One app we scanned had 54 of these across three pages.

Apps can add aria-hidden="true" to each decorative icon, but that is easy to miss, and the default is
the inaccessible case.

Steps to reproduce

  1. Add <ion-icon name="logo-github"></ion-icon> to a page, with no aria-label.
  2. Inspect the accessibility tree: the icon is an image with no name.
  3. Or run axe's role-img-alt rule.

Seen with ionicons 8.0.13. icon.tsx on main renders role="img" on the host the same way.

Expected behaviour

An ion-icon with no aria-label or aria-labelledby is hidden from assistive technology, as Angular
Material's mat-icon does by default.

Possible fix

Set aria-hidden="true" on the host when neither aria-label nor aria-labelledby is present, and
leave role="img" for labelled icons.

Related: #710 and #838 (closed), about labels being forced.

Happy to open a PR for this if you'd like one.

Lingua principale
TypeScript
Stelle
18.2k
Fork
2k
Nessuna PR unita negli ultimi 30g

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di ionic-team/ionicons

Tutte le issue di ionic-team/ionicons

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.