ionic-team / ionic-team/ionic-framework

feat: improved `aria-label` for the searchbar's clear button, or a way for consuming apps to customize this value

未关闭 适合新手
#29,116 2 条评论 2 个 reaction 已指派 0 人 在 GitHub 查看
package: core type: bug
主要语言
TypeScript
星标
52.7k
派生
13.3k
平均合并
1 天 15 小时
30 天内合并 PR
51

描述

### Prerequisites

- [X] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#creating-an-issue).
- [X] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [X] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/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](https://github.com/ionic-team/ionic-framework/blob/5a5f330705f77a8971119fad448101a5504d8e5e/core/src/components/searchbar/searchbar.tsx#L636)), 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:

1. Add a prop so that consuming applications can optionally pass their own `aria-label` for the searchbar's "clear button".
2. Update the existing `aria-label` ([here](https://github.com/ionic-team/ionic-framework/blob/5a5f330705f77a8971119fad448101a5504d8e5e/core/src/components/searchbar/searchbar.tsx#L636)) to be something more descriptive, like "clear search input".

Thank you!!

### Describe Alternatives

_No response_

### Related Code

_No response_

### Additional Information

_No response_

贡献指南

打开贡献指南

调研方向

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.

由索引模型根据 Issue 内容生成。

评估

技术栈
typescript
领域
accessibility, frontend
Issue 类型
功能
难度
2/5
预计耗时
1-3 小时
活跃度
冷清
描述清晰度
基本清楚
新手友好度
65/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。