feat: support aria-invalid on handles

README.md

@@ -77,6 +77,8 @@ Then open `http://localhost:8000`.
 | `ariaLabelledByForHandle` | string \| string[] | - | `aria-labelledby` for handle elements. |
 | `ariaDescribedByForHandle` | string \| string[] | - | `aria-describedby` for handle elements. |
 | `ariaRequired` | boolean | - | `aria-required` for handle elements. |
+| `ariaInvalid` | `AriaInvalid` | - | `aria-invalid` for handle elements. |
+| `ariaInvalidForHandle` | `AriaInvalid \| AriaInvalid[]` | - | `aria-invalid` for handle elements. Omitted entries fall back to `ariaInvalid`. |
 | `ariaValueTextFormatterForHandle` | `((value: number) => string) \| ((value: number) => string)[]` | - | Formatter for `aria-valuetext`. |
 | `autoFocus` | boolean | - | Focus the slider on mount. |
 | `className` | string | - | Additional class name. |

README.zh-CN.md

@@ -76,6 +76,8 @@ npm start
 | `ariaLabelledByForHandle` | string \| string[] | - | `aria-labelledby` for handle elements. |
 | `ariaDescribedByForHandle` | string \| string[] | - | 句柄元素的 `aria-describedby`。 |
 | `ariaRequired` | boolean | - | 句柄元素的 `aria-required`。 |
+| `ariaInvalid` | boolean | - | 句柄元素的 `aria-invalid`。 |
+| `ariaInvalidForHandle` | `AriaInvalid \| AriaInvalid[]` | - | 句柄元素的 `aria-invalid`。 |
 | `ariaValueTextFormatterForHandle` | `((value: number) => string) \| ((value: number) => string)[]` | - | `aria-valuetext` 格式化函数。 |
 | `autoFocus` | boolean | - | 挂载后自动聚焦滑块。 |
 | `className` | string | - | 附加 className。 |

src/Handles/Handle.tsx

