Keyboard Navigation Tab Order: Tab Order on Studio Channel Page Focuses on Hidden Items #3786
Description
Observed behavior
When tabbing through the channel page, the focus changes to elements in the side menu, but unless the user has the menu open, the focus is on items that the user cannot see. The attached screen record shows the focused elements when pressing tab and how there are no focused elements in view until the green checkmark is focused.
Channel.page.tab.recording.mov
This screenshot displays the current tab order using chrome extension taba11y
Expected behavior
Consistent tab focus on elements the user can see and no focus on hidden elements.
User-facing consequences
Accessibility issue for users that are visually impaired or unable to use a mouse and rely on consistent keyboard navigation.
Steps to reproduce the issue
- Log in to Studio
- On the channels page, with menu closed, press tab to see the order in which elements are focused
- On the channels page, with menu open, press tab to see the order in which elements are focused
Usage Details
- OS: M1 Mac
- Browser: Chrome
- URL: https://studio.learningequality.org/en/channels/#/my-channels