From 75430d86f65028106241c26f09fcbfcec078962f Mon Sep 17 00:00:00 2001 From: Jared Luxenberg Date: Thu, 6 Aug 2020 11:11:56 -0700 Subject: [PATCH 1/2] docs(ByRole): Add `{ pressed: boolean }` option for querying by aria-pressed state --- docs/dom-testing-library/api-queries.md | 36 ++++++++++++++++++++++--- 1 file changed, 32 insertions(+), 4 deletions(-) diff --git a/docs/dom-testing-library/api-queries.md b/docs/dom-testing-library/api-queries.md index dc9bf1e1a..24a64c92b 100644 --- a/docs/dom-testing-library/api-queries.md +++ b/docs/dom-testing-library/api-queries.md @@ -617,6 +617,7 @@ getByRole( normalizer?: NormalizerFn, selected?: boolean, checked?: boolean, + pressed?: boolean, queryFallbacks?: boolean, }): HTMLElement ``` @@ -677,8 +678,12 @@ assertions about the `Open dialog`-button you would need to use The default value for `hidden` can [be configured](api-configuration#configuration). -Certain roles can have a selected state. You can filter the returned elements by -their selected state by setting `selected: true` or `selected: false`. +#### Querying by ARIA states + +##### `aria-selected` + +You can filter the returned elements by their selected state by setting +`selected: true` or `selected: false`. For example in @@ -696,8 +701,10 @@ you can get the "Native"-tab by calling `getByRole('tab', { selected: true })`. To learn more about the selected state and which elements can have this state see [ARIA `aria-selected`](https://www.w3.org/TR/wai-aria-1.2/#aria-selected). -Certain roles can have a checked state. You can filter the returned elements by -their checked state by setting `checked: true` or `checked: false`. +##### `aria-checked` + +You can filter the returned elements by their checked state by setting +`checked: true` or `checked: false`. For example in @@ -720,6 +727,27 @@ state and which elements can have this state see > nor unchecked (details > [here](https://www.w3.org/TR/html-aam-1.0/#details-id-56)). +##### `aria-pressed` + +Buttons can have a pressed state. You can filter the returned elements by +their pressed state by setting `pressed: true` or `pressed: false`. + +For example in + +```html + +
+ + +
+ +``` + +you can get the "👍" button by calling +`getByRole('button', { pressed: true })`. To learn more about the pressed +state see +[ARIA `aria-pressed`](https://www.w3.org/TR/wai-aria-1.2/#aria-pressed). + ```html
...
``` From e0f8877d9a06f45603ce762c2da41823f9710cda Mon Sep 17 00:00:00 2001 From: Jared Luxenberg Date: Thu, 6 Aug 2020 11:20:27 -0700 Subject: [PATCH 2/2] remove aria- specificity in headings per @eps1lon --- docs/dom-testing-library/api-queries.md | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/docs/dom-testing-library/api-queries.md b/docs/dom-testing-library/api-queries.md index 24a64c92b..276a1b3db 100644 --- a/docs/dom-testing-library/api-queries.md +++ b/docs/dom-testing-library/api-queries.md @@ -678,9 +678,7 @@ assertions about the `Open dialog`-button you would need to use The default value for `hidden` can [be configured](api-configuration#configuration). -#### Querying by ARIA states - -##### `aria-selected` +#### `selected` You can filter the returned elements by their selected state by setting `selected: true` or `selected: false`. @@ -701,7 +699,7 @@ you can get the "Native"-tab by calling `getByRole('tab', { selected: true })`. To learn more about the selected state and which elements can have this state see [ARIA `aria-selected`](https://www.w3.org/TR/wai-aria-1.2/#aria-selected). -##### `aria-checked` +#### `checked` You can filter the returned elements by their checked state by setting `checked: true` or `checked: false`. @@ -727,7 +725,7 @@ state and which elements can have this state see > nor unchecked (details > [here](https://www.w3.org/TR/html-aam-1.0/#details-id-56)). -##### `aria-pressed` +#### `pressed` Buttons can have a pressed state. You can filter the returned elements by their pressed state by setting `pressed: true` or `pressed: false`.