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

18
test/components/views/settings/FontScalingPanel-test.tsx
View file

@ -15,10 +15,11 @@ limitations under the License.
*/
import React from "react";
import { render } from "@testing-library/react";
import { fireEvent, render, waitFor } from "@testing-library/react";
import * as TestUtils from "../../../test-utils";
import FontScalingPanel from "../../../../src/components/views/settings/FontScalingPanel";
import SettingsStore from "../../../../src/settings/SettingsStore";
// Fake random strings to give a predictable snapshot
jest.mock("matrix-js-sdk/src/randomstring", () => {
@ -33,4 +34,19 @@ describe("FontScalingPanel", () => {
const { asFragment } = render(<FontScalingPanel />);
expect(asFragment()).toMatchSnapshot();
});
it("should clamp custom font size when disabling it", async () => {
jest.spyOn(SettingsStore, "setValue").mockResolvedValue(undefined);
TestUtils.stubClient();
const { container, getByText } = render(<FontScalingPanel />);
fireEvent.click(getByText("Use custom size"));
await waitFor(() => {
expect(container.querySelector("input[checked]")).toBeDefined();
});
fireEvent.change(container.querySelector("#font_size_field")!, { target: { value: "20" } });
fireEvent.click(getByText("Use custom size"));
await waitFor(() => {
expect(container.querySelector("#font_size_field")).toHaveValue(18);
});
});
});

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"