foundation

Accessibility-oriented queries

Use role, name, label, and text queries to align tests with how users and assistive tech find UI.

Query priority in Testing Library: `getByRole`, `getByLabelText`, `getByPlaceholderText`, then text; `getByTestId` is a last resort. Roles reflect how assistive tech exposes controls — button, textbox, combobox.

Name options disambiguate multiple elements: `getByRole('button', { name: /save/i })`. Hidden elements are skipped by default. Fixing tests often means improving markup — add labels, roles, and accessible names in the product.

On interviews, explain the concept with a concrete example and name the behavior interviewers probe.

Common pitfalls include hiding data flow, over-splitting components, and putting side effects in render.

The trade-off is often clarity versus reuse or explicit props versus convenience.

Checklist:

  • Prefer role and accessible name.
  • Add labels instead of test ids when possible.
  • Align queries with WCAG-exposed semantics.