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, and aria-controls="environment-switcher-container" to indicate the element that will popup when clicked. The BUTTON should have an aria-label with the same text as the title="Show the environment switcher." attribute that shows up on the outer DIV.role="region" to the outer wrapper, with an appropriate aria label.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">
[current environment name]
<span class="description">[current release]</span>
<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 role="region" aria-label="Environment indicator" title="Show the environment switcher." id="environment-indicator">
[current environment name]
<span class="description">[current release]</span>
<button class="environment-switcher visually-hidden focusable" aria-haspopup="menu" aria-expanded="false" aria-controls="environment-switcher-container">
Show the environment switcher.
</button>
<ul id="environment-switcher-container" class="environment-switcher-container" aria-label="available environments" aria-hidden="false">
<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 (in a follow-up issue) 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-container {
display: none;
}
.environment-switcher-container[aria-hidden="false"] {
display: block;
}
Environment indicator bar passes accessibility and becomes keyboard 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.
Needs review
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.