Try: Make gallery keyboardable #11205
Conversation
The intent of this PR is to fix #3836, but for now this is just the barebones initial work. I would like your thoughts on the best approach to take before I optimize too far in one direction. As such, this PR does the bare minimum to get tabbing working for the gallery, and then we can go from there. For example, this PR simply adds a `tabIndex="0"` and an `onKeyDown` handler to the image, to make it accessible. It might be a better solution to wrap the image itself in a button, but this might regress editor styles. Perhaps this approach is necessary as an intermediate step towards better solutions? Your thoughts are most welcome.
mtias
added
the
[Focus] Accessibility (a11y)
| @@ -102,7 +102,7 @@ class GalleryImage extends Component { | |||
| // Disable reason: Image itself is not meant to be | |||
| // interactive, but should direct image selection and unfocus caption fields | |||
| // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events | |||
There was a problem hiding this comment.
| // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events | |
| // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions |
|
I'm moving this out of 4.2 for now until it gets properly review a11y wise. |
|
@youknowriad let's not use 5.0 milestone for PRs as it gets harder to track them. We should always schedule PRs for plugin milestones, which is when they will land first. |
There was a problem hiding this comment.
Just tested this locally and it's much better for keyboard accessibility, though it should be noted the actual labelling of these elements for screen readers is still quite bad. See:
It might be good to have an aria-label or something on images with no alt attributes… but even then it might be nice to preface it with "image 2 of 3: $alt"
That's fine for a future issue though; this issue is about keyboard accessibility and this is way better than master 👍
|
I tried testing |
|
@designsimply Odd, it worked for me when I checked it out. From master, to test this you should try: git checkout master
git pull origin master
git branch -D try/keyboardable-gallery
git fetch origin
git checkout -b try/keyboardable-gallery origin/try/keyboardable-galleryThat should definitely cover it 😄 |
|
Thank you for the tips! Super helpful. I tried them out and tested from Chrome 70.0.3538.77 and also again on Firefox 63.0 on macOS 10.13.6. Turns out! It works in Chrome and not in Firefox. 🙃 |
|
Darn, it worked in Firefox (where I tested it) for me on MacOS and Windows 10 with NVDA.
|
|
Based on the past few comments, I'm unsure exactly how to proceed. Do I merge and create an issue for better labelling? Or was there a Firefox issue? |
|
I’ll test again today. Any chance you could test in Firefox for more data points here? |
|
Sure of course, sorry. It's working completely identically for me in Firefox, as to how it is in Chrome. |
|
What's with the sorry; I'm the Canadian! 😉 I tested again and this is working fine for me in Firefox. I'm gonna go with weird caching or something and say we |
I couldn't reproduce it not working in Firefox 😞
|
Cool. Shipping this as an improvement, and opened #11396 as a future improvement. |
mtias
added
the
[Block] Gallery
The intent of this PR is to fix #3836, but for now this is just the barebones initial work.
I would like your thoughts on the best approach to take before I optimize too far in one direction. As such, this PR does the bare minimum to get tabbing working for the gallery, and then we can go from there. For example, this PR simply adds a
tabIndex="0"and anonKeyDownhandler to the image, to make it accessible. It might be a better solution to wrap the image itself in a button, but this might regress editor styles. Perhaps this approach is necessary as an intermediate step towards better solutions?Your thoughts are most welcome.