From 017f401891c9ba0b6a6c736ac054d68cf16dad9e Mon Sep 17 00:00:00 2001 From: eps1lon Date: Thu, 9 Mar 2023 11:01:03 +0100 Subject: [PATCH 1/4] feat(ByRole): Allow filter by value state --- docs/queries/byrole.mdx | 70 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 70 insertions(+) diff --git a/docs/queries/byrole.mdx b/docs/queries/byrole.mdx index 265d741d1..2cd0fb44b 100644 --- a/docs/queries/byrole.mdx +++ b/docs/queries/byrole.mdx @@ -28,6 +28,12 @@ getByRole( expanded?: boolean, queryFallbacks?: boolean, level?: number, + value?: { + min?: number, + max?: number, + now?: number, + text?: TextMatch, + } }): HTMLElement ``` @@ -321,6 +327,70 @@ To learn more about the `aria-level` property, see > The `level` option is _only_ applicable to the `heading` role. An error will > be thrown when used with any other role. +### `value` + +A range widget can be queried by any value `getByRole('heading')` or by a +specific value using the `level` option +`getByRole('heading', { value: { now: 5, min: 0, max: 10, text: 'medium' } })`. + +Note that you don't have to specify all properties in `value`. A subset is +sufficient e.g. `getByRole('heading', { value: { now: 5, text: 'medium' } })`. + +Given the example below, + +```html + +
+ + +
+ +``` + +you can query the `Volume` spinbutton using +`getByRole('heading', { value: { now: 5 } })`. + +```js +getByRole('heading', {value: {now: 5}}) +// + +getAllByRole('heading', {value: {min: 0}}) +// [ +// >, +// +// ] +``` + +> Every specified property in `value` must match. For example, if you query for +> `{value: {min: 0, now: 3}}` `aria-valuemin` must be equal to 0 **AND** +> `aria-valuenow` must be equal to 3 + +> The `value` option is _only_ applicable to certain roles (check the linked MDN +> pages below for applicable roles). An error will be thrown when used with any +> other role. + +To learn more about the `aria-value*` properties, see +[MDN `aria-valuemin`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuemin), +[MDN `aria-valuemax`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuemax), +[MDN `aria-valuenow`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuenow), +[MDN `aria-valuetext`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuetext). + ### `description` You can filter the returned elements by their From f2c6c822d7386ae14e20931a38a70e781cbc1eae Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Fri, 24 Mar 2023 19:06:22 +0100 Subject: [PATCH 2/4] Update docs/queries/byrole.mdx Co-authored-by: Tim Deschryver <28659384+timdeschryver@users.noreply.github.com> --- docs/queries/byrole.mdx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/docs/queries/byrole.mdx b/docs/queries/byrole.mdx index 2cd0fb44b..8bf0caa83 100644 --- a/docs/queries/byrole.mdx +++ b/docs/queries/byrole.mdx @@ -363,8 +363,7 @@ Given the example below, ``` -you can query the `Volume` spinbutton using -`getByRole('heading', { value: { now: 5 } })`. +you can query specific spinbutton(s) with the following queries, ```js getByRole('heading', {value: {now: 5}}) From 901a272bc47b3406ea6a7bc8ac05e49e1fdd16b5 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Fri, 24 Mar 2023 19:06:36 +0100 Subject: [PATCH 3/4] Update docs/queries/byrole.mdx Co-authored-by: Matan Borenkraout --- docs/queries/byrole.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/queries/byrole.mdx b/docs/queries/byrole.mdx index 8bf0caa83..0e688d3dc 100644 --- a/docs/queries/byrole.mdx +++ b/docs/queries/byrole.mdx @@ -331,7 +331,7 @@ To learn more about the `aria-level` property, see A range widget can be queried by any value `getByRole('heading')` or by a specific value using the `level` option -`getByRole('heading', { value: { now: 5, min: 0, max: 10, text: 'medium' } })`. +`getByRole('spinbutton', { value: { now: 5, min: 0, max: 10, text: 'medium' } })`. Note that you don't have to specify all properties in `value`. A subset is sufficient e.g. `getByRole('heading', { value: { now: 5, text: 'medium' } })`. From 42a9b106cb98fe8bcdeadb830a8dca1debaabe69 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Fri, 24 Mar 2023 19:06:45 +0100 Subject: [PATCH 4/4] Update docs/queries/byrole.mdx Co-authored-by: Tim Deschryver <28659384+timdeschryver@users.noreply.github.com> --- docs/queries/byrole.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/queries/byrole.mdx b/docs/queries/byrole.mdx index 0e688d3dc..602914c40 100644 --- a/docs/queries/byrole.mdx +++ b/docs/queries/byrole.mdx @@ -371,7 +371,7 @@ getByRole('heading', {value: {now: 5}}) getAllByRole('heading', {value: {min: 0}}) // [ -// >, +// , // // ] ```