Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

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

Aperta Adatta ai principianti
  • Qualcosa non va?
#31,492 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

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
Ambito
accessibility, frontend

Direzione di ricerca

Inizia in core/src/components/searchbar/searchbar.tsx, nel codice degli attributi ereditati intorno alla riga 285, e nell’input nativo intorno alla riga 690. Confronta la gestione esistente di aria-label in ion-input e ion-textarea, quindi verifica la riproduzione con aria-label e aria-labelledby. È completato quando l’input nativo riceve quegli attributi dell’host e continua a usare "search text" quando non viene fornito nessuno dei due.

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

Descrizione

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".

Lingua principale
TypeScript
Stelle
52.7k
Fork
13.3k
Merge medio
2g 20h
PR unite (30g)
52

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

Tutte le issue di ionic-team/ionic-framework

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.