ion-icon without a label is exposed as an image with no name
Personne n'a encore pris cette issue.
Évaluation
- Difficulté
- 2/5
- Temps estimé
- 1-3 heures
- Accessibilité débutants
- 84/100
- Type d'issue
- Bug
- Clarté
- Clairement spécifiée
- Activité
- Active
- Stack technique
- typescript, web-dev
- Domaine
- accessibility, frontend
Piste de recherche
L’issue renvoie à icon.tsx sur main ; commence par lire comment role et les attributs ARIA de l’hôte sont rendus. Vérifie s’il existe déjà des tests d’accessibilité, puis vérifie qu’une icône sans aria-label ni aria-labelledby est masquée aux technologies d’assistance, tandis qu’une icône avec un libellé reste une image. L’issue n’indique aucun fichier de test ; localise donc le test pertinent avant de l’exécuter.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Description
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
- Add
<ion-icon name="logo-github"></ion-icon>to a page, with noaria-label. - Inspect the accessibility tree: the icon is an image with no name.
- Or run axe's
role-img-altrule.
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.
- Langage dominant
- TypeScript
- Étoiles
- 18.2k
- Forks
- 2k
- Métriques de merge des PR
- Aucune PR mergée en 30 j
Préparer son environnement
- Aucun Dockerfile ni fichier Docker Compose
- Aucun modèle de pull request
- Lire le guide de contribution
Par où commencer
- Lisez l'issue en entier, puis le guide de contribution du projet.
- Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
- Forkez le dépôt et travaillez sur une branche.
- Ouvrez une pull request qui référence le numéro de l'issue.
Autres issues de ionic-team/ionicons
-
icon request: Easy AI logoOuvertetriage
Difficulté 2/5 1-3 heures Accessibilité débutants 67/100
ionic-team/ionicons#1520 ·
-
triage
Difficulté 2/5 1-3 heures Accessibilité débutants 73/100
ionic-team/ionicons#1519 ·
-
icon request: PillOuvertetriage
Difficulté 2/5 1-3 heures Accessibilité débutants 68/100
ionic-team/ionicons#1516 ·
-
bug: Invalid @supports syntax in icon.css breaks under strict CSS parsers (e.g. Lightning CSS)Peut-être pris @johnjenkins l’a pris il y a 74 jours. Ouvertetriage
Difficulté 1/5 Moins d'une heure Accessibilité débutants 92/100
ionic-team/ionicons#1513 ·
-
triage
Difficulté 2/5 1-3 heures Accessibilité débutants 68/100
ionic-team/ionicons#1510 ·
Toutes les issues de ionic-team/ionicons
Issues similaires
-
Add: ESP 2 ROOuverteapproved check:passed streams:add
Difficulté 2/5 1-3 heures Accessibilité débutants 66/100
Les mainteneurs répondent en général sous 1 jour
-
Difficulté 2/5 1-3 heures Accessibilité débutants 68/100
Les mainteneurs répondent en général sous 1 jour
-
ipaas: Configure form shows "Deploy to apply." and "Overrides selected Link" when they don't applyOuverte
Difficulté 2/5 1-3 heures Accessibilité débutants 67/100
wso2/integration-control-plane#1118 ·
Les mainteneurs répondent en général sous 1 jour
-
File reporting form UI DesignOuverte
Difficulté 2/5 1-3 heures Accessibilité débutants 68/100
UTDNebula/utd-notebook#311 ·
Les mainteneurs répondent en général sous 2 jours
-
Difficulté 2/5 1-3 heures Accessibilité débutants 78/100
Les mainteneurs répondent en général sous 1 jour