diff --git a/docs/queries/byrole.mdx b/docs/queries/byrole.mdx index 265d741d1..602914c40 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,69 @@ 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('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' } })`. + +Given the example below, + +```html + +
+ + +
+ +``` + +you can query specific spinbutton(s) with the following queries, + +```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