WAI-ARIA specifies how web elements are structured, understood, and interacted with nonvisually. It defines roles, including implicit roles that markup can override, so assistive technologies and information services can interpret interfaces programmatically. section 10.1
Use roles as semantic interfaces rather than implementation details:
- Query elements by role instead of tag name, class name, or arbitrary attributes. section 10.1
- Treat accessible names as part of the interface contract when selecting or asserting elements. section 10.1
Testing a semantic component
A MenuItem rendered as a list item containing a link can be tested with screen.getByRole("listitem") and getByRole(listItem, "link"), then checked for its href, title, and visible 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
});
Runnable React Testing Library example using listitem and link roles. section 10.1
