Skip to content

Commit 9ae9244

Browse files
timdeschryvertimdeschryver
authored
feat: add allowed roles to role query types (#670)
1 parent 639294c commit 9ae9244

File tree

4 files changed

+196
-125
lines changed

4 files changed

+196
-125
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@
3939
],
4040
"dependencies": {
4141
"@babel/runtime": "^7.10.3",
42+
"@types/aria-query": "^4.2.0",
4243
"aria-query": "^4.2.2",
4344
"dom-accessibility-api": "^0.4.5",
4445
"pretty-format": "^25.5.0"

‎types/__tests__/type-tests.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,9 @@ async function testByRole() {
113113
name === 'Login' && element.hasAttribute('disabled'),
114114
}) === null,
115115
)
116+
117+
// allow to query for a role that isn't included in the types
118+
console.assert(queryByRole(element, 'foo') === null)
116119
}
117120

118121
function testA11yHelper() {

‎types/queries.d.ts

Lines changed: 190 additions & 124 deletions
Original file line numberDiff line numberDiff line change
@@ -1,139 +1,205 @@
1-
import { Matcher, MatcherOptions } from './matches';
2-
import { SelectorMatcherOptions } from './query-helpers';
3-
import { waitForOptions } from './wait-for';
1+
import {Matcher, MatcherOptions} from './matches'
2+
import {SelectorMatcherOptions} from './query-helpers'
3+
import {waitForOptions} from './wait-for'
4+
import {ARIARole} from 'aria-query'
45

56
export type QueryByBoundAttribute = (
6-
container: HTMLElement,
7-
id: Matcher,
8-
options?: MatcherOptions,
9-
) => HTMLElement | null;
7+
container: HTMLElement,
8+
id: Matcher,
9+
options?: MatcherOptions,
10+
) => HTMLElement | null
1011

11-
export type AllByBoundAttribute = (container: HTMLElement, id: Matcher, options?: MatcherOptions) => HTMLElement[];
12+
export type AllByBoundAttribute = (
13+
container: HTMLElement,
14+
id: Matcher,
15+
options?: MatcherOptions,
16+
) => HTMLElement[]
1217

1318
export type FindAllByBoundAttribute = (
14-
container: HTMLElement,
15-
id: Matcher,
16-
options?: MatcherOptions,
17-
waitForElementOptions?: waitForOptions,
18-
) => Promise<HTMLElement[]>;
19-
20-
export type GetByBoundAttribute = (container: HTMLElement, id: Matcher, options?: MatcherOptions) => HTMLElement;
19+
container: HTMLElement,
20+
id: Matcher,
21+
options?: MatcherOptions,
22+
waitForElementOptions?: waitForOptions,
23+
) => Promise<HTMLElement[]>
24+
25+
export type GetByBoundAttribute = (
26+
container: HTMLElement,
27+
id: Matcher,
28+
options?: MatcherOptions,
29+
) => HTMLElement
2130

2231
export type FindByBoundAttribute = (
23-
container: HTMLElement,
24-
id: Matcher,
25-
options?: MatcherOptions,
26-
waitForElementOptions?: waitForOptions,
27-
) => Promise<HTMLElement>;
28-
29-
export type QueryByText = (container: HTMLElement, id: Matcher, options?: SelectorMatcherOptions) => HTMLElement | null;
30-
31-
export type AllByText = (container: HTMLElement, id: Matcher, options?: SelectorMatcherOptions) => HTMLElement[];
32+
container: HTMLElement,
33+
id: Matcher,
34+
options?: MatcherOptions,
35+
waitForElementOptions?: waitForOptions,
36+
) => Promise<HTMLElement>
37+
38+
export type QueryByText = (
39+
container: HTMLElement,
40+
id: Matcher,
41+
options?: SelectorMatcherOptions,
42+
) => HTMLElement | null
43+
44+
export type AllByText = (
45+
container: HTMLElement,
46+
id: Matcher,
47+
options?: SelectorMatcherOptions,
48+
) => HTMLElement[]
3249

