Accessibility fixes for Environment indicator

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, 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.
2. The ARIA Landmark issue can be fixed by adding role="region" to the outer wrapper, with an appropriate aria label.
3. 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">
  [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;
}

Remaining tasks

• Needs patch
• Needs review
• Needs follow-up to simplify javascript, remove jquery, etc.

User interface changes

Environment indicator bar passes accessibility and becomes keyboard 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.