[Product card] Product state missing from heading announcement

[svinkle]

Issue summary

When navigating via headings alone, product state such as "sold out" or "sale" is not included as part of the heading announcement.

Without front-loading these details, a screen reader user would need to click into the pdp and discover the product state after navigating through this content.

Screenshots

Current code

HTML

<!-- Sale… -->
<h3 class="card__heading h5">
  <a
    href="/products/bamboo-case-for-shampoo-and-conditioner-bars"
    class="full-unstyled-link"
  >
    Bamboo Travel Case
  </a>
</h3>
<!-- … -->
<span class="badge badge--bottom-left color-background-2">Sale</span>

<!-- Sold out… -->
<h3 class="card__heading h5">
  <a href="/products/body-lotion-passionfruit" class="full-unstyled-link">
    Body Lotion
  </a>
</h3>
<!-- … -->
<span class="badge badge--bottom-left color-background-1">Sold out</span>

Steps to reproduce

1. Go to any demo store with any supported browser
2. With an active screen reader, navigate through product cards via headings alone

Behavior

Expected

• Product state to be included in heading announcement in order to quickly inform the user of the current state.

Actual

• Product state is not included.

Recommendation

1. Add a unique id to each heading link.
2. Add a unique id to each product state badge.
3. Add the aria-labelledby attribute to each heading link, setting its value to reference its own id then the id of the state badge.

These changes will front-load the product state with the card heading announcement.

🗣 "Bamboo Travel Case Sale"
🗣 "Body Lotion Sold Out"

Recommended code

HTML

<!-- Sale… -->
<h3 class="card__heading h5">
  <a
    href="/products/bamboo-case-for-shampoo-and-conditioner-bars"
    id="cardLink-0"
    class="full-unstyled-link"
    aria-labelledby="cardLink-0 badge-0"
  >
    Bamboo Travel Case
  </a>
</h3>
<!-- … -->
<span id="badge-0" class="badge badge--bottom-left color-background-2">
  Sale
</span>

<!-- Sold out… -->
<h3 class="card__heading h5">
  <a
    href="/products/body-lotion-passionfruit"
    id="cardLink-1"
    class="full-unstyled-link"
    aria-labelledby="cardLink-1 badge-1"
  >
    Body Lotion
  </a>
</h3>
<!-- … -->
<span id="badge-1" class="badge badge--bottom-left color-background-1">
  Sold out
</span>

Specifications

• Dawn version: 2.5.0
• Browser: Any
• Component: Product card
• WCAG Principle: Perceivable
• WCAG SC: 1.3.1 Info and Relationships
• Severity: Low
• Effort: Low