feat: improved `aria-label` for the searchbar's clear button, or a way for consuming apps to customize this value
Nobody has claimed this yet.
Assessment
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Newbie friendliness
- 65/100
- Issue type
- Feature
- Clarity
- Mostly clear
- Activity status
- Quiet
- Tech stack
- typescript
- Domain
- accessibility, frontend
Research direction
Start in core/src/components/searchbar/searchbar.tsx at the clear button's aria-label. Decide whether the existing label should become more descriptive or whether consuming applications need a customization prop, then verify that the clear button exposes the intended accessible name.
Written by the indexing model from the issue text.
Description
Prerequisites
- I have read the Contributing Guidelines.
- I agree to follow the Code of Conduct.
- I have searched for existing issues that already include this feature request, without success.
Describe the Feature Request
The clear button on the ion-searchbar has an aria-label of "reset" (code here), which is not clear enough for screenreader users. The label should be more descriptive, perhaps “clear search input”.
Describe the Use Case
"Reset" may be unclear to screenreader users, and so the button's aria-label should be more descriptive.
Describe Preferred Solution
Two possible solutions:
- Add a prop so that consuming applications can optionally pass their own
aria-labelfor the searchbar's "clear button". - Update the existing
aria-label(here) to be something more descriptive, like "clear search input".
Thank you!!
Describe Alternatives
No response
Related Code
No response
Additional Information
No response
- Dominant language
- TypeScript
- Stars
- 52.7k
- Forks
- 13.3k
- Avg merge
- 2d 20h
- Merged PRs (30d)
- 35
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from ionic-team/ionic-framework
-
triage
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
ionic-team/ionic-framework#31410 · 1 comment ·
-
triage
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
ionic-team/ionic-framework#31314 ·
-
triage
Difficulty 2/5 1-3 hours Newbie friendliness 86/100
ionic-team/ionic-framework#31291 ·
-
triage
Difficulty 2/5 1-3 hours Newbie friendliness 70/100
ionic-team/ionic-framework#30738 ·
-
package: core type: bug
Difficulty 1/5 Under an hour Newbie friendliness 72/100
ionic-team/ionic-framework#29864 · 1 comment ·
All issues in ionic-team/ionic-framework
Similar issues
-
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
Eynzof/Hermes-CN-Desktop#610 ·
-
bug clawsweeper:linked-pr-open clawsweeper:needs-live-repro clawsweeper:no-new-fix-pr impact:message-loss issue-rating: 🐚 platinum hermit P2 regression
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
-
enhancement
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
-
calcite-components needs triage refactor
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
Esri/calcite-design-system#15203 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 90/100
danielmiessler/LifeOS#2218 ·