feat: make the toggle more accessible

Tabbing to the toggle will now outline the necessary part of the toggle to perform the action. Along with an outline, you can now use spacebar to change the state of the toggle once highlighted.
knownasilya · Jul 31, 2018 · e0beb9b · e0beb9b
1 parent cd0d420
commit e0beb9b
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 19 deletions.
diff --git a/addon/components/x-toggle-switch/component.js b/addon/components/x-toggle-switch/component.js
@@ -8,7 +8,11 @@ export default Component.extend(RecognizerMixin, {
   layout,
   tagName: 'span',
   classNames: ['x-toggle-container'],
-  classNameBindings: ['size', 'disabled:x-toggle-container-disabled', 'value:x-toggle-container-checked'],
+  classNameBindings: [
+    'size', 
+    'disabled:x-toggle-container-disabled',
+    'value:x-toggle-container-checked'
+  ],
 
   labelDisabled: false,
   recognizers: 'pan',
@@ -23,6 +27,16 @@ export default Component.extend(RecognizerMixin, {
     return `x-toggle-${theme}`;
   }),
 
+  keyPress(event) {
+    // spacebar: 32
+    if (event.which === 32) {
+      let value = this.get('value');
+
+      this.sendToggle(!value);
+      event.preventDefault();
+    }
+  },
+
   panRight() {
     if (this.get('disabled')) {
       return;

diff --git a/addon/components/x-toggle/component.js b/addon/components/x-toggle/component.js
@@ -6,7 +6,11 @@ import layout from './template';
 export default Component.extend({
   layout,
   classNames: ['x-toggle-component'],
+  classNameBindings: ['focused:x-toggle-focused'],
+  attributeBindings: ['tabindex'],
 
+  tabindex: '1',
+  focused: false,
   disabled: false,
   name: 'default',
   onLabel: 'On',
@@ -20,26 +24,48 @@ export default Component.extend({
     return this.get('elementId') + '-x-toggle';
   }),
 
+  keyPress(event) {
+    // spacebar: 32
+    if (event.which === 32) {
+      let value = this.get('value');
+
+      this.toggleSwitch(!value);
+      event.preventDefault();
+    }
+  },  
+
+  focusIn() {
+    this.set('focused', true);
+  },
+
+  focusOut() {
+    this.set('focused', false);
+  },
+
+  toggleSwitch(value) {
+    let onToggle = this.get('onToggle');
+    let disabled = this.get('disabled');
+
+    if (!disabled && (value !== this.get('value')) && (typeof onToggle === 'function')) {
+      let name = this.get('name');
+
+      onToggle(value, name);
+
+      // The click on input/label will toggle the input unconditionally.
+      // Input state has to be updated manually to prevent it going out of
+      // sync in case the action didn't update value.
+      const checkbox = this.element.querySelector('.x-toggle');
+      const newValue = this.get('value');
+
+      if (checkbox.checked !== newValue) {
+        checkbox.checked = newValue;
+      }
+    }
+  },
+
   actions: {
     sendToggle(value) {
-      let onToggle = this.get('onToggle');
-      let disabled = this.get('disabled');
-
-      if (!disabled && (value !== this.get('value')) && (typeof onToggle === 'function')) {
-        let name = this.get('name');
-
-        onToggle(value, name);
-
-        // The click on input/label will toggle the input unconditionally.
-        // Input state has to be updated manually to prevent it going out of
-        // sync in case the action didn't update value.
-        const checkbox = this.element.querySelector('.x-toggle');
-        const newValue = this.get('value');
-
-        if (checkbox.checked !== newValue) {
-          checkbox.checked = newValue;
-        }
-      }
+      this.toggleSwitch(value);
     }
   }
 });
diff --git a/vendor/ember-toggle/base.css b/vendor/ember-toggle/base.css
@@ -75,6 +75,14 @@ label > .x-toggle-btn::before {
   display: flex;
   justify-content: center;
   align-items: center;
+  outline: none;
+}
+
+.x-toggle-component.x-toggle-focused .x-toggle-btn:not(.x-toggle-disabled)::after,
+.x-toggle-component.x-toggle-focused .x-toggle-btn:not(.x-toggle-disabled)::before {
+  -webkit-box-shadow: 0 0 3px 2px #0099e0;
+  -moz-box-shadow: 0 0 3px 2px #0099e0;
+  box-shadow: 0 0 2px 3px #0099e0;
 }
 
 .x-toggle-container {