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

Gallery block: images selection and removal not keyboard accessible #3836

Closed
afercia opened this Issue Dec 6, 2017 · 6 comments

Comments

Projects
None yet
5 participants
@afercia
Contributor

afercia commented Dec 6, 2017

In the Gallery block, clicking on an image makes the "remove image" button appear:

screen shot 2017-12-06 at 21 26 10

However, when using only the keyboard, the images can't be selected nor the remove button appears (it's not rendered by default).

Any functionality should be operable also when using only the keyboard. Instead of making the images clickable, I'd recommend to use a separate control always rendered in the markup that becomes visible on focus. This control should be properly labeled and have some reference to the image that will be removed.

Aside: when an image is "visually selected", it can't be de-selected. I wonder if the selection is really necessary, as the only available action seems to be removing the images one by one.

@afercia

This comment has been minimized.

Contributor

afercia commented Dec 8, 2017

Reporting from #3790:

Worth noting the gallery block, when an image is selected, displays a "remove image" button that uses $blue-medium-500 as background and a white "X" as text: this contrast ratio is not sufficient and should be changed. I guess it would need some design feedback.

screen shot 2017-12-03 at 15 03 50

@afercia

This comment has been minimized.

Contributor

afercia commented Dec 10, 2017

An example of existing pattern in the Customizer;

screen shot 2017-12-10 at 12 04 37

@ZebulanStanphill

This comment has been minimized.

Contributor

ZebulanStanphill commented Jun 29, 2018

This is still an issue in master right now. I think this should be added to the Merge Proposal: Accessibility milestone.

@afercia afercia added the [Type] Bug label Jul 23, 2018

@bemdesign-er

This comment has been minimized.

bemdesign-er commented Jul 23, 2018

The gallery block needs a way for keyboard users to navigate between images inside the gallery block, a way to make selections of the images inside the gallery block (for mass delete), and a way to delete those selected images from the gallery block.

@afercia

This comment has been minimized.

Contributor

afercia commented Jul 23, 2018

Discussed during today's accessibility bug scrub. Yep, still an issue. Adding the "bug" label as the gallery block is still not usable with a keyboard.

@joedolson

This comment has been minimized.

joedolson commented Oct 16, 2018

Still an issue. From what I can tell, this requires that the images be made focusable. If the images are focused using the mouse, you can navigate the controls for them using the keyboard; but there's no apparent way to focus the images without a mouse.

@mtias mtias added this to the WordPress 5.0 milestone Oct 26, 2018

jasmussen added a commit that referenced this issue Oct 29, 2018

Try: Make gallery keyboardable
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.

jasmussen added a commit that referenced this issue Nov 2, 2018

Try: Make gallery keyboardable (#11205)
* Try: Make gallery keyboardable

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.

* Apply suggestion

antpb added a commit to antpb/gutenberg that referenced this issue Nov 5, 2018

Try: Make gallery keyboardable (WordPress#11205)
* Try: Make gallery keyboardable

The intent of this PR is to fix WordPress#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.

* Apply suggestion
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment