Closed
Description
Prerequisites
- I am using the correct version of React-Bootstrap for my version of Bootstrap
- I have searched for duplicate or closed issues
- I have read the contributing guidelines
Describe the bug
The aria-controls attribute helps to establish a relationship between a control (such as a button or a header) and the element it controls (such as a collapsible panel or a tab panel). Currently if aria-controls is passed to the AccordionHeader subcomponent the attribute is added to the h2 and there is no way to move this attribute to the button. (Accessible example)
Expected behavior
The AccordionHeader subcomponent should support the aria-controls property and apply it to the button instead of the h2 so that screen reader users can better understand the relationship between the AccordionHeader and the AccordionBody
To Reproduce
- Given a
AccordionHeaderandAccordionBody - Add an
idto theAccordionBodyid='accordion-body' - Add
aria-controls='accordion-body'to theAccordionHeader - Render the component
- Inspect the DOM to see that
aria-controls='accordion-body'is incorrectly applied to theh2element and not thebutton
Reproducible Example
Screenshots
No response
What operating system(s) are you seeing the problem on?
Windows
What browser(s) are you seeing the problem on?
Chrome, Firefox
What version of React-Bootstrap are you using?
2.7.2
What version of Bootstrap are you using?
5.3.0
Additional context
No response