ant-design Accessibility: ARIA input fields must have an accessible name – on ANTD multiselect dropdown

toiithl6  于 2022-10-23  发布在  其他
关注(0)|答案(2)|浏览(171)
  • I have searched the issues of this repository and believe that this is not a duplicate.

https://4y7bi.csb.app/

Steps to reproduce

  1. Please open the link https://4y7bi.csb.app/
  2. click on dropdown input field.
  3. 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

EnvironmentInfo
antd4.16.0
React16.12.0
SystemWindows 10
BrowserChrome Version 92.0.4515.131 (Official Build) (64-bit)
rwqw0loc

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 the open attribute is undefined the aria-expanded will have an invalid value which will cause the aria-expanded attribute didn't work. This issue only happened at the init when you click the Select component the aria-expanded will show correctly.

The work around here is set the defaultOpen option to the select component. But when this component is used in antd other components like the Pagination 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? @afc163

qyzbxkaa

qyzbxkaa2#

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.

const A11ySelect = ({ onClick = () => {}, ...rest }) => {
    const [isExpanded, setExpanded] = useState(false);
    return (
        <Select
            onClick={() => {
                setExpanded(!isExpanded);
                onClick();
            }}
            aria-expanded={isExpanded}
            {...rest}
        />
    );
};```

相关问题