feat: support aria-describedby on handles (#1088)

Author: nrps9909

README.md

@@ -75,6 +75,7 @@ Then open `http://localhost:8000`.
 | `allowCross` | boolean | true | Allow handles to cross in range mode. |
 | `ariaLabelForHandle` | string \| string[] | - | `aria-label` for handle elements. |
 | `ariaLabelledByForHandle` | string \| string[] | - | `aria-labelledby` for handle elements. |
+| `ariaDescribedByForHandle` | string \| string[] | - | `aria-describedby` for handle elements. |
 | `ariaRequired` | boolean | - | `aria-required` for handle elements. |
 | `ariaValueTextFormatterForHandle` | `((value: number) => string) \| ((value: number) => string)[]` | - | Formatter for `aria-valuetext`. |
 | `autoFocus` | boolean | - | Focus the slider on mount. |

README.zh-CN.md

@@ -74,6 +74,7 @@ npm start
 | `allowCross` | boolean | true | 允许手柄在范围模式下交叉。 |
 | `ariaLabelForHandle` | string \| string[] | - | `aria-label` for handle elements. |
 | `ariaLabelledByForHandle` | string \| string[] | - | `aria-labelledby` for handle elements. |
+| `ariaDescribedByForHandle` | string \| string[] | - | 句柄元素的 `aria-describedby`。 |
 | `ariaRequired` | boolean | - | 句柄元素的 `aria-required`。 |
 | `ariaValueTextFormatterForHandle` | `((value: number) => string) \| ((value: number) => string)[]` | - | `aria-valuetext` 格式化函数。 |
 | `autoFocus` | boolean | - | 挂载后自动聚焦滑块。 |

src/Handles/Handle.tsx

@@ -60,6 +60,7 @@ const Handle = React.forwardRef<HTMLDivElement, HandleProps>((props, ref) => {
     tabIndex,
     ariaLabelForHandle,
     ariaLabelledByForHandle,
+    ariaDescribedByForHandle,
     ariaRequired,
     ariaValueTextFormatterForHandle,
     styles,
@@ -173,6 +174,7 @@ const Handle = React.forwardRef<HTMLDivElement, HandleProps>((props, ref) => {
       'aria-disabled': mergedDisabled,
       'aria-label': getIndex(ariaLabelForHandle, valueIndex),
       'aria-labelledby': getIndex(ariaLabelledByForHandle, valueIndex),
+      'aria-describedby': getIndex(ariaDescribedByForHandle, valueIndex),
       'aria-required': getIndex(ariaRequired, valueIndex),
       'aria-valuetext': getIndex(ariaValueTextFormatterForHandle, valueIndex)?.(value),
       'aria-orientation': direction === 'ltr' || direction === 'rtl' ? 'horizontal' : 'vertical',

src/Slider.tsx

@@ -107,6 +107,7 @@ export interface SliderProps<ValueType = number | number[]> {
   tabIndex?: number | number[];
   ariaLabelForHandle?: string | string[];
   ariaLabelledByForHandle?: string | string[];
+  ariaDescribedByForHandle?: string | string[];
   ariaRequired?: boolean;
   ariaValueTextFormatterForHandle?: AriaValueFormat | AriaValueFormat[];
 }
@@ -175,6 +176,7 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
     tabIndex = 0,
     ariaLabelForHandle,
     ariaLabelledByForHandle,
+    ariaDescribedByForHandle,
     ariaRequired,
     ariaValueTextFormatterForHandle,
   } = props;
@@ -565,6 +567,7 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
       tabIndex,
       ariaLabelForHandle,
       ariaLabelledByForHandle,
+      ariaDescribedByForHandle,
       ariaRequired,
       ariaValueTextFormatterForHandle,
       styles: styles || {},
@@ -585,6 +588,7 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
       tabIndex,
       ariaLabelForHandle,
       ariaLabelledByForHandle,
+      ariaDescribedByForHandle,
       ariaRequired,
       ariaValueTextFormatterForHandle,
       styles,

src/context.ts

@@ -15,6 +15,7 @@ export interface SliderContextProps {
   tabIndex: number | number[];
   ariaLabelForHandle?: string | string[];
   ariaLabelledByForHandle?: string | string[];
+  ariaDescribedByForHandle?: string | string[];
   ariaRequired?: boolean;
   ariaValueTextFormatterForHandle?: AriaValueFormat | AriaValueFormat[];
   classNames: SliderClassNames;

tests/Range.test.tsx

@@ -493,6 +493,20 @@ describe('Range', () => {
     );
   });
 
+  it('sets aria-describedby on the handles', () => {
+    const { container } = render(
+      <Slider range ariaDescribedByForHandle={['some_description', 'some_other_description']} />,
+    );
+    expect(container.getElementsByClassName('rc-slider-handle')[0]).toHaveAttribute(
+      'aria-describedby',
+      'some_description',
+    );
+    expect(container.getElementsByClassName('rc-slider-handle')[1]).toHaveAttribute(
+      'aria-describedby',
+      'some_other_description',
+    );
+  });
+
   it('sets aria-valuetext on the handles', () => {
     const { container } = render(
       <Slider

tests/Slider.test.js

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