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

21
src/components/views/settings/FontScalingPanel.tsx
View file

@ -27,6 +27,7 @@ import { Layout } from "../../../settings/enums/Layout";
import { MatrixClientPeg } from "../../../MatrixClientPeg";
import { SettingLevel } from "../../../settings/SettingLevel";
import { _t } from "../../../languageHandler";
import { clamp } from "../../../utils/numbers";
interface IProps {}
@ -103,6 +104,9 @@ export default class FontScalingPanel extends React.Component<IProps, IState> {
};
public render(): React.ReactNode {
const min = 13;
const max = 18;
return (
<div className="mx_SettingsTab_section mx_FontScalingPanel">
<span className="mx_SettingsTab_subheading">{_t("Font size")}</span>
@ -117,9 +121,11 @@ export default class FontScalingPanel extends React.Component<IProps, IState> {
<div className="mx_FontScalingPanel_fontSlider">
<div className="mx_FontScalingPanel_fontSlider_smallText">Aa</div>
<Slider
values={[13, 14, 15, 16, 18]}
min={min}
max={max}
step={1}
value={parseInt(this.state.fontSize, 10)}
onSelectionChange={this.onFontSizeChanged}
onChange={this.onFontSizeChanged}
displayFunc={(_) => ""}
disabled={this.state.useCustomFontSize}
/>
@ -129,7 +135,16 @@ export default class FontScalingPanel extends React.Component<IProps, IState> {
<SettingsFlag
name="useCustomFontSize"
level={SettingLevel.ACCOUNT}
onChange={(checked) => this.setState({ useCustomFontSize: checked })}
onChange={(checked) => {
this.setState({ useCustomFontSize: checked });
if (!checked) {
const size = parseInt(this.state.fontSize, 10);
const clamped = clamp(size, min, max);
if (clamped !== size) {
this.onFontSizeChanged(clamped);
}
}
}}
useCheckbox={true}
/>