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

Abierto Apto para principiantes
  • ¿Algo no está bien?
#1,518 1 comentario 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
84/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
typescript, web-dev
Área
accessibility, frontend

Línea de trabajo

El issue apunta a icon.tsx en main; empieza leyendo cómo se renderizan role y los atributos ARIA del host. Comprueba si ya existen pruebas de accesibilidad y, después, verifica que un icono sin aria-label ni aria-labelledby quede oculto para las tecnologías de asistencia, mientras que un icono con etiqueta siga siendo una imagen. El issue no indica ningún archivo de pruebas, así que localiza la prueba pertinente antes de ejecutarla.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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.

Lenguaje dominante
TypeScript
Estrellas
18.2k
Forks
2k
Sin PR fusionados en 30 d

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de ionic-team/ionicons

Todos los issues de ionic-team/ionicons

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.