There are several accessibility issues with the rendered HTML from the banner added to the page from environment indicator module, when visible for users that do not have permissions to use the Drupal 8/9 toolbar.
<button> tag with attributes aria-haspopup="true" to declare that it triggers a submenu and aria-expanded="false" to declare that the submenu is hidden. aria-landmark="banner".title="Show the environment switcher." attribute from the DIV to the BUTTON, and add an aria-label on the BUTTON with the same text. Add aria-label="Environment Indicator" to the wrapper DIV. Adding the aria-label to the DIV instead of the title attribute, also has the added benefit of satisfying the requirement that when there are multiple aria-landmark roles of the same type on a page, then aria-label is required to distinguish them, so this becomes a more bulletproof solution to avoid conflicts with other modules and themes.Before:
<div style="..." title="Show the environment switcher." id="environment-indicator">
Local
<ul class="environment-switcher-container" style="border-top: 1px solid white; display: none;">
<li>
<a href="[another environment link]">Open in: [another environment]</a>
</li>
</ul>
</div>
After:
<div aria-landmark="banner" aria-label="environment indicator" id="environment-indicator">
<button class="environment-switcher" aria-label="Show the environment switcher." title="Show the environment switcher." aria-haspopup="true" aria-expanded="false">
[some environment name]
</button>
<ul class="environment-switcher-container">
<li>
<a href="[another environment link]" >Open in: [another environment]</a>
</li>
</ul>
</div>
With this refactoring, it then becomes nicer to refactor and simplify the JS so that the only thing it does is toggle the value of aria-expanded between false and true, and leave visibility rules up to CSS with something like:
.environment-switcher + .environment-switcher-container {
display: none;
}
.environment-switcher[aria-expanded="true"] + .environment-switcher-container {
display: block;
}
Needs patch
Environment indicator bar passes accessibility and becomes tab navigable.
The default markup in environment-indicator.html.twig file's will necessarily change to add the <button> tag. I'm not sure this is considered to be an API, per-se, but worth noting.
Similarly, if you consider the module's default CSS an API (I'm not entirely sure I would) then this part of the refactoring might be considered an API breaking change.
None.
Active
4.0
Code
Not all content is available!
It's likely this issue predates Contrib.social: some issue and comment data are missing.
MR is ready for review.
I've tested it with the Siteimprove chrome extension and the WebAIM WAVE chrome extension, and there are no issues found.