You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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 the aria-label prop is not provided, the title prop 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 an aria-label prop nor a suitable title prop (of string type) is provided, the value prop 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.
#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.
#426 - This PR attempted to solve this issue but was closed without being merged.
The text was updated successfully, but these errors were encountered:
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'svalue
prop is announced instead of either thetitle
oraria-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-label
prop is not provided, thetitle
prop 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-label
prop nor a suitabletitle
prop (of string type) is provided, thevalue
prop should be announced.Suspected Cause:
The span element within the dropdown in OptionList.tsx, which has
aria-live="assertive"
applied, seems to always announce thevalue
of the active node, even when anaria-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 [email protected])
#413 - This open PR proposes a
labelInAriaLive
boolean prop, which if true would announce thetitle
prop instead of thevalue
prop. Although this does not account for anaria-label
prop being set on the node, which should be prioritized by the screenreader first.#426 - This PR attempted to solve this issue but was closed without being merged.
The text was updated successfully, but these errors were encountered: