bug: ion-searchbar input is always labelled "search text"; aria-label on the host is not forwarded
Maintainer antworten meist innerhalb von 1 Tag
Dieses Issue hat noch niemand übernommen.
Bewertung
- Schwierigkeit
- 2/5
- Geschätzter Aufwand
- 1-3 Stunden
- Anfängerfreundlichkeit
- 84/100
- Issue-Typ
- Bug
- Klarheit
- Klar beschrieben
- Aktivitätsstatus
- Aktiv
- Tech-Stack
- typescript
- Bereich
- accessibility, frontend
Rechercherichtung
Beginne in core/src/components/searchbar/searchbar.tsx beim Code für geerbte Attribute ungefähr in Zeile 285 und beim nativen Input ungefähr in Zeile 690. Vergleiche die bestehende Behandlung von aria-label in ion-input und ion-textarea und überprüfe anschließend die Reproduktion mit aria-label und aria-labelledby. Als abgeschlossen gilt die Aufgabe, wenn der native Input diese Host-Attribute erhält und weiterhin "search text" verwendet, wenn keines von beiden angegeben ist.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Beschreibung
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":
and the component inherits only lang and dir from the host:
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-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-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".
- Vorherrschende Sprache
- TypeScript
- Sterne
- 52.7k
- Forks
- 13.3k
- Ø Merge
- 2 T. 14 Std.
- Gemergte PRs (30 T.)
- 43
Entwicklungsumgebung
Erste Schritte
- Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
- Forken Sie das Repository und arbeiten Sie in einem Branch.
- Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.
Mehr aus ionic-team/ionic-framework
-
triage
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 72/100
ionic-team/ionic-framework#31410 · 1 Kommentar ·
Maintainer antworten meist innerhalb von 1 Tag
-
triage
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 72/100
ionic-team/ionic-framework#31314 ·
Maintainer antworten meist innerhalb von 1 Tag
-
triage
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 86/100
ionic-team/ionic-framework#31291 ·
Maintainer antworten meist innerhalb von 1 Tag
-
triage
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 70/100
ionic-team/ionic-framework#30738 ·
Maintainer antworten meist innerhalb von 1 Tag
-
package: core type: bug
Schwierigkeit 1/5 Unter einer Stunde Anfängerfreundlichkeit 72/100
ionic-team/ionic-framework#29864 · 1 Kommentar ·
Maintainer antworten meist innerhalb von 1 Tag
Alle Issues in ionic-team/ionic-framework
Ähnliche Issues
-
triage
Schwierigkeit 1/5 Unter einer Stunde Anfängerfreundlichkeit 90/100
Maintainer antworten meist innerhalb von 1 Tag
-
bug
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 68/100
mermaid-js/mermaid-live-editor#2053 ·
Maintainer antworten meist innerhalb von 1 Tag
-
factory
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 82/100
jessepollak/home#1455 ·
Maintainer antworten meist innerhalb von 1 Tag
-
community first-timers-only good first issue hacktoberfest help wanted low hanging fruit up-for-grabs
Schwierigkeit 1/5 Unter einer Stunde Anfängerfreundlichkeit 95/100
lingdojo/kana-dojo#31227 · 1 Kommentar · 5 Reaktionen ·
Maintainer antworten meist innerhalb von 1 Tag
-
mobile: device viewer shows dark status bar icons on its dark backdrop in light mode (Android)Offen
Schwierigkeit 1/5 Unter einer Stunde Anfängerfreundlichkeit 92/100
appandflow/stim#1838 ·
Maintainer antworten meist innerhalb von 1 Tag