Accessibility: Fix aria labels on section buttons #4373
Merged
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.
Why
In current platform.sh docs, there are quite a number of accessibility errors. Most of them are just annoying, but there was one thing that prevented really from using the docs with a screen reader correctly.
Each section has a button to expand it, and this button has an
aria-label
of "Toggle section". So imagine if each button had the same text: "Toggle section". that's how I see it on the currently released pages.What's changed
If a button contains an SVG image (correctly hidden with
aria-hidden="true"
btw), then thearia-label
is changed to have the title of the section in question. If however the section title was the text of the button itself (simplified code:<button>{{ .Title }}</button>
), then thearia-label
was removed as it is not needed anymore: the text between thebutton
tags is read by all screen readers.Where are changes
Updates are for:
sites/platform
templates)sites/upsun
templates)