Skip to content

Intellisense with getByRole #666

Closed
@timdeschryver

Description

@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:

image

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:

Metadata

Metadata

Assignees

No one assigned

    Labels

    documentationAn update needs to be made to documentationenhancementNew feature or requestreleased

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions