ARIA roles are attributes that define what an element is or does.

Many HTML elements have an implicit ARIA role. For example:

• <button> has role "button",
• <nav> has "navigation",
• <input type="checkbox"> has "checkbox".
• Note: Some (like <div>/<span>) have no implicit role.

You can also explicitly set roles using the role attribute, like <div role="button">.

React Testing Library's ByRole queries are powerful because they let you query for elements the way real users and assistive technologies perceive them.

Basically: when you query by role, you're testing that your rendered UI is semantically correct and accessible.

The basic use is something simple like screen.getByRole('button'). But there are tons of options that are worth learning when it comes to the ByRole query, such as name, busy, hidden and more.

Because the ByRole query has so many configuration options, this lesson is split into two.

• The first one (this one) covers the common ways you will actually use ByRole,
• and the second lesson will cover all the other options (which are far less commonly used).