Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Playground block: A11Y: Remove duplicate main landmarks #292

Closed
alexstine opened this issue Jun 4, 2024 · 2 comments · Fixed by #299
Closed

Playground block: A11Y: Remove duplicate main landmarks #292

alexstine opened this issue Jun 4, 2024 · 2 comments · Fixed by #299
Assignees
@brandonpayton
Labels
Accessibility Bug Something isn't working Playground block

Comments

@alexstine
Copy link

Test page: https://learn.wordpress.org/test/wordpress-playground-block-plugin-test-page/

Every time the Playground block is used, it renders a <main> landmark. Really, this landmark should only be used once per page. Can this be replaced by another tag? Maybe just a generic <div>? You could also replace this with a <section aria-label="Playground"> but I think if the Playground block has surrounding headings, it's not a big deal.
@brandonpayton brandonpayton mentioned this issue Jun 12, 2024
Merged
brandonpayton added a commit that referenced this issue Jun 13, 2024
@brandonpayton
Playground block: Stop monopolizing main element (#299)
e7c9636 
<!-- Thanks for contributing to WordPress Playground Tools! -->

## What?

Fixes #292 - "Playground block: A11Y: Remove duplicate main landmarks"

This PR replaces the Playground block's `<main>` element with a
`<section>` element annotated with an `aria-label`.

## Why?

There is only supposed to be one `<main>` element per document. We do
not know if a document including a Playground block will be rendered
within another `<main>` element, and there can be multiple Playground
blocks in a single document.

## Testing Instructions

- `npx nx run wordpress-playground-block:dev`
- Create a new post
- Add a Playground block in the editor and confirm it renders normally
- Publish the post and confirm the Playground block renders normally on
the front end
- Use screen reader and confirm that the section label is noted when
engaging with the section
@brandonpayton brandonpayton added the Bug Something isn't working label Jun 13, 2024
@brandonpayton
Copy link
Member

Thanks for flagging this, @alexstine!
@brandonpayton brandonpayton reopened this Jun 27, 2024
@brandonpayton brandonpayton mentioned this issue Jul 18, 2024
Open
@alexstine
Copy link
Author

Working well, thanks!
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Accessibility Bug Something isn't working Playground block
2 participants
@brandonpayton @alexstine