Reproduction link
https://ant.design/components/input#input-demo-allowclear
Steps to reproduce
- Focus input with
allowClear prop set to true
- Write something
- Press Tab
What is expected?
The clear button to be focused.
What is actually happening?
Next interactive element is focused.
| Environment |
Info |
| antd |
6.3.3 |
| React |
19 |
| System |
Windows 11 |
| Browser |
Google Chrome latest |
After adding tabIndex={-1} in this PR react-component/input#111 the clear button became inaccessible breaking WCAG success criterions 2.1.1 and 2.1.3, keyboard users cannot focus and operate this functionality and it produces inequality.
Instead of adding tabIndex={-1} it is better to add button outline that is reset here https://github.com/ant-design/ant-design/blob/master/components/input/style/index.ts#L407. In this case users can visually identify the focus state and it will be clear why second Tab is needed to move to other elements.
Reproduction link
https://ant.design/components/input#input-demo-allowclear
Steps to reproduce
allowClearprop set totrueWhat is expected?
The clear button to be focused.
What is actually happening?
Next interactive element is focused.
After adding
tabIndex={-1}in this PR react-component/input#111 the clear button became inaccessible breaking WCAG success criterions 2.1.1 and 2.1.3, keyboard users cannot focus and operate this functionality and it produces inequality.Instead of adding
tabIndex={-1}it is better to add button outline that is reset here https://github.com/ant-design/ant-design/blob/master/components/input/style/index.ts#L407. In this case users can visually identify the focus state and it will be clear why second Tab is needed to move to other elements.