feat(slider): support aria-describedby on handles (#83)

Sync react-component/slider#1088.

Author: aibayanyu20

packages/slider/src/Handles/Handle.tsx

@@ -166,6 +166,7 @@ export default defineComponent({
         tabIndex,
         ariaLabelForHandle,
         ariaLabelledByForHandle,
+        ariaDescribedByForHandle,
         ariaRequired,
         ariaValueTextFormatterForHandle,
         classNames,
@@ -187,6 +188,7 @@ export default defineComponent({
           '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',

packages/slider/src/Slider.tsx

@@ -114,6 +114,7 @@ export interface SliderProps<Value extends ValueType = ValueType> {
   tabIndex?: number | number[]
   ariaLabelForHandle?: string | string[]
   ariaLabelledByForHandle?: string | string[]
+  ariaDescribedByForHandle?: string | string[]
   ariaRequired?: boolean
   ariaValueTextFormatterForHandle?: AriaValueFormat | AriaValueFormat[]
 }
@@ -612,6 +613,7 @@ const Slider = defineComponent<SliderProps>((props = sliderDefaults, {
     tabIndex: tabIndex.value,
     ariaLabelForHandle: props.ariaLabelForHandle,
     ariaLabelledByForHandle: props.ariaLabelledByForHandle,
+    ariaDescribedByForHandle: props.ariaDescribedByForHandle,
     ariaRequired: props.ariaRequired,
     ariaValueTextFormatterForHandle: props.ariaValueTextFormatterForHandle,
     styles: props.styles || {},

packages/slider/src/context.ts

@@ -1,6 +1,6 @@
 import type { InjectionKey, Ref } from 'vue'
-import type { AriaValueFormat, Direction, SliderClassNames, SliderStyles } from './interface'
 import type { IsHandleDisabled } from './hooks/useDisabled'
+import type { AriaValueFormat, Direction, SliderClassNames, SliderStyles } from './interface'
 import { defineComponent, inject, provide, ref } from 'vue'
 
 export interface SliderContextProps {
@@ -17,6 +17,7 @@ export interface SliderContextProps {
   tabIndex: number | number[]
   ariaLabelForHandle?: string | string[]
   ariaLabelledByForHandle?: string | string[]
+  ariaDescribedByForHandle?: string | string[]
   ariaRequired?: boolean
   ariaValueTextFormatterForHandle?: AriaValueFormat | AriaValueFormat[]
   classNames: SliderClassNames

packages/slider/tests/accessibility.test.tsx

@@ -0,0 +1,21 @@
+// @vitest-environment jsdom
+
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import Slider from '../src'
+
+describe('slider accessibility', () => {
+  it('applies aria-describedby to each handle', () => {
+    const wrapper = mount(Slider, {
+      props: {
+        range: true,
+        defaultValue: [20, 80],
+        ariaDescribedByForHandle: ['minimum-help', 'maximum-help'],
+      },
+    })
+
+    const handles = wrapper.findAll('[role="slider"]')
+    expect(handles[0].attributes('aria-describedby')).toBe('minimum-help')
+    expect(handles[1].attributes('aria-describedby')).toBe('maximum-help')
+  })
+})