Automattic / Automattic/jetpack

EventBrite Block: Focus not returning to invoking element on modal close (A11Y)

Open
#17,267 1 comment 0 reactions 0 assignees View on GitHub
[Block] Eventbrite [Focus] Accessibility [Pri] Normal Bug
Dominant language
PHP
Stars
1.8k
Forks
898
Avg merge
1d 18h
Merged PRs (30d)
774

Description

In testing the accessibility of this block, I found this issue where - on modal close, the focus isn't returned to the invoking element. Thus keyboard-only users will have a hard time navigating this.

#### Steps to reproduce the issue

1. Add an Eventbrite Checkout block to a post or page and set the "Embed Type" to "Button & Modal".
2. View post/page.
3. Click on the "Register" button to open the modal.
3. Click the "close" button or the escape key.
4. See that the button is not focused.

#### What I expected

Modal-invoking element has `:focus`.
![image](https://user-images.githubusercontent.com/20868511/94313861-7f358500-ff4d-11ea-8a1b-62713b01090b.png)

#### What happened instead
Modal-invoking element does not have `:focus`.
![image](https://user-images.githubusercontent.com/20868511/94313845-747af000-ff4d-11ea-8cdc-d4029db1672f.png)

Contributor guide

Open the contributing guide

Research direction

Start by locating the Eventbrite Checkout block's Button & Modal implementation and reproduce the focus behavior described in the issue. Trace the close-button and Escape-key paths, then verify that closing the modal returns focus to the invoking Register button for keyboard users.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
accessibility, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.