Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Manage focus for HUD components #11985

Merged

Conversation

gcamacho079
Copy link
Contributor

Description

Implements focus management for HUD menus.

Adds a couple new functions to Garnish for getting keyboard-focusable elements, versus elements that are programmatically-focusable. In the widget settings HUD, there's an object element with tabindex="-1" that gets returned with the :focusable selector, but doesn't receive keyboard focus. These functions help bypass the issue when tabbing from the last element in the HUD and the next element in the focus order after the trigger.

Related issues

@linear
Copy link

linear bot commented Sep 21, 2022

DEV-405 HUD menus are not in a logical focus order for keyboard interaction

Because HUD menus are moved to the end of the DOM and focus isn't managed in a way that moves keyboard focus into them when they are opened, keyboard users must tab through the rest of the DOM to reach their contents.

Also, when a user tabs out of them, they are at the end of the document instead of tabbing into the element next to the trigger button.

To solve:

  • HUD menus should be moved immediately after their trigger elements in the DOM (higher lift), or
  • On open, focus should be moved into the HUD menu and focus should be trapped inside for the duration of its being open (lower lift)

This affects the:

  1. Dashboard 'Widget settings' HUD (/admin/dashboard)
  2. Export elements HUD (/admin/entries, /admin/categories, /admin/assets)

@gcamacho079 gcamacho079 added the accessibility 👤 features related to accessibility label Sep 21, 2022
…l-focus

# Conflicts:
#	src/web/assets/garnish/dist/garnish.js
#	src/web/assets/garnish/dist/garnish.js.map
#	src/web/assets/pluginstore/dist/css/app.css

[ci skip]
[ci skip]
@brandonkelly brandonkelly merged commit 716956f into 4.3 Oct 4, 2022
@brandonkelly brandonkelly deleted the feature/dev-405-hud-menus-are-not-in-a-logical-focus branch October 4, 2022 10:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
accessibility 👤 features related to accessibility
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants