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

114
test/components/views/settings/__snapshots__/FontScalingPanel-test.tsx.snap
View file

@ -36,104 +36,24 @@ exports[`FontScalingPanel renders the font scaling UI 1`] = `
<div
class="mx_Slider"
>
<div>
<div
class="mx_Slider_bar"
<input
autocomplete="off"
max="18"
min="13"
step="1"
type="range"
value="15"
/>
<output
class="mx_Slider_selection"
style="left: calc(2px + 40% + 1.2em - 0.96em);"
>
<span
class="mx_Slider_selection_label"
>
<hr />
<div
class="mx_Slider_selection"
>
<div
class="mx_Slider_selectionDot"
style="left: calc(-1.195em + 50%);"
>
<div
class="mx_Slider_selectionText"
>
15
</div>
</div>
<hr
style="width: 50%;"
/>
</div>
</div>
<div
class="mx_Slider_dotContainer"
>
<span
class="mx_Slider_dotValue"
>
<div
class="mx_Slider_dot mx_Slider_dotActive"
/>
<div
class="mx_Slider_labelContainer"
>
<div
class="mx_Slider_label"
/>
</div>
</span>
<span
class="mx_Slider_dotValue"
>
<div
class="mx_Slider_dot mx_Slider_dotActive"
/>
<div
class="mx_Slider_labelContainer"
>
<div
class="mx_Slider_label"
/>
</div>
</span>
<span
class="mx_Slider_dotValue"
>
<div
class="mx_Slider_dot mx_Slider_dotActive"
/>
<div
class="mx_Slider_labelContainer"
>
<div
class="mx_Slider_label"
/>
</div>
</span>
<span
class="mx_Slider_dotValue"
>
<div
class="mx_Slider_dot"
/>
<div
class="mx_Slider_labelContainer"
>
<div
class="mx_Slider_label"
/>
</div>
</span>
<span
class="mx_Slider_dotValue"
>
<div
class="mx_Slider_dot"
/>
<div
class="mx_Slider_labelContainer"
>
<div
class="mx_Slider_label"
/>
</div>
</span>
</div>
</div>
15
</span>
</output>
</div>
<div
class="mx_FontScalingPanel_fontSlider_largeText"