From a9f983f1564d7922d1db6abd0d08d70b74797c6f Mon Sep 17 00:00:00 2001
From: Dan Brown <ssddanbrown@googlemail.com>
Date: Tue, 4 Jun 2019 10:45:44 +0100
Subject: [PATCH] Added focus and a11y attributes/functionality to custom
 checkboxes

Closes #1476
---
 .../assets/js/components/custom-checkbox.js   | 34 +++++++++++++++++++
 resources/assets/js/components/index.js       |  2 ++
 .../assets/js/components/toggle-switch.js     |  7 ++--
 resources/views/auth/login.blade.php          |  1 +
 .../components/custom-checkbox.blade.php      |  8 +++--
 .../views/components/toggle-switch.blade.php  |  7 ++--
 6 files changed, 51 insertions(+), 8 deletions(-)
 create mode 100644 resources/assets/js/components/custom-checkbox.js

diff --git a/resources/assets/js/components/custom-checkbox.js b/resources/assets/js/components/custom-checkbox.js
new file mode 100644
index 000000000..65ce8c194
--- /dev/null
+++ b/resources/assets/js/components/custom-checkbox.js
@@ -0,0 +1,34 @@
+
+class CustomCheckbox {
+
+    constructor(elem) {
+        this.elem = elem;
+        this.checkbox = elem.querySelector('input[type=checkbox]');
+        this.display = elem.querySelector('[role="checkbox"]');
+
+        this.checkbox.addEventListener('change', this.stateChange.bind(this));
+        this.elem.addEventListener('keydown', this.onKeyDown.bind(this));
+    }
+
+    onKeyDown(event) {
+        const isEnterOrPress = event.keyCode === 32 || event.keyCode === 13;
+        if (isEnterOrPress) {
+            event.preventDefault();
+            this.toggle();
+        }
+    }
+
+    toggle() {
+        this.checkbox.checked = !this.checkbox.checked;
+        this.checkbox.dispatchEvent(new Event('change'));
+        this.stateChange();
+    }
+
+    stateChange() {
+        const checked = this.checkbox.checked ? 'true' : 'false';
+        this.display.setAttribute('aria-checked', checked);
+    }
+
+}
+
+export default CustomCheckbox;
\ No newline at end of file
diff --git a/resources/assets/js/components/index.js b/resources/assets/js/components/index.js
index 355b96473..bd7432b8d 100644
--- a/resources/assets/js/components/index.js
+++ b/resources/assets/js/components/index.js
@@ -23,6 +23,7 @@ import listSortControl from "./list-sort-control";
 import triLayout from "./tri-layout";
 import breadcrumbListing from "./breadcrumb-listing";
 import permissionsTable from "./permissions-table";
+import customCheckbox from "./custom-checkbox";
 
 const componentMapping = {
     'dropdown': dropdown,
@@ -50,6 +51,7 @@ const componentMapping = {
     'tri-layout': triLayout,
     'breadcrumb-listing': breadcrumbListing,
     'permissions-table': permissionsTable,
+    'custom-checkbox': customCheckbox,
 };
 
 window.components = {};
diff --git a/resources/assets/js/components/toggle-switch.js b/resources/assets/js/components/toggle-switch.js
index 3be67d5dc..3dd1ce85c 100644
--- a/resources/assets/js/components/toggle-switch.js
+++ b/resources/assets/js/components/toggle-switch.js
@@ -6,12 +6,11 @@ class ToggleSwitch {
         this.input = elem.querySelector('input[type=hidden]');
         this.checkbox = elem.querySelector('input[type=checkbox]');
 
-        this.checkbox.addEventListener('change', this.onClick.bind(this));
+        this.checkbox.addEventListener('change', this.stateChange.bind(this));
     }
 
-    onClick(event) {
-        let checked = this.checkbox.checked;
-        this.input.value = checked ? 'true' : 'false';
+    stateChange() {
+        this.input.value = (this.checkbox.checked ? 'true' : 'false');
     }
 
 }
diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php
index 51b47f5c7..a0e5f716c 100644
--- a/resources/views/auth/login.blade.php
+++ b/resources/views/auth/login.blade.php
@@ -22,6 +22,7 @@
                             'name' => 'remember',
                             'checked' => false,
                             'value' => 'on',
+                            'tabindex' => 1,
                             'label' => trans('auth.remember_me'),
                         ])
                     </div>
diff --git a/resources/views/components/custom-checkbox.blade.php b/resources/views/components/custom-checkbox.blade.php
index 73b7496f8..6ba2f457f 100644
--- a/resources/views/components/custom-checkbox.blade.php
+++ b/resources/views/components/custom-checkbox.blade.php
@@ -3,9 +3,13 @@ $name
 $value
 $checked
 $label
+$tabindex
 --}}
-<label class="toggle-switch @if($errors->has($name)) text-neg @endif">
+<label custom-checkbox class="toggle-switch @if($errors->has($name)) text-neg @endif">
     <input type="checkbox" name="{{$name}}" value="{{ $value }}" @if($checked) checked="checked" @endif>
-    <span class="custom-checkbox text-primary">@icon('check')</span>
+    <span tabindex="{{ $tabindex ?? '0' }}"
+          role="checkbox"
+          aria-checked="{{ $checked ? 'true' : 'false' }}"
+          class="custom-checkbox text-primary">@icon('check')</span>
     <span class="label">{{$label}}</span>
 </label>
\ No newline at end of file
diff --git a/resources/views/components/toggle-switch.blade.php b/resources/views/components/toggle-switch.blade.php
index 84a8a3083..f61c07670 100644
--- a/resources/views/components/toggle-switch.blade.php
+++ b/resources/views/components/toggle-switch.blade.php
@@ -1,6 +1,9 @@
-<label toggle-switch="{{$name}}" class="toggle-switch">
+<label toggle-switch="{{$name}}" custom-checkbox class="toggle-switch">
     <input type="hidden" name="{{$name}}" value="{{$value?'true':'false'}}"/>
     <input type="checkbox" @if($value) checked="checked" @endif>
-    <span class="custom-checkbox text-primary">@icon('check')</span>
+    <span tabindex="{{ $tabindex ?? '0' }}"
+          role="checkbox"
+          aria-checked="{{ $value ? 'true' : 'false' }}"
+          class="custom-checkbox text-primary">@icon('check')</span>
     <span class="label">{{ $label }}</span>
 </label>
\ No newline at end of file