WordPress / WordPress/Learn

A11y / Playground Block / Learn - Focus out of sequence/Open in new tab

Open
#2,783 5 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

[Component] Playground Block [Type] Bug Accessibility
Dominant language
PHP
Stars
333
Forks
127
Avg merge
1d 7h
Merged PRs (30d)
11

Description

Type of feedback

//dev

Description

The element order of .wp-block-wordpress-playground-playground .wordpress-playground-main-container .wordpress-playground-header has been shifted using order: 2, causing it to receive focus before the three controls that visually precede it.

Changing the display order of focusable elements has significant accessibility problems when navigating by keyboard, because the keyboard focus jumps around in unexpected and unpredictable ways. It makes navigating significantly more difficult.

'Open in new tab' can be after the container, but if so it must be there both in the DOM and in the visual order.

Screenshots or screen recording (optional)

First screenshot shows the current visual:

image

image

Second screenshot shows the real order of objects, which is the order keyboard navigators and screen reader users will get:

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Inspect the .wp-block-wordpress-playground-playground .wordpress-playground-main-container .wordpress-playground-header layout and its order: 2 rule. Verify the DOM order, visual order, keyboard focus sequence, and screen-reader navigation; done means “Open in new tab” follows the container consistently in both DOM and visual order.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.