Keyboard Navigation Tab Order: Tab Order on Studio Channel Page Focuses on Hidden Items

[LianaHarris360]

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

1. Log in to Studio
2. On the channels page, with menu closed, press tab to see the order in which elements are focused
3. 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