Refactor selector component to allow keyboard accessibility

js/components/selector.js

@@ -1,10 +1,41 @@
 import { VPopover } from 'v-tooltip'
 
+const SelectorInput = {
+  name: 'SelectorInput',
+  props: {
+    name: String,
+    value: String,
+    label: String,
+    description: String,
+    selected: Boolean,
+    handleChange: Function,
+    handleEnter: Function
+  },
+
+  computed: {
+    id: function () {
+      return `${this.name}_${this.value}`
+    }
+  },
+
+  methods: {
+    onChange: function (e) {
+      this.handleChange(this.value)
+    },
+
+    onEnter: function (e) {
+      this.handleEnter()
+    }
+  }
+}
+
+
 export default {
   name: 'selector',
 
   components: {
-    VPopover
+    VPopover,
+    SelectorInput
   },
 
   props: {
@@ -20,7 +51,8 @@ export default {
   data: function () {
     return {
       value: this.initialChoice || null,
-      showError: (this.initialErrors && this.initialErrors.length) || false
+      showError: (this.initialErrors && this.initialErrors.length) || false,
+      usingKeyboard: false
     }
   },
 
@@ -38,32 +70,29 @@ export default {
   },
 
   methods: {
+
     change: function (value) {
-      console.log('change', value)
       this.value = value
       this.showError = false
-      setTimeout(() => this.$refs.popover.hide(), 300)
+      if (!this.usingKeyboard) {
+        setTimeout(() => this.$refs.popover.hide(), 300)
+      }
     },
 
-    handleClickOption: function (e) {
+    enter: function () {
-      console.log('click', e)
+      this.$refs.popover.hide()
-      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
+      this.usingKeyboard = false
+      this.$refs.popover.hide()
     },
 
     handleButtonArrowDown: function (e) {
+      this.usingKeyboard = true
       this.$refs.popover.show()
+      this.$refs.choices.find(choice => choice.selected).$refs.input[0].focus()
     }
   },
 }

styles/elements/_block_lists.scss

@@ -105,21 +105,26 @@
   @include block-list-item;
 
   &.block-list__item--selectable {
-    > label {
+    > div {
-      margin: 0;
-      max-width: none;
       display: flex;
       flex-direction: row-reverse;
-      align-items: center;
-      justify-content: space-between;
-      &::before {
-        flex-shrink: 0;
-        margin-right: 0;
-        margin-left: $gap * 2;
-      }
 
-      &:hover {
+      > label {
-        color: $color-primary;
+        margin: 0;
+        max-width: none;
+        display: flex;
+        flex-direction: row-reverse;
+        align-items: center;
+        justify-content: space-between;
+        &::before {
+          flex-shrink: 0;
+          margin-right: 0;
+          margin-left: $gap * 2;
+        }
+
+        &:hover {
+          color: $color-primary;
+        }
       }
     }
 

templates/components/selector.html

@@ -26,7 +26,7 @@
         class='selector__button'
         type='button'
         v-html='label'
-        v-on:keyup.down='handleButtonArrowDown'
+        v-on:keydown.down.prevent.stop='handleButtonArrowDown'
         v-tooltip='{ container:false }'>
       </button>
 
@@ -41,28 +41,45 @@
       <template slot='popover'>
         <div class='block-list'>
           <ul>
-            <li v-for='choice in choices' class='block-list__item block-list__item--selectable'>
+            <li v-for='(choice, index) in choices' class='block-list__item block-list__item--selectable'>
               <template v-if='choice[0] !== ""'>
-                <input
+
-                  tabindex='0'
+                <selector-input
-                  type='radio'
                   name="{{ field.name }}"
-                  v-bind:id="'{{ field.name }}_' + choice[0]"
+                  ref='choices'
                   v-bind:value='choice[0]'
-                  v-bind:checked='value === choice[0]'
+                  v-bind:label='choice[1].name'
-                  v-on:click='handleClickOption'
+                  v-bind:description='choice[1].description'
-                  v-on:keyup.enter='handleEnterOption'
+                  v-bind:selected='value === choice[0]'
-                  v-on:keyup.down='handleSwitchOption'
+                  v-bind:handle-change='change'
-                  v-on:keyup.up='handleSwitchOption'/>
+                  v-bind:handle-enter='enter'
-                <label v-bind:for="'{{ field.name }}_' + choice[0]">
+                  inline-template>
-                  <template v-if='choice[1].description'>
+
-                    <dl>
+                  <div>
-                      <dt v-html='choice[1].name'></dt>
+                    <input
-                      <dd v-html='choice[1].description'></dd>
+                      ref='input'
-                    </dl>
+                      tabindex='0'
-                  </template>
+                      type='radio'
-                  <span v-else v-html='choice[1].name'>
+                      v-bind:name='name'
-                </label>
+                      v-bind:id='id'
+                      v-bind:value='value'
+                      v-bind:checked='selected'
+                      v-on:change='onChange'
+                      v-on:keydown.enter.prevent.stop='onEnter'/>
+
+                    <label v-bind:for='id'>
+                      <template v-if='description'>
+                        <dl>
+                          <dt v-html='label'></dt>
+                          <dd v-html='description'></dd>
+                        </dl>
+                      </template>
+                      <span v-else v-html='label'>
+                    </label>
+                  </div>
+
+                </selector-input>
+
               </template>
             </li>
           </ul>