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

Conversation

@nosolosw
Copy link
Member

commented May 9, 2019

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.

nosolosw added some commits May 9, 2019

Structural changes
- 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.
Make button and caption part of the tab path
We can't use the isSelected property to conditionally render them,
otherwise they won't be tabbed through when tabbing backwards.
We can actually disable the button depending on isSelected status
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.
@nosolosw

This comment has been minimized.

Copy link
Member Author

commented May 9, 2019

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.

@jasmussen
Copy link
Contributor

left a comment

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.

@youknowriad
Copy link
Contributor

left a comment

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

@nosolosw nosolosw merged commit 8195c74 into master May 10, 2019

1 check passed

Travis CI - Pull Request Build Passed
Details

@nosolosw nosolosw deleted the fix/gallery-tab-order branch May 10, 2019

@youknowriad youknowriad added this to the 5.7 (Gutenberg) milestone May 10, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.