3350
export type FindAllByText = (
34-
container: HTMLElement,
35-
id: Matcher,
36-
options?: SelectorMatcherOptions,
37-
waitForElementOptions?: waitForOptions,
38-
) => Promise<HTMLElement[]>;
39-
40-
export type GetByText = (container: HTMLElement, id: Matcher, options?: SelectorMatcherOptions) => HTMLElement;
51+
container: HTMLElement,
52+
id: Matcher,
53+
options?: SelectorMatcherOptions,
54+
waitForElementOptions?: waitForOptions,
55+
) => Promise<HTMLElement[]>
56+
57+
export type GetByText = (
58+
container: HTMLElement,
59+
id: Matcher,
60+
options?: SelectorMatcherOptions,
61+
) => HTMLElement
4162

4263
export type FindByText = (
43-
container: HTMLElement,
44-
id: Matcher,
45-
options?: SelectorMatcherOptions,
46-
waitForElementOptions?: waitForOptions,
47-
) => Promise<HTMLElement>;
64+
container: HTMLElement,
65+
id: Matcher,
66+
options?: SelectorMatcherOptions,
67+
waitForElementOptions?: waitForOptions,
68+
) => Promise<HTMLElement>
4869

4970
export interface ByRoleOptions extends MatcherOptions {
50-
/**
51-
* If true includes elements in the query set that are usually excluded from
52-
* the accessibility tree. `role="none"` or `role="presentation"` are included
53-
* in either case.
54-
*/
55-
hidden?: boolean;
56-
/**
57-
* If true only includes elements in the query set that are marked as
58-
* selected in the accessibility tree, i.e., `aria-selected="true"`
59-
*/
60-
selected?: boolean;
61-
/**
62-
* Includes every role used in the `role` attribute
63-
* For example *ByRole('progressbar', {queryFallbacks: true})` will find <div role="meter progressbar">`.
64-
*/
65-
queryFallbacks?: boolean;
66-
/**
67-
* Only considers elements with the specified accessible name.
68-
*/
69-
name?: string | RegExp | ((accessibleName: string, element: Element) => boolean);
71+
/**
72+
* If true includes elements in the query set that are usually excluded from
73+
* the accessibility tree. `role="none"` or `role="presentation"` are included
74+
* in either case.
75+
*/
76+
hidden?: boolean
77+
/**
78+
* If true only includes elements in the query set that are marked as
79+
* selected in the accessibility tree, i.e., `aria-selected="true"`
80+
*/
81+
selected?: boolean
82+
/**
83+
* Includes every role used in the `role` attribute
84+
* For example *ByRole('progressbar', {queryFallbacks: true})` will find <div role="meter progressbar">`.
85+
*/
86+
queryFallbacks?: boolean
87+
/**
88+
* Only considers elements with the specified accessible name.
89+
*/
90+
name?:
91+
| string
92+
| RegExp
93+
| ((accessibleName: string, element: Element) => boolean)
7094
}
7195

