Prerequisites
Ionic Framework Version
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
- Render
<ion-searchbar aria-label="Search family members" placeholder="Search family members"></ion-searchbar>.
- Inspect the rendered
input.searchbar-input, or focus it with VoiceOver / NVDA.
- 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".
Prerequisites
Ionic Framework Version
Current Behavior
The native
<input>rendered byion-searchbaralways carriesaria-label="search text":https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/searchbar/searchbar.tsx#L690
and the component inherits only
langanddirfrom the host:https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/searchbar/searchbar.tsx#L285
So an
aria-label(oraria-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-inputandion-textareaalready forwardaria-labelfrom the host to the native control, soion-searchbaris the odd one out.Expected Behavior
ion-searchbarforwardsaria-label/aria-labelledbyfrom the host to its<input>, the wayion-inputdoes, keeping "search text" as the fallback when the host sets neither.Steps to Reproduce
<ion-searchbar aria-label="Search family members" placeholder="Search family members"></ion-searchbar>.input.searchbar-input, or focus it with VoiceOver / NVDA.aria-labelis 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-searchbarthat, after render, copies the hostplaceholderontoinput.searchbar-inputasaria-label. I would be glad to open a PR that addsaria-label/aria-labelledbyto the inherited attributes and passes them to the input, falling back to "search text".