mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-08-26 20:22:18 +00:00
Added focus and a11y attributes/functionality to custom checkboxes
Closes #1476
This commit is contained in:
parent
a602cdf401
commit
a9f983f156
34
resources/assets/js/components/custom-checkbox.js
Normal file
34
resources/assets/js/components/custom-checkbox.js
Normal 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;
|
@ -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 = {};
|
||||
|
@ -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');
|
||||
}
|
||||
|
||||
}
|
||||
|
@ -22,6 +22,7 @@
|
||||
'name' => 'remember',
|
||||
'checked' => false,
|
||||
'value' => 'on',
|
||||
'tabindex' => 1,
|
||||
'label' => trans('auth.remember_me'),
|
||||
])
|
||||
</div>
|
||||
|
@ -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>
|
@ -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>
|
Loading…
Reference in New Issue
Block a user