[Faceted Filters] Reset link purpose may not be clear

[svinkle]

Issue summary

When a screen reader user encounters a Reset link, the purpose of the link may not be clear out of context. Screen reader software features the ability to navigate by only a specified element type. This could lead to a confusing user experience without more information.

Screenshots

Current code

HTML

<a
  href="/collections/all?sort_by=created-descending"
  class="facets__reset link underlined-link js-facet-remove"
>
  Reset
</a>

Steps to reproduce

1. Go to a collection page with Dawn theme with any supported browser.
2. Activate a facet filter control.
3. With an active screen reader, navigate to the Reset link.

Behavior

Expected

• Reset link to have additional information for context.

Actual

• Reset link does not feature additional context.

Recommendation

1. Add a unique id for each summary control.
2. Add the aria-describedby attribute to each Reset link, setting its value to match the id of its respective facet control.

With this, the Reset links will feature more context for its purpose. For example, this Size related Reset link will be announced as, "Reset, link, Size".

Recommended code

HTML

<summary class="facets__summary" … id="FacetsSummary-0">
  <!-- … -->
  <span>Size</span>
  <span class="count-bubble"></span>
  <!-- … -->
</summary>

<!-- … -->

<a
  href="/collections/all?sort_by=created-descending"
  class="facets__reset link underlined-link js-facet-remove"
  aria-describedby="FacetsSummary-0"
>
  Reset
</a>

Specifications

• Component: Faceted Filters
• WCAG Principal: Operable
• WCAG SC: 2.4.4 Link Purpose (In Context)
• Severity: Medium
• Effort: Low