Keyboard navigation unreachable dashboard sections

[filiptronicek]

Bug description

In the dashboard, there are many sections and individual components currently not accessible by sequential keyboard navigation. This means it's hard and sometimes impossible for users using screen readers to interface with Gitpod beyond creating a workspace.

Affected components

• OrganizationSelector (when closed, while it is open, it's inner options are focusable)
• the feedback button in the menu
• UserMenu
• Regenerate & Delete context menu items on the Access tokens page
• <ContextMenu>
• Workspace list caret for expanding to include inactive workspaces
• <Dropdown>
• A <Modal>'s close button - see Accessibility improvements on the New Workspace modal #15809
• The Copy button inside of an <InputWithCopy>

Components with double-focus

In some places, a user has to double-click Tab to go over a component. This happens most often on buttons which are also links.

Examples include:

• The /projects Invite Members button
• The New access token button on /user/tokens
• View Usage inside of /user/billing

Related issues

• A sister issue to Missing focus indicators for dashboard #16723

Further reading

• https://developer.mozilla.org/en-US/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets
• https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex

[gtsiolis]

Thanks for collecting these issues, opening this, and using the aspect: accessibility label, @filiptronicek!

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.