mirror/php-flarum
1
0
Fork 0
mirror of https://github.com/flarum/core.git synced 2025-08-11 10:55:47 +02:00
Code Issues Releases Wiki Activity

[A11Y] Make checkboxes focusable (#3014)

Browse Source 
* Add extra feature to a11y focusring mixin

* Add visually hidden CSS class and mixin

* Visually hide checkboxes (keep in focus/a11y tree)

* Place checkbox focus ring around display element

* Improve mobile checkbox/switch accessibility
This commit is contained in:
David Wheatley
2021-08-16 11:56:10 +02:00
committed by GitHub
parent 51ce89b61f
commit 83529e23de
4 changed files with 75 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
less/common/Checkbox.less
View File

@@ -2,18 +2,42 @@
display: block;
cursor: pointer;
margin: 0;
position: relative;
& input[type="checkbox"] {
display: none;
input[type="checkbox"] {
position: absolute;
z-index: 1;
opacity: 0;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
cursor: pointer;
.add-keyboard-focus-ring-nearby("+ .Checkbox-display");
}
}
.Checkbox--switch {
padding-left: 65px;
@left-pad: 65px;
padding-left: @left-pad;
margin: 5px 0;
input[type="checkbox"] {
top: -4px;
width: 50px;
height: 28px;
}
.Checkbox-display {
float: left;
margin-left: -65px;
margin-left: -@left-pad;
margin-top: -4px;
}
}