bug: ion-searchbar input is always labelled "search text"; aria-label on the host is not forwarded
維護者通常 1 天內回覆
還沒有人認領這個 Issue。
評估
- 難度
- 2/5
- 預估耗時
- 1-3 小時
- 新手友好度
- 84/100
- Issue 類型
- 缺陷
- 描述清晰度
- 描述清楚
- 活躍度
- 活躍
- 技術堆疊
- typescript
研究方向
從 core/src/components/searchbar/searchbar.tsx 中第 285 行附近的繼承屬性程式碼，以及第 690 行附近的原生 input 開始。比較 ion-input 和 ion-textarea 中現有的 aria-label 處理方式，然後使用 aria-label 和 aria-labelledby 驗證重現。完成的標準是：原生 input 接收到這些 host 屬性，並且在兩者都未提供時仍使用 "search text"。
由索引模型根據 Issue 內容生成。
描述
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".
- 主要語言
- TypeScript
- 星號
- 52.7k
- 分支
- 13.3k
- 平均合併
- 3 天 5 小時
- 30 天內合併 PR
- 55
環境準備
從這裡開始
- 先讀完整個 Issue，再讀專案的貢獻指南。
- 在 Issue 下留言說明你要接手 —— 這能避免兩個人做同樣的事。
- Fork 儲存庫，在一個分支上完成修改。
- 送出 Pull Request，並在描述裡引用這個 Issue 編號。
ionic-team/ionic-framework 的其他 Issue
-
triage
難度 2/5 1-3 小時 新手友好度 72/100
ionic-team/ionic-framework#31410 · 1 則留言 ·
維護者通常 1 天內回覆
-
triage
難度 2/5 1-3 小時 新手友好度 72/100
ionic-team/ionic-framework#31314 ·
維護者通常 1 天內回覆
-
triage
難度 2/5 1-3 小時 新手友好度 86/100
ionic-team/ionic-framework#31291 ·
維護者通常 1 天內回覆
-
triage
難度 2/5 1-3 小時 新手友好度 70/100
ionic-team/ionic-framework#30738 ·
維護者通常 1 天內回覆
-
package: core type: bug
難度 1/5 1 小時以內 新手友好度 72/100
ionic-team/ionic-framework#29864 · 1 則留言 ·
維護者通常 1 天內回覆
查看 ionic-team/ionic-framework 的全部 Issue
相似的 Issue
-
Mend: dependency security vulnerability untriaged
難度 2/5 1-3 小時 新手友好度 68/100
opensearch-project/security-dashboards-plugin#2545 ·
維護者通常 1 天內回覆
-
Add: Dream TR SD未關閉check:passed streams:add
難度 2/5 1-3 小時 新手友好度 70/100
維護者通常 1 天內回覆
-
doctor integrity sample scans soft-deleted pages on Postgres (batch path has no deleted_at filter)未關閉
難度 2/5 1-3 小時 新手友好度 88/100
維護者通常 1 天內回覆
-
難度 1/5 1 小時以內 新手友好度 72/100
SocialGouv/egapro#4672 · 1 則留言 ·
維護者通常 2 天內回覆
-
area:agents area:tui bug
難度 2/5 1-3 小時 新手友好度 74/100
anthropics/claude-code#98358 ·
維護者通常 1 天內回覆