imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve accessibility of font slider (#10473)

Browse source 
* Clamp font size when disabling "Use custom size"

* Switch Slider to use a semantic input range element

* Iterate

* delint

* delint

* snapshot

* Iterate

* Iterate

* Fix step size

* Add focus outline to slider

* Derp
This commit is contained in:
Michael Telatynski 2023-04-12 11:57:31 +01:00 • committed by GitHub
parent bef6eca484
commit d2066ba5f5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 189 additions and 286 deletions
Download patch file Download diff file Expand all files Collapse all files

182
res/css/views/elements/_Slider.pcss
View file

@ -16,92 +16,110 @@ limitations under the License.
.mx_Slider {
position: relative;
margin: 0px;
flex-grow: 1;
}
.mx_Slider_dotContainer {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.mx_Slider_bar {
display: flex;
box-sizing: border-box;
position: absolute;
height: 1em;
width: 100%;
padding: 0 0.5em; /* half the width of a dot. */
align-items: center;
}
.mx_Slider_bar > hr {
width: 100%;
height: 0.4em;
background-color: $slider-background-color;
border: 0;
}
.mx_Slider_selection {
display: flex;
align-items: center;
width: calc(100% - 1em); /* 2 * half the width of a dot */
height: 1em;
position: absolute;
pointer-events: none;
}
.mx_Slider_selectionDot {
position: absolute;
width: $slider-selection-dot-size;
height: $slider-selection-dot-size;
background-color: $accent;
border-radius: 50%;
z-index: 10;
}
.mx_Slider_selectionText {
color: $muted-fg-color;
font-size: $font-14px;
position: relative;
text-align: center;
top: 30px;
width: 100%;
}
.mx_Slider_selection > hr {
margin: 0;
border: 0.2em solid $accent;
}
flex-grow: 1;
.mx_Slider_dot {
height: $slider-dot-size;
width: $slider-dot-size;
border-radius: 50%;
background-color: $slider-background-color;
z-index: 0;
}
input[type="range"] {
height: 2.4em;
appearance: none;
width: 100%;
background: none;
font-size: 1em; // set base multiplier for em units applied later
.mx_Slider_dotActive {
background-color: $accent;
}
--active-color: $accent;
.mx_Slider_dotValue {
display: flex;
flex-direction: column;
align-items: center;
color: $slider-background-color;
}
&:disabled {
cursor: not-allowed;
/* The following is a hack to center the labels without adding */
/* any width to the slider's dots. */
.mx_Slider_labelContainer {
width: 1em;
}
--active-color: $slider-background-color;
}
.mx_Slider_label {
position: relative;
width: fit-content;
left: -50%;
&:focus:not(.focus-visible) {
outline: none;
}
&::-webkit-slider-runnable-track {
width: 100%;
height: 0.4em;
background: $slider-background-color;
border-radius: 5px;
border: 0 solid #000000;
}
&::-webkit-slider-thumb {
border: 0 solid #000000;
width: $slider-selection-dot-size;
height: $slider-selection-dot-size;
background: var(--active-color);
border-radius: 50%;
-webkit-appearance: none;
margin-top: calc(2px + 1.2em - $slider-selection-dot-size);
}
&:focus::-webkit-slider-runnable-track {
background: $slider-background-color;
}
&::-moz-range-track {
width: 100%;
height: 0.4em;
background: $slider-background-color;
border-radius: 5px;
border: 0 solid #000000;
}
&::-moz-range-progress {
height: 0.4em;
background: var(--active-color);
border-radius: 5px;
border: 0 solid #000000;
}
&::-moz-range-thumb {
border: 0 solid #000000;
width: $slider-selection-dot-size;
height: $slider-selection-dot-size;
background: var(--active-color);
border-radius: 50%;
}
&::-ms-track {
width: 100%;
height: 0.4em;
background: transparent;
border-color: transparent;
color: transparent;
}
&::-ms-fill-lower,
&::-ms-fill-upper {
background: $slider-background-color;
border: 0 solid #000000;
border-radius: 10px;
}
&::-ms-thumb {
margin-top: 1px;
width: $slider-selection-dot-size;
height: $slider-selection-dot-size;
background: var(--active-color);
border-radius: 50%;
}
&:focus::-ms-fill-upper {
background: $slider-background-color;
}
&::-ms-fill-lower,
&:focus::-ms-fill-lower {
background: var(--active-color);
}
}
output {
position: absolute;
left: 50%;
transform: translateX(-50%);
font-size: 1em; // set base multiplier for em units applied later
text-align: center;
top: 3em;
.mx_Slider_selection_label {
color: $muted-fg-color;
font-size: $font-14px;
}
}
}