- I have searched the issues of this repository and believe that this is not a duplicate.
Reproduction link
Steps to reproduce
- Please open the link https://4y7bi.csb.app/
- click on dropdown input field.
- once the selection window opens from the dropdown please run the "Accessibility DevTools"( https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US ) chrome extension from chrome debugger tools to get the accessibility issue - ARIA input fields must have an accessible name
What is expected?
Label should be mapped with ARIA-labelledby for the dropdown
for example:
First name:
What is actually happening?
we are not able to map the "aria-labelledby" with explicit label for the dropdown
Environment | Info |
---|---|
antd | 4.16.0 |
React | 16.12.0 |
System | Windows 10 |
Browser | Chrome Version 92.0.4515.131 (Official Build) (64-bit) |
2条答案
按热度按时间rwqw0loc1#
I think this issue is caused by the Input components which is in the select project( https://github.com/react-component/select )
The reason is the lack of the init value of
aria-expanded
in the Input component. As the image show when theopen
attribute is undefined thearia-expanded
will have an invalid value which will cause thearia-expanded
attribute didn't work. This issue only happened at the init when you click theSelect
component thearia-expanded
will show correctly.The work around here is set the
defaultOpen
option to theselect
component. But when this component is used in antd other components like thePagination
component this issue will occur too. So eventually we need this issue to be fixed in the future. I can create a pr if need. Can anybody add me to the contributor so I can create a pr for this issue? @afc163qyzbxkaa2#
I have this issue as well.
I made a different work-around I figured I'd post in case anyone else wanted to use it.
This component just wraps the antd
Select
with some state to keep track of when the aria should be expanded or not to solve for the initialization issue.