[Faceted Filters] Price filter input missing accurate accessible name

[svinkle]

Issue summary

The Price facet input elements do not feature a programmatically associated label to describe their purpose. Currently the placeholder attribute is used as the accessible name. As a result, there is an incorrect description announced on focus. This could lead to a confusing or frustrating user experience for screen reader or voice dictation users who rely on accurate labelling.

Screenshots

Current code

HTML

<input
  class="field__input"
  name="filter.v.price.gte"
  id="Filter-Price-4"
  type="number"
  placeholder="0"
  min="0"
  max="615.00"
/>
<label
  class="field__label"
  for="Search-In-Modal"
>
  From
</label>

<!-- … -->

<input
  class="field__input"
  name="filter.v.price.lte"
  id="Filter-Price-4"
  type="number"
  placeholder="615.00"
  min="0"
  max="615.00"
/>
<label
  class="field__label"
  for="Search-In-Modal"
>
  To
</label>

Steps to reproduce

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

Behavior

Expected

• input to be accompanied by a descriptive accessible name.

Actual

• input accessible name/label association are inaccurate.

Recommendation

1. Supply a unique id for each input control.
2. Adjust the for attribute value to match the id of the associated input.

Recommended code

HTML

<input
  class="field__input"
  name="filter.v.price.gte"
  id="Filter-Price-GTE"
  type="number"
  placeholder="0"
  min="0"
  max="615.00"
/>
<label
  class="field__label"
  for="Filter-Price-GTE"
>
  From
</label>

<!-- … -->

<input
  class="field__input"
  name="filter.v.price.lte"
  id="Filter-Price-LTE"
  type="number"
  placeholder="615.00"
  min="0"
  max="615.00"
/>
<label
  class="field__label"
  for="Filter-Price-LTE"
>
  To
</label>

Specifications

• Component: Faceted Filters
• WCAG Principal: Understandable
• WCAG SC: 3.3.2 Labels or Instructions
• Severity: High
• Effort: Low