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

ARIA Accessibility improvements (#10675)

Browse source 
* Fix confusing tab indexes in EventTilePreview

* Stop using headings inside buttons

* Prefer labelledby and describedby over duplicated aria-labels

* Improve semantics of tables used in settings

* Fix types

* Update tests

* Fix timestamps
This commit is contained in:
Michael Telatynski 2023-04-21 10:48:48 +01:00 • committed by GitHub
parent 259b5fe253
commit 792a39a39b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
21 changed files with 197 additions and 137 deletions
Download patch file Download diff file Expand all files Collapse all files

12
test/components/views/settings/Notifications-test.tsx
View file

@ -27,8 +27,10 @@ import {
ConditionKind,
IPushRuleCondition,
} from "matrix-js-sdk/src/matrix";
import { randomString } from "matrix-js-sdk/src/randomstring";
import { IThreepid, ThreepidMedium } from "matrix-js-sdk/src/@types/threepids";
import { act, fireEvent, getByTestId, render, screen, waitFor, within } from "@testing-library/react";
import { mocked } from "jest-mock";
import Notifications from "../../../../src/components/views/settings/Notifications";
import SettingsStore from "../../../../src/settings/SettingsStore";
@ -41,6 +43,11 @@ jest.mock("matrix-js-sdk/src/logger");
// Avoid indirectly importing any eagerly created stores that would require extra setup
jest.mock("../../../../src/Notifier");
// Fake random strings to give a predictable snapshot for IDs
jest.mock("matrix-js-sdk/src/randomstring", () => ({
randomString: jest.fn(),
}));
const masterRule: IPushRule = {
actions: [PushRuleActionName.DontNotify],
conditions: [],
@ -271,6 +278,11 @@ describe("<Notifications />", () => {
mockClient.getPushRules.mockResolvedValue(pushRules);
beforeEach(() => {
let i = 0;
mocked(randomString).mockImplementation(() => {
return "testid_" + i++;
});
mockClient.getPushRules.mockClear().mockResolvedValue(pushRules);
mockClient.getPushers.mockClear().mockResolvedValue({ pushers: [] });
mockClient.getThreePids.mockClear().mockResolvedValue({ threepids: [] });

11
test/components/views/settings/__snapshots__/Notifications-test.tsx.snap
View file

@ -12,18 +12,23 @@ exports[`<Notifications /> main notification switches renders only enable notifi
<span
class="mx_SettingsFlag_label"
>
Enable notifications for this account
<br />
<div
id="mx_LabelledToggleSwitch_testid_0"
>
Enable notifications for this account
</div>
<span
class="mx_Caption"
id="mx_LabelledToggleSwitch_testid_0_caption"
>
Turn off to disable notifications on all your devices and sessions
</span>
</span>
<div
aria-checked="false"
aria-describedby="mx_LabelledToggleSwitch_testid_0_caption"
aria-disabled="false"
aria-label="Enable notifications for this account"
aria-labelledby="mx_LabelledToggleSwitch_testid_0"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
role="switch"
tabindex="0"