Dom-testing-library: Intellisense with getByRole

[timdeschryver]

Describe the feature you'd like:

I got the feeling that we could make it easier to use the getByRole queries.
From what I can see not all developers know (all of) the WAI-ARIA Roles.
The suggestions and the playground are definitely helping, but I think it would be nice if we can type the roles so that the IDE can pick them up and suggest them (shorter feedback loop).

Suggested implementation:

Add a ByRoleMatcher that includes all of the ARIA Roles, and use this type in the byRole queries.

export type ByRoleMatcher =  'button' | 'listitem' | 'textbox' | String | RegExp | MatcherFunction

export type AllByRole = (container: HTMLElement, role: ByRoleMatcher, options?: ByRoleOptions) => HTMLElement[];
export type GetByRole = (container: HTMLElement, role: ByRoleMatcher, options?: ByRoleOptions) => HTMLElement;
export type QueryByRole = (container: HTMLElement, role: ByRoleMatcher, options?: ByRoleOptions) => HTMLElement | null;

This won't be a breaking change because the user would still have the possibility to use a role that isn't included in the type.

This looks like this:

Describe alternatives you've considered:

It's important to use String while defining the type, otherwise it will either result that the passed role must be one of the options, or that there won't be any intellisense. That's also the reason why it isn't possible to reuse the existing Matcher type (e.g. export type ByRoleMatcher = Matcher | 'button' | 'listitem' | 'textbox')

See the TS playground for examples.

Teachability, Documentation, Adoption, Migration Strategy:

[kentcdodds]

Let's do it 👍

[marcosvega91]

It will be very helpful 👯

[eps1lon]

The types for aria-query list all supported roles. Though I think we need to allow any string regardless. Not sure if vscode will still display all string literals if you have AllowedRoles | string;

[timdeschryver]

@eps1lon it does, if String is used. See the TS playground in the issue description.

[kentcdodds]

:tada: This issue has been resolved in version 7.20.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: