From 3535af3af5c11a675f83549d76a260eb92bd9055 Mon Sep 17 00:00:00 2001
From: Andrew Croce <andrew+dds@promptworks.com>
Date: Tue, 16 Oct 2018 17:16:10 -0400
Subject: [PATCH] attempting to add keyboard accessibility to selector
 component

---
 js/components/selector.js          | 26 ++++++++++++++++++++++++--
 templates/components/selector.html | 15 +++++++++++++--
 2 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/js/components/selector.js b/js/components/selector.js
index 15c60076..da2e8c18 100644
--- a/js/components/selector.js
+++ b/js/components/selector.js
@@ -38,10 +38,32 @@ export default {
   },
 
   methods: {
-    change: function (e) {
-      this.value = e.target.value
+    change: function (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()
     }
   },
 }
diff --git a/templates/components/selector.html b/templates/components/selector.html
index fb81b446..4b6b9d38 100644
--- a/templates/components/selector.html
+++ b/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>