[Global] Misleading context applied to modal launcher controls

[svinkle]

Issue summary

Modal launcher controls include the aria-haspopup="dialog" attribute. When using a screen reader, the this attribute is to convey the result of activating the control; the opening of a modal window.

Due to poor support for this attribute value among Windows based screen reader software, users are not informed of the modal window result, rather, that they're working with a "menu" (this is the default behaviour when aria-haspopup is present.) This information is incorrect and could lead to a confusing or frustrating user experience.

Screenshots

Current code

HTML

<!-- Example instance on the header search control -->
<summary
  class="header__icon header__icon--search header__icon--summary link focus-inset modal__toggle"
  aria-haspopup="dialog"
  aria-label="Search"
  role="button"
>
  <!-- Icon -->
</summary>

Steps to reproduce

1. Go to a Dawn demo store with any supported browser on Windows
2. With an active screen reader, navigate through modal launcher controls, such as the search launcher in the header section

Behavior

Expected

• Control to convey the end result of opening a modal window.

Actual

• Control conveys a "menu" interaction.

Recommendation

1. Add a new string to to the global hidden message container, "Opens a modal window."
2. For all instances of aria-haspopup="dialog":
   1. Remove the aria-haspopup attribute.
   2. Add the aria-describedby attribute, setting its value to reference the new message contaner id.

These changes will all alert screen reader users to the end result upon activation.

🗣 "Search, button, Opens a modal window."

Recommended code

HTML

<summary
  class="header__icon header__icon--search header__icon--summary link focus-inset modal__toggle"
  aria-describedby="a11y-modal-window-message"
  aria-label="Search"
  role="button"
>
  <!-- Icon -->
</summary>

<!-- … -->

<div hidden>
  <span id="a11y-refresh-page-message">Choosing a selection results in a full page refresh.</span>
  <span id="a11y-new-window-message">Opens a new window.</span>
  <span id="a11y-modal-window-message">Opens a modal window.</span>
</div>

Specifications

• Dawn version: 3.0
• Browser: Any
• Component: Global
• WCAG Principle: Perceivable
• WCAG SC: 1.3.1 Info and Relationships
• Severity: High
• Effort: Low