[Global] Active pagination nav control issues

[svinkle]

Issue summary

The active pagination item features aria-* attributes which may not be well supported on the current element. This could lead to a confusing user experience when assistive technology is unable to accurately convey the purpose or state of the element.

In addition, the visual treatment of the active, yet inactive control features an underline. This could confuse sighted users into thinking the control is available to be activated.

Screenshots

Current code

HTML

<span
  class="pagination__item pagination__item--current"
  aria-current="page"
  aria-label="Page 1"
>
  1
</span>

CSS

.pagination__item--current::after,
.pagination__item:hover::after {
  content: '';
  display: block;
  width: 2rem;
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  background-color: currentColor;
}

Steps to reproduce

1. Go to a Dawn theme store with any supported browser
2. Navigate to a collection page or blog page with many comments
3. Run axe DevTools and visually inspect the active control

Behavior

Expected

1. aria-* to be applied to supported elements.
2. A subdued visual indicating an inactive control.

Actual

1. aria-* attributes are applied to low-supported elements.
2. The inactive control appears actionable.

Recommendation

1. Swap the span element for an a.
2. Add the role attribute, setting its value to link – helps to share semantic meaning.
3. Add the aria-disabled attribute, setting its value to true – helps to share element state.
4. Adjust the visual affordance of the control by removing the underline and adding the light class. Use the [role="link"]:not([href]) selector for additional visual styling.

Recommended code

HTML

<a
  class="pagination__item pagination__item--current light"
  aria-current="page"
  aria-label="Page 1"
  role="link"
  aria-disabled="true"
>
  1
</a>

Specifications

• Browser: Any
• Dawn version: 2.4.0
• Component: Global
• WCAG Principal: Perceivable, Robust
• WCAG SC: 1.3.1 Info and Relationships, 4.1.2 Name, Role, Value
• Severity: Low
• Effort: Low