Summary of the bug
When tabs are slotted into a dialog component, you can tab forwards fine through all the focusable elements but if you try pressing Shift + Tab to move focus backwards, the focus gets stuck on the tabs.
Also if you change the selected tab, the first tab stays focusable but it shouldn't be anymore (only the selected tab should be focusable).
The same issue happens on the drawer component. See "Additional information" section below.
🪜 How to reproduce
- Go to this StackBlitz and open the dialog.
- Try tabbing forward - all works fine, but if you tab backwards (Shift + Tab), the focus gets stuck on the tabs.
Also:
- Change the selected tab.
- Try tabbing through the focusable elements and see that the first tab remains focusable.
🖥 📱 Device
🧐 Expected behaviour
Shift + Tab should make the focus cycle backwards through all focusable elements on the dialog and not get stuck on the tabs. And only the selected tab should be focusable.
Additional info
The Shift + Tab issue only seems to happen if the first tab is selected.
The drawer uses the same focus trap functionality as the dialog - i.e. if you need to make a change to the helper functions the dialog uses, make exactly the same change in the canary helpers.ts file, because the code for these functions is identical.
Please uncomment the second half of the drawer Cypress test "should focus interactive content and trap focus - tabs" when this issue has been fixed.
Summary of the bug
When tabs are slotted into a dialog component, you can tab forwards fine through all the focusable elements but if you try pressing Shift + Tab to move focus backwards, the focus gets stuck on the tabs.
Also if you change the selected tab, the first tab stays focusable but it shouldn't be anymore (only the selected tab should be focusable).
The same issue happens on the drawer component. See "Additional information" section below.
🪜 How to reproduce
Also:
🖥 📱 Device
🧐 Expected behaviour
Shift + Tab should make the focus cycle backwards through all focusable elements on the dialog and not get stuck on the tabs. And only the selected tab should be focusable.
Additional info
The Shift + Tab issue only seems to happen if the first tab is selected.
The drawer uses the same focus trap functionality as the dialog - i.e. if you need to make a change to the helper functions the dialog uses, make exactly the same change in the canary helpers.ts file, because the code for these functions is identical.
Please uncomment the second half of the drawer Cypress test "should focus interactive content and trap focus - tabs" when this issue has been fixed.