feat: a11y improvements

Author: adamberecz

src/Slider.d.ts

@@ -19,6 +19,7 @@ declare class Slider extends Vue {
   tooltipPosition?: null|'top'|'bottom'|'left'|'right';
   lazy?: boolean;
   ariaLabelledby?: string;
+  aria?: object;
 
   $emit(eventName: 'change', e: {originalEvent: Event, value: any}): this;
   $emit(eventName: 'update', e: {originalEvent: Event, value: any}): this;

src/Slider.vue

@@ -110,6 +110,11 @@
         required: false,
         default: undefined,
       },
+      aria: {
+        required: false,
+        type: Object,
+        default: () => ({}),
+      },
     },
     setup(props, context)
     {

src/composables/useSlider.js

@@ -9,6 +9,7 @@ export default function useSlider (props, context, dependencies)
     orientation, direction, tooltips, step,
     min, max, merge, id, disabled, options,
     classes, format, lazy, ariaLabelledby,
+    aria,
   } = toRefs(props)
 
   // ============ DEPENDENCIES ============
@@ -55,9 +56,12 @@ export default function useSlider (props, context, dependencies)
       defaultOptions.connect = true
     }
 
-    if (ariaLabelledby && ariaLabelledby.value) {
+    if ((ariaLabelledby && ariaLabelledby.value) || (aria && Object.keys(aria.value).length)) {
       let handles = Array.isArray(value.value) ? value.value : [value.value]
-      defaultOptions.handleAttributes = handles.map(h => ({ 'aria-labelledby': ariaLabelledby.value, }))
+
+      defaultOptions.handleAttributes = handles.map(h => (Object.assign({}, aria.value, ariaLabelledby?.value ? {
+        'aria-labelledby': ariaLabelledby.value,
+      }: {})))
     }
 
     if (format.value) {

tests/unit/composables/useSlider.spec.js

@@ -134,13 +134,15 @@ describe('useSlider', () => {
       expect(slider.vm.slider$.options.handleAttributes).toEqual([{ 'aria-labelledby': 'label' }])
     })
 
-    it('should init aria-labelledby with multiple handles', async () => {
+    it('should init aria attrs with multiple handles', async () => {
       const slider = createSlider({
         value: [5,10],
-        ariaLabelledby: 'label',
+        aria: {
+          'aria-invalid': false
+        }
       })
 
-      expect(slider.vm.slider$.options.handleAttributes).toEqual([{ 'aria-labelledby': 'label' },{ 'aria-labelledby': 'label' }])
+      expect(slider.vm.slider$.options.handleAttributes).toEqual([{ 'aria-invalid': false },{ 'aria-invalid': false }])
     })
 
     it('should emit change on slider set event', async () => {