How can your component tests also help catch accessibility problems?

Querying by role and accessible name already checks a lot of accessibility. The accessible name is what a screen reader reads out for an element.

What queries catch:

• getByRole('button', { name: /save/i }) only succeeds if the element really has the button role and a name. So a clickable div, or an icon button with no label, fails the test.
• getByLabelText fails when a label isn't linked to its input.

jest-dom adds matchers that check accessibility state:

• toHaveAccessibleName checks the accessible name.
• toHaveAccessibleDescription checks hints linked with aria-describedby.
• toBeInvalid checks aria-invalid.
• toBeDisabled checks the disabled state.
• toHaveFocus checks focus management.

Using user-event's keyboard API tests that the UI works without a mouse.

You can also run automated checkers such as axe in tests. But they find only part of the issues. Real assistive-technology checks and E2E tests still matter.