A React interface must be understandable and usable beyond its visual presentation. WAI-ARIA defines roles that help describe web elements for nonvisual interaction. Many elements have implicit roles: an anchor is a link, a list item is a listitem, and a button is a button. Elements also have accessible names, which may come from text or, for an image, its alternative text. section 10.1
Listing 10.1 Unit-testing MenuItem
import { #1
render, #1
screen, #1
getByRole, #1
} from "@testing-library/react"; #1
import "@testing-library/jest-dom"; #2
import MenuItem from "./MenuItem"; #3
test( #4
"MenuItem renders a link in a list item", #4
() => { #4
// ARRANGE
render(<MenuItem href="/blog" label="Blog" />); #5
// ASSERT
const listItem = screen.getByRole("listitem"); #6
const link = getByRole(listItem, "link"); #6
expect(link).toHaveAttribute("href", "/blog"); #7
expect(link).toHaveAttribute("title", "Blog"); #7
expect(link).toHaveTextContent("Blog"); #7
});
The MenuItem test renders a React component, finds its list item and nested link by role, then checks the link’s destination, title, and text. Role queries target the element as a user or assistive technology would identify it, rather than relying on a class name or tag selector. section 10.1
Role-based tests are a useful check, not a complete accessibility review. Even components that address WAI-ARIA guidance, aria-* properties, screen readers, and keyboard access can leave substantial gaps: section 10.1 section 13.3
For a reusable UI library, check whether components also:
- Can be translated and behave correctly in right-to-left writing modes. section 13.3
- Respect prefers-color-scheme, prefers-reduced-motion, and device high-contrast settings. section 13.3
- Scale when the user increases the browser font size. section 13.3
Tooling can help, but it does not replace those checks. React Aria is an accessibility toolbox within the React Spectrum family, alongside the React Spectrum UI library and React Stately state-flow library. Choose tools in the context of the components and behaviours you need to support. section 1.4.1 section 13.3
