[Faceted Filters] Mobile close control missing accessible name

[svinkle]

Issue summary

When the Facet window is open while using a mobile screen reader, the Close control is missing its accessible name/alternative text. When focused, screen readers will announce the control type and state only. This may create a confusing user experience when the control purpose os not provided.

Screenshots

Current code

HTML

<span tabindex="0" class="mobile-facets__close mobile-facets__close--no-js">
  <!-- SVG… -->
</span>

Steps to reproduce

1. Go to a collection page with Dawn theme with any supported mobile browser.
2. Activate the "Filter and Sort" control.
3. With an active screen reader, navigate to the Close control.

Behavior

Expected

• Controls to feature an accessible name for assistive technology.

Actual

• Close control is missing its accessible name.

Recommendation

Adjust the CSS to not hide the .mobile-facets__open container which houses the control accessible name.

Recommended code

CSS

details[open] .mobile-facets__open {
  /* visibility: hidden; */
}

Specifications

• Component: Faceted Filters
• WCAG Principal: Operable
• WCAG SC: 1.3.1: Info and Relationships
• Severity: High
• Effort: Low