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

Fix gallery tab order #15540

Merged
merged 8 commits into from
May 10, 2019
Merged

Fix gallery tab order #15540

merged 8 commits into from
May 10, 2019

Conversation

oandregal
Copy link
Member

Fixes: #14814
Previous attempt: #14931

This PR fixes the keyboard tab order for navigating through gallery items:

Forward:

  • TAB to select the image.
  • TAB to select the remove button.
  • TAB to select the caption.
  • TAB to select the next image.

Backward:

  • SHIFT+TAB to select the previous image's caption.
  • SHIFT+TAB through the caption's toolbar.
  • SHIFT+TAB to select the remove button.
  • SHIFT+TAB to select the iimage.
  • SHIFT+TAB to select the previous image's caption.

There is a related issue #14823 for deselecting the image when it is the first/last after it losses focus. This will be fixed separately.

oandregal added 8 commits May 9, 2019 13:30
- Reorder: img goes first than the inline menu items
- Always render the inline menu items. We want to keep
  a consistent tabbable experience. We'll style them down
  when not in focus.
We can't use the isSelected property to conditionally render them,
otherwise they won't be tabbed through when tabbing backwards.
The GalleryImage gets selected by focusing on the caption (tabbing backwards)
and the <img> element (tabbing forwards). At that time,
the button is enabled, and will get the focus.
@oandregal oandregal self-assigned this May 9, 2019
@oandregal oandregal added [a11y] Keyboard & Focus [Block] Gallery Affects the Gallery Block - used to display groups of images [Type] Bug An existing feature does not function as intended Needs Accessibility Feedback Need input from accessibility labels May 9, 2019
@oandregal
Copy link
Member Author

Note that the caption's toolbar is part of the tab stops when tabbing backward but not forward. Making it work identical for both cases would require the caption's toolbar to always be visible for the selected GalleryImage, not only when the caption is selected.

Copy link
Contributor

@jasmussen jasmussen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep, perfect, thanks so much:

tab order

Code looks good to me too. But I would appreciate you get a sanity check on the code from someone else as well.

Copy link
Contributor

@youknowriad youknowriad left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are still inconsistencies related to the toolbar but this is a huge improvement over what we have.

@oandregal oandregal merged commit 8195c74 into master May 10, 2019
@oandregal oandregal deleted the fix/gallery-tab-order branch May 10, 2019 09:18
@youknowriad youknowriad added this to the 5.7 (Gutenberg) milestone May 10, 2019
@priethor priethor added the [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). label Jul 24, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Gallery Affects the Gallery Block - used to display groups of images [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). Needs Accessibility Feedback Need input from accessibility Needs Design Feedback Needs general design feedback. [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Block gallery: wrong tab order
4 participants