Accessibility

For designers

The label and any disabled / hover / focus states on the icon buttons must maintain accessible contrast on both light and dark surfaces. Focus styles must meet WCAG AA across the on-image and on-solid variants. Disabled buttons must use more than colour alone to convey state — the chevron icon already provides shape; pair with helper text where ambiguity remains. Colour tokens within the component should be semantic so the component adapts correctly to brand modes and surfaces.

For developers

The following are general recommendations; the exact approach depends on the use-case.

Wrapper

.tng-count-indicator is a presentational wrapper — it’s not itself a landmark. The landmark belongs on the surrounding region (carousel, gallery, paginated list) that the wrapper sits inside. When the surrounding context isn’t already labelled, you can promote the wrapper to a landmark in two ways:

<nav class="tng-count-indicator" aria-label="Search results pages">…</nav>

<div class="tng-count-indicator" role="group" aria-label="Gallery navigation">
  …
</div>

Label

Add aria-live="polite" to the label so screen readers announce changes as the user navigates.

<span class="tng-count-indicator-label" aria-live="polite">1 of 42</span>

Navigation buttons

Use aria-label on the buttons themselves (e.g. "Previous item", "Next item"). At the ends of the sequence, disable the corresponding button (disabled attribute) rather than hiding it — screen reader users discover the boundary that way, and the focus order stays stable.

<button class="tng-icon-button is-md" aria-label="Previous item" disabled>
  <i class="tng-icon icon-chevron-left" aria-hidden="true"></i>
</button>
<button class="tng-icon-button is-md" aria-label="Next item">
  <i class="tng-icon icon-chevron-right" aria-hidden="true"></i>
</button>