From f96e3259f1c665fb0ee44ec24f6b5cd30e18b0c3 Mon Sep 17 00:00:00 2001 From: Diego Soliz Date: Thu, 21 Nov 2024 09:34:55 +1100 Subject: [PATCH 1/6] add aria required prop --- README.md | 1 + src/Handles/Handle.tsx | 2 ++ src/Slider.tsx | 4 ++++ src/context.ts | 1 + tests/Slider.test.js | 8 ++++++++ 5 files changed, 16 insertions(+) diff --git a/README.md b/README.md index b3b11271f..a07b20647 100644 --- a/README.md +++ b/README.md @@ -132,6 +132,7 @@ The following APIs are shared by Slider and Range. | tabIndex | number | `0` | Set the tabIndex of the slider handle. | | ariaLabelForHandle | string | - | Set the `aria-label` attribute on the slider handle. | | ariaLabelledByForHandle | string | - | Set the `aria-labelledby` attribute on the slider handle. | +| ariaEequired | string | - | Set the `aria-required` attribute on the slider handle. | | ariaValueTextFormatterForHandle | (value) => string | - | A function to set the `aria-valuetext` attribute on the slider handle. It receives the current value of the slider and returns a formatted string describing the value. See [WAI-ARIA Authoring Practices 1.1](https://www.w3.org/TR/wai-aria-practices-1.1/#slider) for more information. | ### Range diff --git a/src/Handles/Handle.tsx b/src/Handles/Handle.tsx index 1a54f6ccd..ca55db81d 100644 --- a/src/Handles/Handle.tsx +++ b/src/Handles/Handle.tsx @@ -61,6 +61,7 @@ const Handle = React.forwardRef((props, ref) => { tabIndex, ariaLabelForHandle, ariaLabelledByForHandle, + ariaRequired, ariaValueTextFormatterForHandle, styles, classNames, @@ -168,6 +169,7 @@ const Handle = React.forwardRef((props, ref) => { 'aria-disabled': disabled, 'aria-label': getIndex(ariaLabelForHandle, valueIndex), 'aria-labelledby': getIndex(ariaLabelledByForHandle, valueIndex), + 'aria-required': getIndex(ariaRequired, valueIndex), 'aria-valuetext': getIndex(ariaValueTextFormatterForHandle, valueIndex)?.(value), 'aria-orientation': direction === 'ltr' || direction === 'rtl' ? 'horizontal' : 'vertical', onMouseDown: onInternalStartMove, diff --git a/src/Slider.tsx b/src/Slider.tsx index cc0ecb888..b6632f332 100644 --- a/src/Slider.tsx +++ b/src/Slider.tsx @@ -112,6 +112,7 @@ export interface SliderProps { tabIndex?: number | number[]; ariaLabelForHandle?: string | string[]; ariaLabelledByForHandle?: string | string[]; + ariaRequired?: "true" | "false"; ariaValueTextFormatterForHandle?: AriaValueFormat | AriaValueFormat[]; } @@ -180,6 +181,7 @@ const Slider = React.forwardRef>((prop tabIndex = 0, ariaLabelForHandle, ariaLabelledByForHandle, + ariaRequired, ariaValueTextFormatterForHandle, } = props; @@ -542,6 +544,7 @@ const Slider = React.forwardRef>((prop tabIndex, ariaLabelForHandle, ariaLabelledByForHandle, + ariaRequired, ariaValueTextFormatterForHandle, styles: styles || {}, classNames: classNames || {}, @@ -560,6 +563,7 @@ const Slider = React.forwardRef>((prop tabIndex, ariaLabelForHandle, ariaLabelledByForHandle, + ariaRequired, ariaValueTextFormatterForHandle, styles, classNames, diff --git a/src/context.ts b/src/context.ts index 0e3269861..5ca4fdf3b 100644 --- a/src/context.ts +++ b/src/context.ts @@ -15,6 +15,7 @@ export interface SliderContextProps { tabIndex: number | number[]; ariaLabelForHandle?: string | string[]; ariaLabelledByForHandle?: string | string[]; + ariaRequired?: "true" | "false"; ariaValueTextFormatterForHandle?: AriaValueFormat | AriaValueFormat[]; classNames: SliderClassNames; styles: SliderStyles; diff --git a/tests/Slider.test.js b/tests/Slider.test.js index b80f3fd8c..f7146b64e 100644 --- a/tests/Slider.test.js +++ b/tests/Slider.test.js @@ -441,6 +441,14 @@ describe('Slider', () => { ); }); + it('sets aria-required on the handle', () => { + const { container } = render(); + expect(container.getElementsByClassName('rc-slider-handle')[0]).toHaveAttribute( + 'aria-required', + 'true', + ); + }); + it('sets aria-valuetext on the handle', () => { const { container } = render( Date: Mon, 25 Nov 2024 09:56:24 +1100 Subject: [PATCH 2/6] Update README.md Co-authored-by: afc163 --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index a07b20647..ac52b7cab 100644 --- a/README.md +++ b/README.md @@ -132,7 +132,7 @@ The following APIs are shared by Slider and Range. | tabIndex | number | `0` | Set the tabIndex of the slider handle. | | ariaLabelForHandle | string | - | Set the `aria-label` attribute on the slider handle. | | ariaLabelledByForHandle | string | - | Set the `aria-labelledby` attribute on the slider handle. | -| ariaEequired | string | - | Set the `aria-required` attribute on the slider handle. | +| ariaRequired | string | - | Set the `aria-required` attribute on the slider handle. | | ariaValueTextFormatterForHandle | (value) => string | - | A function to set the `aria-valuetext` attribute on the slider handle. It receives the current value of the slider and returns a formatted string describing the value. See [WAI-ARIA Authoring Practices 1.1](https://www.w3.org/TR/wai-aria-practices-1.1/#slider) for more information. | ### Range From 0ada3fc69cb56847a15a4715ca13f9d38e2ffb32 Mon Sep 17 00:00:00 2001 From: Diego Soliz Date: Tue, 26 Nov 2024 09:51:49 +1100 Subject: [PATCH 3/6] Update src/Slider.tsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> --- src/Slider.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Slider.tsx b/src/Slider.tsx index b6632f332..c8d61c65f 100644 --- a/src/Slider.tsx +++ b/src/Slider.tsx @@ -112,7 +112,7 @@ export interface SliderProps { tabIndex?: number | number[]; ariaLabelForHandle?: string | string[]; ariaLabelledByForHandle?: string | string[]; - ariaRequired?: "true" | "false"; + ariaRequired?: boolean; ariaValueTextFormatterForHandle?: AriaValueFormat | AriaValueFormat[]; } From 26826ed88bc8767fb452ce7b5c19a2b608ea78e1 Mon Sep 17 00:00:00 2001 From: Diego Soliz Date: Wed, 27 Nov 2024 08:53:37 +1100 Subject: [PATCH 4/6] Update src/context.ts Co-authored-by: afc163 --- src/context.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/context.ts b/src/context.ts index 5ca4fdf3b..9a0901c7a 100644 --- a/src/context.ts +++ b/src/context.ts @@ -15,7 +15,7 @@ export interface SliderContextProps { tabIndex: number | number[]; ariaLabelForHandle?: string | string[]; ariaLabelledByForHandle?: string | string[]; - ariaRequired?: "true" | "false"; + ariaRequired?: boolean; ariaValueTextFormatterForHandle?: AriaValueFormat | AriaValueFormat[]; classNames: SliderClassNames; styles: SliderStyles; From 091dc0c34cea74e39b4f2da2ad868c7222e5f9ee Mon Sep 17 00:00:00 2001 From: Diego Soliz Date: Thu, 28 Nov 2024 09:54:59 +1100 Subject: [PATCH 5/6] Update README.md Co-authored-by: afc163 --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index ac52b7cab..a59a07b50 100644 --- a/README.md +++ b/README.md @@ -132,7 +132,7 @@ The following APIs are shared by Slider and Range. | tabIndex | number | `0` | Set the tabIndex of the slider handle. | | ariaLabelForHandle | string | - | Set the `aria-label` attribute on the slider handle. | | ariaLabelledByForHandle | string | - | Set the `aria-labelledby` attribute on the slider handle. | -| ariaRequired | string | - | Set the `aria-required` attribute on the slider handle. | +| ariaRequired | boolean | - | Set the `aria-required` attribute on the slider handle. | | ariaValueTextFormatterForHandle | (value) => string | - | A function to set the `aria-valuetext` attribute on the slider handle. It receives the current value of the slider and returns a formatted string describing the value. See [WAI-ARIA Authoring Practices 1.1](https://www.w3.org/TR/wai-aria-practices-1.1/#slider) for more information. | ### Range From f82b3989b28556e927273080fc1f5a08e8f42d39 Mon Sep 17 00:00:00 2001 From: Diego Soliz Date: Thu, 28 Nov 2024 09:55:12 +1100 Subject: [PATCH 6/6] Update tests/Slider.test.js Co-authored-by: afc163 --- tests/Slider.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/Slider.test.js b/tests/Slider.test.js index f7146b64e..41ffcfe1c 100644 --- a/tests/Slider.test.js +++ b/tests/Slider.test.js @@ -442,7 +442,7 @@ describe('Slider', () => { }); it('sets aria-required on the handle', () => { - const { container } = render(); + const { container } = render(); expect(container.getElementsByClassName('rc-slider-handle')[0]).toHaveAttribute( 'aria-required', 'true',