Axe accessibility issue with Button inside latest Antd 4.x Collapse when a Button is present

[abhishekahuja87]

• [ ] I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

Steps to reproduce

I see accessibility issue when using Axe accessibility chrome plugin on my App which has Collapse from Antd 4.x

Issue: Nested interactive controls are not announced by screen readers

Reason: Since there is a button in the accordion

If I remove the button, the above accessibility is solved. But I would like to have the button

I also tried to replace by like

<span tabIndex="0"><Icon/></span> 

but even this way the accessibility issue persists. But if I remove the 'tabIndex="0"', it works fine.

What is the way to put items in the Accordion which are also accessible via keyboard(hence tabIndex=0).

TIA

What is expected?

No Accessibility issue

What is actually happening?

The issue is seen with Axe tool

Environment	Info
antd	4.16.5
React	Latest
System	Any
Browser	Any

[afc163]

https://github.com/ant-design/ant-design/issues/31123#issuecomment-868283380

[abhishekahuja87]

Even if I apply collapsible="header" on , I get the Accessibility issue. please suggest. Also I would like to specify header as well as the arrow button as trigger point. How to achieve that

[afc163]

@abgaryanharutyun wait for https://github.com/react-component/collapse/pull/215

[abhishekahuja87]

Hi, Thanks, When can I expect the above mentioned fix?

• Also, I still see the issue even if I add collapsible="header to , pleasse help