Skip to content

Conversation

@brandonpayton
Copy link
Member

@brandonpayton brandonpayton commented Jun 14, 2024

What and Why?

Offer a skip link so users using assistive technology and keyboard-driven workflows have an opportunity to skip over the Playground preview iframe.

Fixes #293

How?

This PR adds a number of items that are hidden visually but shown if they receive focus.

  • Text noting the "Beginning of Playground Preview"
  • A link "Skip Playground Preview Iframe"
  • Test noting "End of Playground Preview"

The "Skip Playground Preview Iframe" link is shown when focused.
Screenshot 2024-06-14 at 2 02 55 PM

When the skip-link is clicked, it focuses "End of Playground Preview" which is revealed at the bottom of the preview pane when focused.
Screenshot 2024-06-14 at 2 03 18 PM

Testing Instructions

In both the editor and front end, test working with an instance of the block by focusing the "Run" button, tab to the next link which is "Skip Playground Preview", click it, and confirm focus is moved to "End of Playground Preview".

The iframe does not exist before activation.
@brandonpayton brandonpayton merged commit 1a47ce4 into trunk Jun 18, 2024
@brandonpayton brandonpayton deleted the pg-block-add-skip-link branch June 18, 2024 14:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Playground block: A11Y: Add skip links for loaded preview/iFrame

2 participants