diff --git a/README.md b/README.md index b3b11271f..a59a07b50 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. | +| 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 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..c8d61c65f 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?: boolean; 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..9a0901c7a 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?: boolean; ariaValueTextFormatterForHandle?: AriaValueFormat | AriaValueFormat[]; classNames: SliderClassNames; styles: SliderStyles; diff --git a/tests/Slider.test.js b/tests/Slider.test.js index b80f3fd8c..41ffcfe1c 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(