attempting to add keyboard accessibility to selector component

js/components/selector.js

@@ -38,10 +38,32 @@ export default {
   },
 
   methods: {
-    change: function (e) {
+    change: function (value) {
-      this.value = e.target.value
+      console.log('change', value)
+      this.value = value
       this.showError = false
       setTimeout(() => this.$refs.popover.hide(), 300)
+    },
+
+    handleClickOption: function (e) {
+      console.log('click', e)
+      this.change(e.target.value)
+    },
+
+    handleSwitchOption: function (e) {
+      console.log('switch', e)
+      this.value = e.target.value
+    },
+
+    handleEnterOption: function (e) {
+      console.log('enter', e)
+      e.stopPropagation()
+      this.change(e.target.value)
+      return false
+    },
+
+    handleButtonArrowDown: function (e) {
+      this.$refs.popover.show()
     }
   },
 }

templates/components/selector.html

@@ -22,7 +22,13 @@
         <span v-show='showError'>{{ Icon('alert',classes="icon-validation") }}</span>
       </legend>
 
-      <button class='selector__button' type='button' v-html='label'></button>
+      <button
+        class='selector__button'
+        type='button'
+        v-html='label'
+        v-on:keyup.down='handleButtonArrowDown'
+        v-tooltip='{ container:false }'>
+      </button>
 
       <span v-show='showError'>{{ Icon('alert',classes="icon-validation") }}</span>
 
@@ -38,11 +44,16 @@
             <li v-for='choice in choices' class='block-list__item block-list__item--selectable'>
               <template v-if='choice[0] !== ""'>
                 <input
+                  tabindex='0'
                   type='radio'
+                  name="{{ field.name }}"
                   v-bind:id="'{{ field.name }}_' + choice[0]"
                   v-bind:value='choice[0]'
                   v-bind:checked='value === choice[0]'
-                  v-on:change='change'/>
+                  v-on:click='handleClickOption'
+                  v-on:keyup.enter='handleEnterOption'
+                  v-on:keyup.down='handleSwitchOption'
+                  v-on:keyup.up='handleSwitchOption'/>
                 <label v-bind:for="'{{ field.name }}_' + choice[0]">
                   <template v-if='choice[1].description'>
                     <dl>