Accessibility

For designers

• All states (current dot, non-current dot, button hover, button focus, button disabled) must maintain accessible contrast in both light and dark background contexts.
• Focus styles must remain visible and meet WCAG AA contrast requirements across all supported surfaces.
• The current dot and disabled buttons must use more than colour alone to convey state — pair with shape, position, or supporting helper text.
• Colour tokens used within the component should be semantic (e.g. color-foreground-neutral-default) rather than fixed values. This ensures the component adapts correctly to different themes or surfaces.

For developers

The following are general recommendations. The exact approach depends widely on your use-case.

Wrapper

The count indicator is a set of navigation controls — it is not a carousel. It can be used in two contexts:

• Inside a carousel or gallery — In this case, role="group" aria-roledescription="carousel" and aria-label belong on the outer content container (the element wrapping both the slides and these controls), not on tng-count-indicator itself.
• Standalone pagination — When paginating a list or search results, use a <nav> element or add role="navigation" so screen readers expose it as a navigation landmark.

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

If a landmark is not appropriate (e.g. the controls are already inside a labelled region), role="group" with an aria-label is a lighter alternative.

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

Helper text

Add aria-live="polite" to tng-count-indicator-helper so screen readers announce changes as the user navigates.

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

Dots

The dots serve as a visual progress indicator. Depending on whether they are an accurate or approximate representation of the item count, choose one of the following patterns.

Decorative dots

When the dot count does not match the actual item count (e.g. a maximum of 10 dots is shown for 42 items), the dots are purely decorative. Add aria-hidden="true" to tng-count-indicator-dots — the helper text already conveys the current state.

<div class="tng-count-indicator-dots" aria-hidden="true">
  <div class="is-current"></div>
  <div></div>
  <div></div>
</div>

Semantic dots

When each dot maps 1:1 to an actual item, give the dots semantic meaning. Add role="group" and an aria-label to tng-count-indicator-dots. Mark each dot with an aria-label describing its position and use aria-current="step" instead of (or alongside) is-current to indicate the active item. The styles already support this — aria-current is handled alongside is-current.

<div class="tng-count-indicator-dots" role="group" aria-label="Progress">
  <div aria-current="step" aria-label="Item 1 of 5"></div>
  <div aria-label="Item 2 of 5"></div>
  <div aria-label="Item 3 of 5"></div>
  <div aria-label="Item 4 of 5"></div>
  <div aria-label="Item 5 of 5"></div>
</div>

Navigation buttons

Use aria-label on the buttons themselves (e.g. "Previous item", "Next item").

<div class="tng-count-indicator-buttons">
  <button class="tng-icon-button is-sm" aria-label="Previous item">
    <i class="tng-icon icon-chevron-left" aria-hidden="true"></i>
  </button>
  <button class="tng-icon-button is-sm" aria-label="Next item">
    <i class="tng-icon icon-chevron-right" aria-hidden="true"></i>
  </button>
</div>