Custom components have correct ARIA state attributes

Custom stateful components — toggles, accordions, tabs, menus — that do not update their ARIA state attributes when visual state changes give screen reader users stale or wrong information. A toggle that shows 'On' visually but reports aria-checked="false" tells blind users the opposite of the truth. WCAG 2.2 SC 4.1.2 (Name, Role, Value) is Level A — the requirement to keep programmatic state in sync with visual state is not optional.

Bind ARIA state attributes directly to component state variables so they update atomically with the visual change.

export function Accordion({ title, children }: { title: string; children: React.ReactNode }) {
  const [expanded, setExpanded] = useState(false)
  const contentId = useId()

  return (
    <div>
      <button
        aria-expanded={expanded}      // stays in sync with state
        aria-controls={contentId}     // connects trigger to content
        onClick={() => setExpanded(e => !e)}
      >
        {title}
      </button>
      <div
        id={contentId}
        hidden={!expanded}            // hidden attribute removes from AT tree when closed
      >
        {children}
      </div>
    </div>
  )
}

For every custom stateful component in the codebase, verify the ARIA attribute value is the same expression as the state variable — not a separate boolean that could fall out of sync.