Contrib.social

Accessibility fixes for Environment indicator

Open on Drupal.org →
Created on 20 July 2021, almost 4 years ago
Updated 16 January 2024, over 1 year ago

Problem/Motivation

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.

  1. There is no way to activate the fly-out functionality with keyboard navigation only. The fact that there is a hidden LI with additional links to other environments is not detectable from screen readers.
  2. The DIV wrapper is not contained within an aria landmark.
  3. The "title" attribute on the DIV wrapper (which provides hover text) is not considered accessible, as it is not readable text.

Proposed resolution

  1. The trigger to activate the flyout should be contained inside a <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.
  2. The ARIA Landmark issue can usually be fixed just by adding aria-landmark="banner".
  3. Move 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;
}

Remaining tasks

Needs patch

User interface changes

Environment indicator bar passes accessibility and becomes tab navigable.

API changes

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.

Data model changes

None.

🐛 Bug report
Status

Active

Version

4.0

Component

Code

Created by

🇪🇨Ecuador jwilson3

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024