godaddy-wordpress / godaddy-wordpress/coblocks

Lightbox not accessible to keyboard-only users

Open
#2,306 2 comments 0 reactions 0 assignees View on GitHub
[Priority] Low [Type] Bug
Dominant language
JavaScript
Stars
794
Forks
142
PR merge metrics
No merged PRs in 30d

Description

### 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.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.