Description
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.