Allow defining an aria-label in group blocks #41744
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
aristath
requested review from
ellatrix,
ajitbohra,
ajlende,
ryanwelcher,
juanmaguitar and
fabiankaegy
as code owners
|
Size Change: +9.03 kB (+1%) Total Size: 1.25 MB
ℹ️ View Unchanged
|
carolinan
added
[a11y] Labelling
[Block] Group
alexstine
added
the
[Focus] Accessibility (a11y)
|
Thanks @aristath . I'll review this soon. |
alexstine
approved these changes
Jun 28, 2022
mburridge
added
the
Needs Dev Note
|
Added the Needs Dev Note label in case this needs a dev note (either individual or as part of a "misc" dev note) for WP 6.1 release. |
|
I can write a dev note on the make blog if we want... Or do we want this to be a part of a "misc" dev-note as mentioned above @mburridge ? |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
This PR allows defining an ARIA label for group blocks.
Why?
When there are multiple landmarks of the same type (
<nav>,<aside>,<section>etc), assistive technologies have no way to differentiate them. Group blocks allow users to select the HTML element they need, but in doing so, introduce an a11y issue.This PR attempts to resolve that, by allowing users & theme-developers to manually add an ARIA label in their templates.
How?
Since this is something that may eventually be needed in other blocks, it was implemented as a hook.
To add support, we can simply define
supports.ariaLabelastrueinblock.jsonfiles.This implementation does NOT add a UI for the aria-label. A visible option would have the potential to confuse users, and could cause more harm than good if they enter the wrong thing or misunderstand the purpose.
However, allowing users & theme-authors to manually define an aria-label in their templates is something that can significantly enhance the a11y of themes, without exposing any option to users. Furthermore, implementing this as a hook will allow us to implement a UI if at some point in the future we choose to do so.
Right now, if we try to add an aria-label to a group block we get a validation error and this PR allows us to define the
aria-labelproperly.Testing Instructions
You can use this content to test:
Before the PR: validation errors in the 2
<aside>groups.After the PR: it works 🎉