@@ -62,6 +62,8 @@ const Handle = React.forwardRef<HTMLDivElement, HandleProps>((props, ref) => {
     ariaLabelledByForHandle,
     ariaDescribedByForHandle,
     ariaRequired,
+    ariaInvalid,
+    ariaInvalidForHandle,
     ariaValueTextFormatterForHandle,
     styles,
     classNames,
@@ -176,6 +178,7 @@ const Handle = React.forwardRef<HTMLDivElement, HandleProps>((props, ref) => {
       'aria-labelledby': getIndex(ariaLabelledByForHandle, valueIndex),
       'aria-describedby': getIndex(ariaDescribedByForHandle, valueIndex),
       'aria-required': getIndex(ariaRequired, valueIndex),
+      'aria-invalid': getIndex(ariaInvalidForHandle, valueIndex) ?? ariaInvalid,
       'aria-valuetext': getIndex(ariaValueTextFormatterForHandle, valueIndex)?.(value),
       'aria-orientation': direction === 'ltr' || direction === 'rtl' ? 'horizontal' : 'vertical',
       onMouseDown: onInternalStartMove,

src/Slider.tsx

@@ -17,6 +17,7 @@ import useDrag from './hooks/useDrag';
 import useOffset, { getClosestEnabledHandleIndex } from './hooks/useOffset';
 import useRange from './hooks/useRange';
 import type {
+  AriaInvalid,
   AriaValueFormat,
   Direction,
   OnStartMove,
@@ -115,6 +116,8 @@ export interface SliderProps<ValueType = number | number[]> {
   ariaLabelledByForHandle?: string | string[];
   ariaDescribedByForHandle?: string | string[];
   ariaRequired?: boolean;
+  ariaInvalid?: AriaInvalid;
+  ariaInvalidForHandle?: AriaInvalid | AriaInvalid[];
   ariaValueTextFormatterForHandle?: AriaValueFormat | AriaValueFormat[];
 }
 
@@ -184,6 +187,8 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
     ariaLabelledByForHandle,
     ariaDescribedByForHandle,
     ariaRequired,
+    ariaInvalid,
+    ariaInvalidForHandle,
     ariaValueTextFormatterForHandle,
   } = props;
 
@@ -594,6 +599,8 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
       ariaLabelledByForHandle,
       ariaDescribedByForHandle,
       ariaRequired,
+      ariaInvalid,
+      ariaInvalidForHandle,
       ariaValueTextFormatterForHandle,
       styles: styles || {},
       classNames: classNames || {},
@@ -615,6 +622,8 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
       ariaLabelledByForHandle,
       ariaDescribedByForHandle,
       ariaRequired,
+      ariaInvalid,
+      ariaInvalidForHandle,
       ariaValueTextFormatterForHandle,
       styles,
       classNames,

src/context.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { AriaValueFormat, Direction, SliderClassNames, SliderStyles } from './interface';
+import type { AriaInvalid, AriaValueFormat, Direction, SliderClassNames, SliderStyles } from './interface';
 
 export interface SliderContextProps {
   min: number;
@@ -17,6 +17,8 @@ export interface SliderContextProps {
   ariaLabelledByForHandle?: string | string[];
   ariaDescribedByForHandle?: string | string[];
   ariaRequired?: boolean;
+  ariaInvalid?: AriaInvalid;
+  ariaInvalidForHandle?: AriaInvalid | AriaInvalid[];
   ariaValueTextFormatterForHandle?: AriaValueFormat | AriaValueFormat[];
   classNames: SliderClassNames;
   styles: SliderStyles;

src/index.tsx

@@ -1,6 +1,7 @@
 import Slider, { type SliderProps, type SliderRef } from './Slider';
 export { UnstableContext } from './context';
 
+export type { AriaInvalid } from './interface';
 export type { SliderProps, SliderRef };
 
 export default Slider;

src/interface.ts

@@ -10,6 +10,8 @@ export type OnStartMove = (
 
 export type AriaValueFormat = (value: number) => string;
 
+export type AriaInvalid = boolean | 'grammar' | 'spelling';
+
 export type SemanticName = 'tracks' | 'track' | 'rail' | 'handle';
 
 export type SliderClassNames = Partial<Record<SemanticName, string>>;

tests/Range.test.tsx

@@ -549,6 +549,32 @@ describe('Range', () => {
     );
   });
 
+  it('sets aria-invalid on the handles', () => {
+    const { container } = render(
+      <Slider range ariaInvalidForHandle={[true, false]} />,
+    );
+    expect(container.getElementsByClassName('rc-slider-handle')[0]).toHaveAttribute(
+      'aria-invalid',
+      'true',
+    );
+    expect(container.getElementsByClassName('rc-slider-handle')[1]).toHaveAttribute(
+      'aria-invalid',
+      'false',
+    );
+  });
+
+  it('sets aria-invalid on the handles using ariaInvalid prop', () => {
+    const { container } = render(<Slider range ariaInvalid={true} />);
+    expect(container.getElementsByClassName('rc-slider-handle')[0]).toHaveAttribute(
+      'aria-invalid',
+      'true',
+    );
+    expect(container.getElementsByClassName('rc-slider-handle')[1]).toHaveAttribute(
+      'aria-invalid',
+      'true',
+    );
+  });
+
   it('sets aria-valuetext on the handles', () => {
     const { container } = render(
       <Slider
@@ -1181,3 +1207,12 @@ describe('Range', () => {
     });
   });
 });
+
+it('falls back to global aria-invalid for omitted range entries', () => {
+  const { container } = render(
+    <Slider range ariaInvalid="grammar" ariaInvalidForHandle={[false]} />,
+  );
+  const handles = container.getElementsByClassName('rc-slider-handle');
+  expect(handles[0]).toHaveAttribute('aria-invalid', 'false');
+  expect(handles[1]).toHaveAttribute('aria-invalid', 'grammar');
+});

tests/Slider.test.js

@@ -456,6 +456,22 @@ describe('Slider', () => {
     );
   });
 
+  it('sets aria-invalid on the handle', () => {
+    const { container } = render(<Slider ariaInvalid={true} />);
+    expect(container.getElementsByClassName('rc-slider-handle')[0]).toHaveAttribute(
+      'aria-invalid',
+      'true',
+    );
+  });
+
+  it('sets aria-invalid on the handle with ariaInvalidForHandle', () => {
+    const { container } = render(<Slider ariaInvalidForHandle="grammar" />);
+    expect(container.getElementsByClassName('rc-slider-handle')[0]).toHaveAttribute(
+      'aria-invalid',
+      'grammar',
+    );
+  });
+
   it('sets aria-valuetext on the handle', () => {
     const { container } = render(
       <Slider