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

Block gallery: delete image with delete or backspace keys #14822

Merged
merged 3 commits into from
Apr 12, 2019

Conversation

oandregal
Copy link
Member

Fixes #14816

Peek 2019-04-04 16-51

@oandregal oandregal self-assigned this Apr 4, 2019
@oandregal oandregal added [Block] Gallery Affects the Gallery Block - used to display groups of images [Type] Bug An existing feature does not function as intended labels Apr 4, 2019
@oandregal oandregal added this to the 5.5 (Gutenberg) milestone Apr 4, 2019
@oandregal oandregal requested a review from gziolo April 5, 2019 08:12
@youknowriad youknowriad added the Needs Accessibility Feedback Need input from accessibility label Apr 11, 2019
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.

the code changes are good, but I'd like an accessibility check here.

@afercia
Copy link
Contributor

afercia commented Apr 11, 2019

I've quickly tested with various browser / screen reader combinations and the removal works. A bit surprisingly because I wasn't expecting onKeyDown to work on non-natively interactive elements when screen readers are not in "focus mode". We've already faced this issue in other components, @aduth might remember something about it.

Regardless, it works.

A pre-existing issue (triggered also when removing an image via the dedicated button) is that focus is not managed. When the selected image (currently focused element) gets removed, there's no focused element any longer so a focus loss happens.

Focus should be moved to the most logical place. Not sure what the best place is 🙂 Ideally:

  • to the previous image, if any
  • otherwise to the following image, if any
  • otherwise if it's the last image: to the block focusable container

I do realize this would be complicated so I'd be OK with always moving focus to the block focusable container: at least it would avoid a complete focus loss.

I also do realize it's not strictly related to this PR so it might be addressed separately but since we're here... 🙂

@afercia afercia added [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). and removed Needs Accessibility Feedback Need input from accessibility labels Apr 11, 2019
@aduth
Copy link
Member

aduth commented Apr 11, 2019

A bit surprisingly because I wasn't expecting onKeyDown to work on non-natively interactive elements when screen readers are not in "focus mode". We've already faced this issue in other components, @aduth might remember something about it.

If I'm recalling correctly, there was a specific impact of both the specific key pressed and the effective role of the element in how keyboard events were treated between focus and browse modes (#5595).

@afercia
Copy link
Contributor

afercia commented Apr 11, 2019

If I'm recalling correctly, there was a specific impact of both the specific key pressed and the effective role of the element in how keyboard events were treated between focus and browse modes

Yep, evidently it works on images (implicit role=img).

@oandregal
Copy link
Member Author

Created an issue for the focus loss at #14946

@oandregal
Copy link
Member Author

oandregal commented Apr 12, 2019

OK, I'm going to go ahead here and land this so it's in the list of bugfixes to port to WordPress 5.2.

Shameless self-promotion in case anyone has time to review related gallery bugfixes that deal with keyboard navigation and focus management: #14930 and #14821 I'm going to be out next week, but I'll try to save a couple of hours tomorrow or perhaps Sunday in case reviews come today when I' already AFK. It'd be nice to get those bugfixes in as well!

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). [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: DELETE and BACKSPACE do not remove the image
5 participants