72-
export type AllByRole = (container: HTMLElement, role: Matcher, options?: ByRoleOptions) => HTMLElement[];
73-
74-
export type GetByRole = (container: HTMLElement, role: Matcher, options?: ByRoleOptions) => HTMLElement;
75-
76-
export type QueryByRole = (container: HTMLElement, role: Matcher, options?: ByRoleOptions) => HTMLElement | null;
77-
78-
export type FindByRole = (
79-
container: HTMLElement,
80-
role: Matcher,
81-
options?: ByRoleOptions,
82-
waitForElementOptions?: waitForOptions,
83-
) => Promise<HTMLElement>;
84-
85-
export type FindAllByRole = (
86-
container: HTMLElement,
87-
role: Matcher,
88-
options?: ByRoleOptions,
89-
waitForElementOptions?: waitForOptions,
90-
) => Promise<HTMLElement[]>;
91-
92-
export const getByLabelText: GetByText;
93-
export const getAllByLabelText: AllByText;
94-
export const queryByLabelText: QueryByText;
95-
export const queryAllByLabelText: AllByText;
96-
export const findByLabelText: FindByText;
97-
export const findAllByLabelText: FindAllByText;
98-
export const getByPlaceholderText: GetByBoundAttribute;
99-
export const getAllByPlaceholderText: AllByBoundAttribute;
100-
export const queryByPlaceholderText: QueryByBoundAttribute;
101-
export const queryAllByPlaceholderText: AllByBoundAttribute;
102-
export const findByPlaceholderText: FindByBoundAttribute;
103-
export const findAllByPlaceholderText: FindAllByBoundAttribute;
104-
export const getByText: GetByText;
105-
export const getAllByText: AllByText;
106-
export const queryByText: QueryByText;
107-
export const queryAllByText: AllByText;
108-
export const findByText: FindByText;
109-
export const findAllByText: FindAllByText;
110-
export const getByAltText: GetByBoundAttribute;
111-
export const getAllByAltText: AllByBoundAttribute;
112-
export const queryByAltText: QueryByBoundAttribute;
113-
export const queryAllByAltText: AllByBoundAttribute;
114-
export const findByAltText: FindByBoundAttribute;
115-
export const findAllByAltText: FindAllByBoundAttribute;
116-
export const getByTitle: GetByBoundAttribute;
117-
export const getAllByTitle: AllByBoundAttribute;
118-
export const queryByTitle: QueryByBoundAttribute;
119-
export const queryAllByTitle: AllByBoundAttribute;
120-
export const findByTitle: FindByBoundAttribute;
121-
export const findAllByTitle: FindAllByBoundAttribute;
122-
export const getByDisplayValue: GetByBoundAttribute;
123-
export const getAllByDisplayValue: AllByBoundAttribute;
124-
export const queryByDisplayValue: QueryByBoundAttribute;
125-
export const queryAllByDisplayValue: AllByBoundAttribute;
126-
export const findByDisplayValue: FindByBoundAttribute;
127-
export const findAllByDisplayValue: FindAllByBoundAttribute;
128-
export const getByRole: GetByRole;
129-
export const getAllByRole: AllByRole;
130-
export const queryByRole: QueryByRole;
131-
export const queryAllByRole: AllByRole;
132-
export const findByRole: FindByRole;
133-
export const findAllByRole: FindAllByRole;
134-
export const getByTestId: GetByBoundAttribute;
135-
export const getAllByTestId: AllByBoundAttribute;
136-
export const queryByTestId: QueryByBoundAttribute;
137-
export const queryAllByTestId: AllByBoundAttribute;
138-
export const findByTestId: FindByBoundAttribute;
139-
export const findAllByTestId: FindAllByBoundAttribute;
96+
// disable unified-signatures to have intellisense for aria roles
97+
/* tslint:disable:unified-signatures */
98+
export function AllByRole(
99+
container: HTMLElement,
100+
role: Matcher,
101+
options?: ByRoleOptions,
102+
): HTMLElement[]
103+
export function AllByRole(
104+
container: HTMLElement,
105+
role: ARIARole,
106+
options?: ByRoleOptions,
107+
): HTMLElement[]
108+
109+
export function GetByRole(
110+
container: HTMLElement,
111+
role: Matcher,
112+
options?: ByRoleOptions,
113+
): HTMLElement
114+
export function GetByRole(
115+
container: HTMLElement,
116+
role: ARIARole,
117+
options?: ByRoleOptions,
118+
): HTMLElement
119+
120+
export function QueryByRole(
121+
container: HTMLElement,
122+
role: Matcher | ByRoleOptions,
123+
options?: ByRoleOptions,
124+
): HTMLElement | null
125+
export function QueryByRole(
126+
container: HTMLElement,
127+
role: ARIARole,
128+
options?: ByRoleOptions,
129+
): HTMLElement | null
130+
131+
export function FindByRole(
132+
container: HTMLElement,
133+
role: Matcher,
134+
options?: ByRoleOptions,
135+
waitForElementOptions?: waitForOptions,
136+
): Promise<HTMLElement>
137+
export function FindByRole(
138+
container: HTMLElement,
139+
role: ARIARole,
140+
options?: ByRoleOptions,
141+
waitForElementOptions?: waitForOptions,
142+
): Promise<HTMLElement>
143+
144+
export function FindAllByRole(
145+
container: HTMLElement,
146+
role: Matcher,
147+
options?: ByRoleOptions,
148+
waitForElementOptions?: waitForOptions,
149+
): Promise<HTMLElement[]>
150+
export function FindAllByRole(
151+
container: HTMLElement,
152+
role: Matcher,
153+
options?: ByRoleOptions,
154+
waitForElementOptions?: waitForOptions,
155+
): Promise<HTMLElement[]>
156+
/* tslint:enable */
157+
158+
export const getByLabelText: GetByText
159+
export const getAllByLabelText: AllByText
160+
export const queryByLabelText: QueryByText
161+
export const queryAllByLabelText: AllByText
162+
export const findByLabelText: FindByText
163+
export const findAllByLabelText: FindAllByText
164+
export const getByPlaceholderText: GetByBoundAttribute
165+
export const getAllByPlaceholderText: AllByBoundAttribute
166+
export const queryByPlaceholderText: QueryByBoundAttribute
167+
export const queryAllByPlaceholderText: AllByBoundAttribute
168+
export const findByPlaceholderText: FindByBoundAttribute
169+
export const findAllByPlaceholderText: FindAllByBoundAttribute
170+
export const getByText: GetByText
171+
export const getAllByText: AllByText
172+
export const queryByText: QueryByText
173+
export const queryAllByText: AllByText
174+
export const findByText: FindByText
175+
export const findAllByText: FindAllByText
176+
export const getByAltText: GetByBoundAttribute
177+
export const getAllByAltText: AllByBoundAttribute
178+
export const queryByAltText: QueryByBoundAttribute
179+
export const queryAllByAltText: AllByBoundAttribute
180+
export const findByAltText: FindByBoundAttribute
181+
export const findAllByAltText: FindAllByBoundAttribute
182+
export const getByTitle: GetByBoundAttribute
183+
export const getAllByTitle: AllByBoundAttribute
184+
export const queryByTitle: QueryByBoundAttribute
185+
export const queryAllByTitle: AllByBoundAttribute
186+
export const findByTitle: FindByBoundAttribute
187+
export const findAllByTitle: FindAllByBoundAttribute
188+
export const getByDisplayValue: GetByBoundAttribute
189+
export const getAllByDisplayValue: AllByBoundAttribute
190+
export const queryByDisplayValue: QueryByBoundAttribute
191+
export const queryAllByDisplayValue: AllByBoundAttribute
192+
export const findByDisplayValue: FindByBoundAttribute
193+
export const findAllByDisplayValue: FindAllByBoundAttribute
194+
export const getByRole: typeof GetByRole
195+
export const getAllByRole: typeof AllByRole
196+
export const queryByRole: typeof QueryByRole
197+
export const queryAllByRole: typeof AllByRole
198+
export const findByRole: typeof FindByRole
199+
export const findAllByRole: typeof FindAllByRole
200+
export const getByTestId: GetByBoundAttribute
201+
export const getAllByTestId: AllByBoundAttribute
202+
export const queryByTestId: QueryByBoundAttribute
203+
export const queryAllByTestId: AllByBoundAttribute
204+
export const findByTestId: FindByBoundAttribute
205+
export const findAllByTestId: FindAllByBoundAttribute

‎types/tslint.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"rules": {
44
"no-useless-files": false,
55
"no-relative-import-in-test": false,
6-
"semicolon": false
6+
"semicolon": false,
7+
"whitespace": false
78
}
89
}

0 commit comments

Comments
 (0)