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

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

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

Thanks for the report!

Verified on 9.0.9. ion-searchbar always sets aria-label="search text" on its inner <input> and only passes lang and dir down from the host. An aria-label or aria-labelledby on <ion-searchbar> is not lost, but it names the searchbar's role="search" landmark rather than the input, so the input keeps the fixed English name. The fixed label also takes priority over placeholder, which the browser would otherwise fall back to.

Workaround, verified on 9.0.9: set the label on the inner input once the searchbar has loaded. It stays in place as the user types and as other props change.

const searchbar = document.querySelector('ion-searchbar');
const input = await searchbar.getInputElement();
input.setAttribute('aria-label', 'Search family members');

Run the same setAttribute again when the app language changes. The directive described in the issue works for the same reason.

Tracked as a bug in core.

Navigation Menu

Repository navigation

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

Prerequisites

Ionic Framework Version

Current Behavior

Expected Behavior

Steps to Reproduce

Code Reproduction URL

Ionic Info

Additional Information

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Prerequisites

Ionic Framework Version

Current Behavior

Expected Behavior

Steps to Reproduce

Code Reproduction URL

Ionic Info

Additional Information

Activity

thetaPC commented on Oct 22, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions