Screen reader announces 'value' prop instead of 'title' or 'aria-label' prop
Chưa có ai nhận issue này.
Đánh giá
- Độ khó
- 2/5
- Thời gian dự kiến
- 1-3 giờ
- Mức phù hợp với người mới
- 48/100
- Loại issue
- Lỗi
- Độ rõ ràng
- Đặc tả rõ ràng
- Mức độ hoạt động
- Đình trệ
- Công nghệ
- react, typescript
- Lĩnh vực
- accessibility, frontend
Hướng nghiên cứu
Bắt đầu tại src/OptionList.tsx, khoảng dòng 213-215, nơi thông báo aria-live hiện đang sử dụng giá trị của node đang hoạt động. Kiểm tra các test OptionList hiện có, sau đó đảm bảo các thông báo ưu tiên aria-label, title kiểu string và cuối cùng là value; xác minh rằng test suite liên quan bao phủ từng fallback.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Mô tả
Problem:
The value prop of a tree node is often a numeric id, unique hash, or other non-human-readable identifier. Currently when navigating the Tree Select dropdown using a screen reader, each option's value prop is announced instead of either the title or aria-label prop. This makes it impossible for screen reader users to understand the options being presented.
Expected behavior:
I would suggest that the screen reader prioritize which prop to announce in the following order:
aria-label: If provided, this should be the primary prop announced by the screen reader. It is expected to contain the most accessible and human-readable description of the node.title: If thearia-labelprop is not provided, thetitleprop should be announced since this is the actual content displayed in the dropdown. However, as the 'title' prop can be either a string or a React element, the screen reader should only announce it if it is of type string.value: If neither anaria-labelprop nor a suitabletitleprop (of string type) is provided, thevalueprop should be announced.
Suspected Cause:
The span element within the dropdown in OptionList.tsx, which has aria-live="assertive" applied, seems to always announce the value of the active node, even when an aria-label is present. This should be modified to instead announce the human-readable props according to the order above.
https://github.com/react-component/tree-select/blob/master/src/OptionList.tsx#L213-L215
Related issues/PRs:
ant-design/ant-design#40055 - Existing Ant Design issue related to this problem.
ant-design/ant-design#41978 - Allows aria-label prop to be passed into rc-tree-select (released in antd@5.4.6)
react-component/tree-select#413 - This open PR proposes a labelInAriaLive boolean prop, which if true would announce the title prop instead of the value prop. Although this does not account for an aria-label prop being set on the node, which should be prioritized by the screenreader first.
react-component/tree-select#426 - This PR attempted to solve this issue but was closed without being merged.
- Ngôn ngữ chính
- TypeScript
- Star
- 312
- Fork
- 204
- Merge trung bình
- 37 phút
- Pull request đã merge (30 ngày)
- 1
Hướng dẫn đóng góp
Chưa lập chỉ mục được hướng dẫn đóng góp cho kho mã nguồn này
Bắt đầu từ đâu
- Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
- Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
- Fork repository và làm thay đổi trên một nhánh.
- Mở pull request có tham chiếu số hiệu của issue.
Issue khác của react-component/tree-select
-
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 52/100
react-component/tree-select#652 ·
-
treeTitleRender 回显时函数中的targetItem中只有value属性,只return targetItem.label时有效,return 拼接数据只能获取到value属性 Đang mở
Độ khó 3/5 1-2 ngày Mức phù hợp với người mới 45/100
react-component/tree-select#528 ·
-
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 35/100
react-component/tree-select#485 ·
-
Độ khó 4/5 3-5 ngày Mức phù hợp với người mới 28/100
react-component/tree-select#466 ·
-
DFS这里是否能调整为尾递归 Đang mở
Độ khó 3/5 1-2 ngày Mức phù hợp với người mới 35/100
react-component/tree-select#454 ·
Tất cả issue của react-component/tree-select
Issue tương tự
-
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 84/100
bcgov/bc-wallet-mobile#4761 · 1 bình luận ·
-
external-issue to-triage
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 88/100
-
area-deployment area-integrations triage:bot-seen
Độ khó 2/5 Nửa ngày Mức phù hợp với người mới 86/100
-
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 82/100
-
refactor
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 84/100