Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

bug: ion-searchbar input is always labelled "search text"; aria-label on the host is not forwarded

Abierto Apto para principiantes
  • ¿Algo no está bien?
#31,492 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

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
Área
accessibility, frontend

Línea de trabajo

Comienza en core/src/components/searchbar/searchbar.tsx, en el código de atributos heredados alrededor de la línea 285, y en el input nativo alrededor de la línea 690. Compara el manejo existente de aria-label en ion-input e ion-textarea y, después, verifica la reproducción con aria-label y aria-labelledby. Se considera terminado cuando el input nativo recibe esos atributos del host y sigue usando "search text" cuando no se proporciona ninguno de los dos.

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

Descripción

triage
Prerequisites
  • I have read the Contributing Guidelines.
  • I agree to follow the Code of Conduct.
  • I have searched for existing issues that already report this problem, without success.
Ionic Framework Version
  • v8.x / v9.x (reproduced on 9.0.3)
Current Behavior

The native <input> rendered by ion-searchbar always carries aria-label="search text":

https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/searchbar/searchbar.tsx#L690

and the component inherits only lang and dir from the host:

https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/searchbar/searchbar.tsx#L285

So an aria-label (or aria-labelledby) placed on <ion-searchbar> never reaches the input. A screen reader announces every searchbar as "search text, search field" — in English, whatever the app language, and without saying what the field searches (members, chats, messages, places…). ion-input and ion-textarea already forward aria-label from the host to the native control, so ion-searchbar is the odd one out.

Expected Behavior

ion-searchbar forwards aria-label / aria-labelledby from the host to its <input>, the way ion-input does, keeping "search text" as the fallback when the host sets neither.

Steps to Reproduce
  1. Render <ion-searchbar aria-label="Search family members" placeholder="Search family members"></ion-searchbar>.
  2. Inspect the rendered input.searchbar-input, or focus it with VoiceOver / NVDA.
  3. The input's accessible name is "search text"; the host's aria-label is ignored.
Code Reproduction URL

The three-line snippet above reproduces it in any Ionic app; the behaviour follows directly from the two source lines linked. Happy to add a StackBlitz if that helps triage.

Ionic Info

Ionic Framework 9.0.3, Angular 22 (standalone), Capacitor 8. Observed with iOS 18 VoiceOver and Chrome 140 + NVDA.

Additional Information

Our workaround is an Angular directive on ion-searchbar that, after render, copies the host placeholder onto input.searchbar-input as aria-label. I would be glad to open a PR that adds aria-label / aria-labelledby to the inherited attributes and passes them to the input, falling back to "search text".

Lenguaje dominante
TypeScript
Estrellas
52.7k
Forks
13.3k
Merge medio
2 d 14 h
PR fusionados (30 d)
43

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/ionic-framework

Todos los issues de ionic-team/ionic-framework

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.