Lightbox not accessible to keyboard-only users

[grahamarmfield]

Describe the bug:

Using an Offset block in a page with lightbox activated, the lightbox cannot be actioned by keyboard only users as the images in the Offset do not get focus. Also, if Lightbox triggered by mouse click, the keyboard focus remains on the underlying page.

To reproduce:

1. Add Offset block to page with some images within it.
2. Select option to enable Lightbox
3. Save or Update page and view in browser
4. Attempt to tab to the images in the Offset block. Note that none of them get keyboard focus.
5. Open a lightbox with mouse click.
6. Press tab key repeatedly. Note that keyboard focus is still on underlying page.

Expected behavior:

As a keyboard user I would expect to be able to operate the lightbox on any of the images in the Hero block. I would expect to see a focus indication around each image in turn, and to be able to trigger the lightbox using the Enter key (or space bar if this is a button). Once the lightbox is open I would expect keyboard focus to be transferred into the lightbox controls so that I can close lightbox and move to previous/next image as required.

Extra labelling may be required for screen reader users to allow them to fully understand what's going on.

Screenshots:

Isolating the problem:

• [x] This bug happens with no other plugins activated
• [x] This bug happens with a default WordPress theme active
• [x] This bug happens without the Gutenberg plugin active
• [x] I can reproduce this bug consistently using the steps above

WordPress version:

WP 5.9.1

Gutenberg version:

Not using Gutenberg plugin.

[snovosel]

@grahamarmfield , I am able to use my keyboard and the lightbox controls by using the directional arrows on the keyboard. Are you able to use this functionality?

[AnthonyLedesma]

We have keyboard controls present. I wonder if this story would be better suited to be geared toward accessibility instead. We should likely have screen reader text whenever the LightBox is open anyway.