Add aria-expanded and aria-label to the sidebar section toggles. #1113
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.
This PR tries to improve the accessibility of the expandable section toggle buttons in the sidebar:
aria-expanded
attributearia-label
:sprintf( __( 'Open section: %s' ), title )
I'm intentionally avoiding to use the word "Toggle" because it's terribly difficult to translate in some languages, see core Trac ticket: https://core.trac.wordpress.org/ticket/34753
Also, one interesting consideration about the label: it's a bit controversial if the label text should be updated depending on the expanded/collapsed state. I've seen recommendations and examples for both ways. I think the best option depends on a case by case basis. In this specific case I'd say it makes perfectly sense to not change the label because
aria-expanded
already complements the label text; screen readers will announce the label + the state, for example:Open section: Featured image, collapsed
Open section: Featured image, expanded
in this case, changing the label to
Close section: Featured image, expanded
could be even confusing.
Screenshots:
Note: safari displays the icons a bit misaligned, that's unrelated and already addressed in a separate issue see #1103
Fixes #1112