Solution

Use one React state value as the source for the visual selection, accessible selection, and status text.

The problem, in plain English

The three buttons describe one choice, so they must not manage themselves independently. If the highlight moves but aria-selected or the label does not, the control tells two different stories. One selected index keeps those outputs synchronized.

The mental model

Treat selected as the answer to one question: which array position is active? A click changes that answer with setSelected(i). React then renders the class, ARIA value, and label from the new index.

A first attempt

function select(event: React.MouseEvent<HTMLButtonElement>) {
  document.querySelector('.selected')?.classList.remove('selected');
  event.currentTarget.classList.add('selected');
}

This moves the colored class, but React still has no selected value. The status stays on Day, and aria-selected can disagree with what the user sees.

The working solution

import { useState } from 'react';
import './styles.css';

const SEGMENTS = ['Day', 'Week', 'Month'];

export default function App() {
  const [selected, setSelected] = useState(0);

  return (
    <main className="container">
      <h1>Segmented Control</h1>

      <div className="segmented" role="tablist" aria-label="Time range">
        {SEGMENTS.map((label, i) => (
          <button
            key={label}
            type="button"
            role="tab"
            className={i === selected ? 'segment selected' : 'segment'}
            aria-selected={i === selected}
            onClick={() => setSelected(i)}
          >
            {label}
          </button>
        ))}
      </div>

      <p className="status">Selected: {SEGMENTS[selected]}</p>
    </main>
  );
}

useState(0) makes Day the initial choice. Every button compares its own index with selected, so the same boolean controls its class and aria-selected. The status looks up the matching label instead of storing a second value that could drift.

Walking through one interaction

The first render has selected = 0. Clicking Week calls setSelected(1). On the next render, only index 1 passes the comparison, so Week gains the highlight and true ARIA state while Day loses both; the status reads SEGMENTS[1].

Gotchas

• Mutating DOM classes — React cannot derive the label or ARIA state from an imperative class change. Update state instead.
• Three booleans — separate flags can produce zero or multiple selected segments. Store one index.
• Missing semantics — role="tab" does not replace a button; retain the native <button> element.

Going further

• Add Left and Right Arrow handling with a roving tabIndex for the full tablist keyboard pattern.
• Accept value and onChange props to make the control parent-controlled.

Alternative solutions

import { useReducer } from 'react';
import './styles.css';

const SEGMENTS = ['Day', 'Week', 'Month'];

export default function App() {
  const [selected, select] = useReducer(
    (_current: number, next: number) => next,
    0,
  );

  return (
    <main className="container">
      <h1>Segmented Control</h1>

      <div className="segmented" role="tablist" aria-label="Time range">
        {SEGMENTS.map((label, index) => (
          <button
            key={label}
            type="button"
            role="tab"
            className={index === selected ? 'segment selected' : 'segment'}
            aria-selected={index === selected}
            onClick={() => select(index)}
          >
            {label}
          </button>
        ))}
      </div>

      <p className="status">Selected: {SEGMENTS[selected]}</p>
    </main>
  );
}