[Faceted Filters] Invalid HTML markup

[svinkle]

Issue summary

1. The markup for each facet control features invalid HTML markup: div is not a valid child element of summary.
2. The id values for each Product Type facet input features invalid, space separated values: id can only have a single value.

Invalid markup could cause issues for screen readers and other systems such as search engines which parse HTML content.

Screenshots

Current code

HTML

<!-- … -->
<div>
  <span>Size</span>
  <span class="count-bubble"></span>
  <!-- … -->
</div>
<!-- … -->

<label for="Filter-Product type-1" class="facet-checkbox">
  <input
    type="checkbox"
    name="filter.p.product_type"
    value="apparel"
    id="Filter-Product type-1"
  />

  <!-- … -->
  Apparel (1)
</label>

Steps to reproduce

1. Go to a collection page with Dawn theme with any supported browser.
2. Use NU Html Validator to validate the HTML markup.

Behavior

Expected

• Valid HTML to be in use.

Actual

• Invalid HTML is present.

Recommendation

1. Swap the div elements for span.
2. Adjust the generated id values to be one single value.

Recommended code

HTML

<!-- … -->
<span>
  <span>Size</span>
  <span class="count-bubble"></span>
  <!-- … -->
</span>
<!-- … -->

<label for="Filter-Product-type-1" class="facet-checkbox">
  <input
    type="checkbox"
    name="filter.p.product_type"
    value="apparel"
    id="Filter-Product-type-1"
  />

  <!-- … -->
  Apparel (1)
</label>

Specifications

• Component: Faceted Filters
• WCAG Principal: Robust
• WCAG SC: 4.1.1 Parsing
• Severity: Low
• Effort: Low