feat: a11y improvements

Author: adamberecz

src/Toggle.d.ts

@@ -14,6 +14,7 @@ declare class Toggle extends Vue {
     labelledby?: string;
     describedby?: string;
     classes?: object;
+    aria?: object;
 
     $emit(eventName: 'change', e: {originalEvent: Event, value: any}): this;
 

src/Toggle.vue

@@ -6,7 +6,8 @@
     :aria-describedby="describedby"
     :aria-labelledby="labelledby"
     role="switch"
-    @keyup.space="handleSpace"
+    v-bind="aria"
+    @keypress.space.prevent="handleSpace"
   >
     <input
       v-show="false"
@@ -126,6 +127,11 @@
         type: String,
         required: false,
       },
+      aria: {
+        required: false,
+        type: Object,
+        default: () => ({}),
+      },
     },
     setup(props, context)
     {

tests/unit/composables/useKeyboard.spec.js

@@ -1,4 +1,4 @@
-import { createToggle, keyup } from 'unit-test-helpers'
+import { createToggle, keypress } from 'unit-test-helpers'
 import { nextTick } from 'vue'
 
 describe('useKeyboard', () => {
@@ -8,7 +8,7 @@ describe('useKeyboard', () => {
         value: false,
       })
 
-      keyup(toggle, 'space')
+      keypress(toggle, 'space')
 
       await nextTick()
 
@@ -20,7 +20,7 @@ describe('useKeyboard', () => {
         value: true,
       })
 
-      keyup(toggle, 'space')
+      keypress(toggle, 'space')
 
       await nextTick()
 
@@ -33,7 +33,7 @@ describe('useKeyboard', () => {
         disabled: true
       })
 
-      keyup(toggle, 'space')
+      keypress(toggle, 'space')
 
       await nextTick()
 
@@ -46,7 +46,7 @@ describe('useKeyboard', () => {
         disabled: true
       })
 
-      keyup(toggle, 'space')
+      keypress(toggle, 'space')
 
       await nextTick()
 

tests/unit/helpers/vue2.js

@@ -79,4 +79,8 @@ const keyEvent = (event, wrapper, key) => {
 
 export const keyup = (wrapper, key) => {
   keyEvent('keyup', wrapper, key)
+}
+
+export const keypress = (wrapper, key) => {
+  keyEvent('keypress', wrapper, key)
 }

tests/unit/helpers/vue3.js

@@ -77,4 +77,8 @@ const keyEvent = (event, wrapper, key) => {
 
 export const keyup = (wrapper, key) => {
   keyEvent('keyup', wrapper, key)
+}
+
+export const keypress = (wrapper, key) => {
+  keyEvent('keypress', wrapper, key)
 }