-
Notifications
You must be signed in to change notification settings - Fork 7
Description
Describe the bug
-
A11y Error: The hardcoded tab-index value at the tabcontent level is causing accessibility issues because it is automatically taking focus when tabbing through the content. Focus delegation should occur at the child level. For example, when there is a list of buttons as children, the focus currently lands on the tabcontent itself on the first tab press, instead of on the first focusable element, which should be the first button.
-
State Error: The activeKey is not reactive to changes; it always takes the first value on component mount and only responds to clicks. You cannot change the activeKey from outside the component and have it activate the corresponding tab passed via props. The internal state causes the component to take a value only during initialization, and it can only be changed either by forcing a component unmount or through a click event. This behavior is problematic because, in order to achieve the desired functionality, we are forced to unmount the component, which results in losing the scroll position of the tabs, for example.
To Reproduce
Steps to reproduce the behavior:
A11y Error:
- Go to Tabs component
- Click on tab keyboard
- you can see that the content is focus
State Error:
- Go to Tabs component
- Change the activeKey in code
- you can see the selected tab not change
Expected behavior
A11y Error: The tab content should not have a hardcoded tabindex; instead, it should allow its children to control focus behavior.
State Error:We should be able to change the activeKey reactively without having to force a component unmount.
Screenshots
A11y Error:
-Code screenshot:
-Issue screenshot:
State Error:
Desktop (please complete the following information):
- OS: All
- Browser All
- Version All
Smartphone (please complete the following information):
- Device: All
- OS: All
- Browser All
- Version All
Additional context
Add any other context about the problem here.
git checkout release/1.1.0
git pull
git checkout -b 'fix/tabs-state-a11y'