ARIA Accessibility improvements (#10675)

* 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

View file

@ -72,6 +72,11 @@ jest.mock("../../../../src/Modal", () => ({
ModalManagerEvent: { Opened: "opened" },
}));
// Fake random strings to give a predictable snapshot for IDs
jest.mock("matrix-js-sdk/src/randomstring", () => ({
randomString: () => "abdefghi",
}));
describe("<LocationShareMenu />", () => {
const userId = "@ernie:server.org";
const mockClient = getMockClientWithEventEmitter({

View file

@ -25,12 +25,16 @@ exports[`<LocationShareMenu /> with live location disabled goes to labs flag scr
<span
class="mx_SettingsFlag_label"
>
Enable live location sharing
<div
id="mx_LabelledToggleSwitch_abdefghi"
>
Enable live location sharing
</div>
</span>
<div
aria-checked="false"
aria-disabled="false"
aria-label="Enable live location sharing"
aria-labelledby="mx_LabelledToggleSwitch_abdefghi"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
role="switch"
tabindex="0"