Added focus and a11y attributes/functionality to custom checkboxes

Closes #1476
This commit is contained in:
Dan Brown 2019-06-04 10:45:44 +01:00
parent a602cdf401
commit a9f983f156
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
6 changed files with 51 additions and 8 deletions

View File

@ -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;

View File

@ -23,6 +23,7 @@ import listSortControl from "./list-sort-control";
import triLayout from "./tri-layout"; import triLayout from "./tri-layout";
import breadcrumbListing from "./breadcrumb-listing"; import breadcrumbListing from "./breadcrumb-listing";
import permissionsTable from "./permissions-table"; import permissionsTable from "./permissions-table";
import customCheckbox from "./custom-checkbox";
const componentMapping = { const componentMapping = {
'dropdown': dropdown, 'dropdown': dropdown,
@ -50,6 +51,7 @@ const componentMapping = {
'tri-layout': triLayout, 'tri-layout': triLayout,
'breadcrumb-listing': breadcrumbListing, 'breadcrumb-listing': breadcrumbListing,
'permissions-table': permissionsTable, 'permissions-table': permissionsTable,
'custom-checkbox': customCheckbox,
}; };
window.components = {}; window.components = {};

View File

@ -6,12 +6,11 @@ class ToggleSwitch {
this.input = elem.querySelector('input[type=hidden]'); this.input = elem.querySelector('input[type=hidden]');
this.checkbox = elem.querySelector('input[type=checkbox]'); 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) { stateChange() {
let checked = this.checkbox.checked; this.input.value = (this.checkbox.checked ? 'true' : 'false');
this.input.value = checked ? 'true' : 'false';
} }
} }

View File

@ -22,6 +22,7 @@
'name' => 'remember', 'name' => 'remember',
'checked' => false, 'checked' => false,
'value' => 'on', 'value' => 'on',
'tabindex' => 1,
'label' => trans('auth.remember_me'), 'label' => trans('auth.remember_me'),
]) ])
</div> </div>

View File

@ -3,9 +3,13 @@ $name
$value $value
$checked $checked
$label $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> <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> <span class="label">{{$label}}</span>
</label> </label>

View File

@ -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="hidden" name="{{$name}}" value="{{$value?'true':'false'}}"/>
<input type="checkbox" @if($value) checked="checked" @endif> <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> <span class="label">{{ $label }}</span>
</label> </label>