Improve accessibility of font slider (#10473)
* 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:
parent
bef6eca484
commit
d2066ba5f5
5 changed files with 189 additions and 286 deletions
|
@ -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);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
@ -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"
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue