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

Offen Anfängerfreundlich
  • Stimmt etwas nicht?
#1,518 1 Kommentar 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
2/5
Geschätzter Aufwand
1-3 Stunden
Anfängerfreundlichkeit
84/100
Issue-Typ
Bug
Klarheit
Klar beschrieben
Aktivitätsstatus
Aktiv
Tech-Stack
typescript, web-dev
Bereich
accessibility, frontend

Rechercherichtung

Das Issue verweist auf icon.tsx auf main; lies zunächst nach, wie role und ARIA-Attribute des Hosts gerendert werden. Prüfe, ob es bereits Accessibility-Tests gibt, und verifiziere anschließend, dass ein Icon ohne aria-label oder aria-labelledby für assistive Technologien verborgen ist, während ein beschriftetes Icon ein Bild bleibt. Das Issue nennt keine Testdatei; suche daher den relevanten Test, bevor du ihn ausführst.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

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.

Vorherrschende Sprache
TypeScript
Sterne
18.2k
Forks
2k
Keine gemergten PRs in 30 T.

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus ionic-team/ionicons

Alle Issues in ionic-team/ionicons

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.