feat: add aria required prop to slider (#1051)

Co-authored-by: afc163 <afc163@gmail.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

Author: 3 people

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

src/Handles/Handle.tsx

@@ -61,6 +61,7 @@ const Handle = React.forwardRef<HTMLDivElement, HandleProps>((props, ref) => {
     tabIndex,
     ariaLabelForHandle,
     ariaLabelledByForHandle,
+    ariaRequired,
     ariaValueTextFormatterForHandle,
     styles,
     classNames,
@@ -168,6 +169,7 @@ const Handle = React.forwardRef<HTMLDivElement, HandleProps>((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,

src/Slider.tsx

@@ -112,6 +112,7 @@ export interface SliderProps<ValueType = number | number[]> {
   tabIndex?: number | number[];
   ariaLabelForHandle?: string | string[];
   ariaLabelledByForHandle?: string | string[];
+  ariaRequired?: boolean;
   ariaValueTextFormatterForHandle?: AriaValueFormat | AriaValueFormat[];
 }
 
@@ -180,6 +181,7 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
     tabIndex = 0,
     ariaLabelForHandle,
     ariaLabelledByForHandle,
+    ariaRequired,
     ariaValueTextFormatterForHandle,
   } = props;
 
@@ -542,6 +544,7 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
       tabIndex,
       ariaLabelForHandle,
       ariaLabelledByForHandle,
+      ariaRequired,
       ariaValueTextFormatterForHandle,
       styles: styles || {},
       classNames: classNames || {},
@@ -560,6 +563,7 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
       tabIndex,
       ariaLabelForHandle,
       ariaLabelledByForHandle,
+      ariaRequired,
       ariaValueTextFormatterForHandle,
       styles,
       classNames,

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;

tests/Slider.test.js

@@ -441,6 +441,14 @@ describe('Slider', () => {
     );
   });
 
+  it('sets aria-required on the handle', () => {
+    const { container } = render(<Slider ariaRequired={true} />);
+    expect(container.getElementsByClassName('rc-slider-handle')[0]).toHaveAttribute(
+      'aria-required',
+      'true',
+    );
+  });
+
   it('sets aria-valuetext on the handle', () => {
     const { container } = render(
       <Slider