react-component / react-component/tree-select
Screen reader announces 'value' prop instead of 'title' or 'aria-label' prop
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 312
- Forks
- 204
- Avg merge
- 37m
- Merged PRs (30d)
- 1
Description
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.
Contributor guide
No contributing guide indexed for this repository
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.
Research direction
Start at src/OptionList.tsx around lines 213-215, where the aria-live announcement currently uses the active node value. Check the existing OptionList tests, then ensure announcements prioritize aria-label, string title, and finally value; verify the relevant test suite covers each fallback.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 48/100