Skip to content

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

Description

@tzdevelopteam

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

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions