---
description: Accessibility conventions for React components. Covers aria attributes and semantic HTML usage.
paths:
  - "src/**/*.tsx"
---

# React Accessibility Conventions

Every component must be accessible.

---

## 1. Aria attributes

- **`IconButton`** and icon-only interactive elements **must** have an `aria-label`.
- Use `aria-labelledby` / `aria-describedby` to associate labels and descriptions when the label is visible elsewhere in the DOM.
- Use `role` only when the semantic HTML element does not convey the right role.

---

## 2. Semantic components

- Use semantic HTML elements.
- Do not use `Box`, `Stack`, or `Typography` with `onClick` as a button substitute. Use `ButtonBase`, `Button`, or `IconButton`.
