mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-22 17:25:50 +03:00
Code Issues Projects Releases Packages Wiki Activity

Accessibility focus checkboxes and radio boxes

Browse source
This commit is contained in:
Jorik Schellekens 2020-07-28 16:08:25 +01:00
parent 749aaf0b54
commit fb953ade8e
3 changed files with 25 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
res/css/_common.scss
View file

@ -692,3 +692,15 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
border-radius: $radius; border-radius: $radius;
} }
} }
@define-mixin unreal-focus {
outline-width: 2px;
outline-style: solid;
outline-color: Highlight;
/* WebKit gets its native focus styles. */
@media (-webkit-min-device-pixel-ratio: 0) {
outline-color: -webkit-focus-ring-color;
outline-style: auto;
}
}

6
res/css/views/elements/_StyledCheckbox.scss
View file

@ -80,5 +80,11 @@ limitations under the License.
background-color: $accent-color; background-color: $accent-color;
border-color: $accent-color; border-color: $accent-color;
} }
&.focus-visible {
& + label .mx_Checkbox_background {
@mixin unreal-focus;
}
}
} }
} }

7
res/css/views/elements/_StyledRadioButton.scss
View file

@ -63,6 +63,7 @@ limitations under the License.
box-sizing: border-box; box-sizing: border-box;
height: $font-16px; height: $font-16px;
width: $font-16px; width: $font-16px;
margin-left: 1px; // For the highlight on focus
border: $font-1-5px solid $radio-circle-color; border: $font-1-5px solid $radio-circle-color;
border-radius: $font-16px; border-radius: $font-16px;
@ -77,6 +78,12 @@ limitations under the License.
} }
} }
&.focus-visible {
& + div {
@mixin unreal-focus;
}
}
&:checked { &:checked {
& + div { & + div {
border-color: $active-radio-circle-color; border-color: $active-radio-circle-color;