Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Commit

Permalink
ARIA Accessibility improvements (#10675)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@t3chguy
t3chguy authored Apr 21, 2023
1 parent 259b5fe commit 792a39a
Show file tree
Hide file tree
Showing 21 changed files with 197 additions and 137 deletions.
13 changes: 6 additions & 7 deletions res/css/structures/_SpaceRoomView.pcss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,15 +23,14 @@ $SpaceRoomViewInnerWidth: 428px;
box-sizing: border-box;
border-radius: 8px;
border: 1px solid $input-border-color;
font-size: $font-15px;
font-size: $font-17px;
font-weight: $font-semi-bold;
margin: 20px 0;

> h3 {
font-weight: $font-semi-bold;
margin: 0 0 4px;
}

> span {
> div {
margin-top: 4px;
font-weight: normal;
font-size: $font-15px;
color: $secondary-content;
}

Expand Down
7 changes: 6 additions & 1 deletion res/css/views/settings/_CrossSigningPanel.pcss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,12 @@ limitations under the License.
.mx_CrossSigningPanel_statusList {
border-spacing: 0;

td {
th {
text-align: start;
}

td,
th {
padding: 0;

&:first-of-type {
Expand Down
30 changes: 24 additions & 6 deletions res/css/views/settings/_CryptographyPanel.pcss
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,35 @@
/*
Copyright 2023 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

.mx_CryptographyPanel_sessionInfo {
padding: 0em;
border-spacing: 0px;
}
.mx_CryptographyPanel_sessionInfo > tr {
vertical-align: baseline;
padding: 0em;
}

.mx_CryptographyPanel_sessionInfo > tr > td {
padding-bottom: 0em;
padding-left: 0em;
padding-right: 1em;
padding-top: 0em;
th {
text-align: start;
}

td,
th {
padding: 0 1em 0 0;
}
}

.mx_CryptographyPanel_importExportButtons .mx_AccessibleButton {
Expand Down
7 changes: 6 additions & 1 deletion res/css/views/settings/_SecureBackupPanel.pcss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,12 @@ limitations under the License.
.mx_SecureBackupPanel_statusList {
border-spacing: 0;

td {
th {
text-align: start;
}

td,
th {
padding: 0;

&:first-of-type {
Expand Down
4 changes: 2 additions & 2 deletions src/components/structures/SpaceRoomView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -476,7 +476,7 @@ const SpaceSetupPrivateScope: React.FC<{
onFinished(false);
}}
>
<h3>{_t("Just me")}</h3>
{_t("Just me")}
<div>{_t("A private space to organise your rooms")}</div>
</AccessibleButton>
<AccessibleButton
Expand All @@ -485,7 +485,7 @@ const SpaceSetupPrivateScope: React.FC<{
onFinished(true);
}}
>
<h3>{_t("Me and my teammates")}</h3>
{_t("Me and my teammates")}
<div>{_t("A private space for you and your teammates")}</div>
</AccessibleButton>
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/components/views/elements/EventTilePreview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,8 +128,8 @@ export default class EventTilePreview extends React.Component<IProps, IState> {
const event = this.fakeEvent(this.state);

return (
<div className={className}>
<EventTile mxEvent={event} layout={this.props.layout} as="div" />
<div className={className} role="presentation">
<EventTile mxEvent={event} layout={this.props.layout} as="div" hideTimestamp inhibitInteraction />
</div>
);
}
Expand Down
19 changes: 8 additions & 11 deletions src/components/views/elements/LabelledToggleSwitch.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ limitations under the License.

import React from "react";
import classNames from "classnames";
import { randomString } from "matrix-js-sdk/src/randomstring";

import ToggleSwitch from "./ToggleSwitch";
import { Caption } from "../typography/Caption";
Expand Down Expand Up @@ -43,34 +44,30 @@ interface IProps {
}

export default class LabelledToggleSwitch extends React.PureComponent<IProps> {
private readonly id = `mx_LabelledToggleSwitch_${randomString(12)}`;

public render(): React.ReactNode {
// This is a minimal version of a SettingsFlag
const { label, caption } = this.props;
let firstPart = (
<span className="mx_SettingsFlag_label">
{label}
{caption && (
<>
<br />
<Caption>{caption}</Caption>
</>
)}
<div id={this.id}>{label}</div>
{caption && <Caption id={`${this.id}_caption`}>{caption}</Caption>}
</span>
);
let secondPart = (
<ToggleSwitch
checked={this.props.value}
disabled={this.props.disabled}
onChange={this.props.onChange}
title={this.props.label}
tooltip={this.props.tooltip}
aria-labelledby={this.id}
aria-describedby={caption ? `${this.id}_caption` : undefined}
/>
);

if (this.props.toggleInFront) {
const temp = firstPart;
firstPart = secondPart;
secondPart = temp;
[firstPart, secondPart] = [secondPart, firstPart];
}

const classes = classNames("mx_SettingsFlag", this.props.className, {
Expand Down
4 changes: 1 addition & 3 deletions src/components/views/elements/ToggleSwitch.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ interface IProps {
}

// Controlled Toggle Switch element, written with Accessibility in mind
export default ({ checked, disabled = false, title, tooltip, onChange, ...props }: IProps): JSX.Element => {
export default ({ checked, disabled = false, onChange, ...props }: IProps): JSX.Element => {
const _onClick = (): void => {
if (disabled) return;
onChange(!checked);
Expand All @@ -61,8 +61,6 @@ export default ({ checked, disabled = false, title, tooltip, onChange, ...props
role="switch"
aria-checked={checked}
aria-disabled={disabled}
title={title}
tooltip={tooltip}
>
<div className="mx_ToggleSwitch_ball" />
</AccessibleTooltipButton>
Expand Down
19 changes: 13 additions & 6 deletions src/components/views/rooms/EventTile.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -218,6 +218,10 @@ export interface EventTileProps {
// displayed to the current user either because they're
// the author or they are a moderator
isSeeingThroughMessageHiddenForModeration?: boolean;

// The following properties are used by EventTilePreview to disable tab indexes within the event tile
hideTimestamp?: boolean;
inhibitInteraction?: boolean;
}

interface IState {
Expand Down Expand Up @@ -1006,7 +1010,7 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
}

if (this.props.mxEvent.sender && avatarSize) {
let member;
let member: RoomMember | null = null;
// set member to receiver (target) if it is a 3PID invite
// so that the correct avatar is shown as the text is
// `$target accepted the invitation for $email`
Expand All @@ -1016,9 +1020,11 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
member = this.props.mxEvent.sender;
}
// In the ThreadsList view we use the entire EventTile as a click target to open the thread instead
const viewUserOnClick = ![TimelineRenderingType.ThreadsList, TimelineRenderingType.Notification].includes(
this.context.timelineRenderingType,
);
const viewUserOnClick =
!this.props.inhibitInteraction &&
![TimelineRenderingType.ThreadsList, TimelineRenderingType.Notification].includes(
this.context.timelineRenderingType,
);
avatar = (
<div className="mx_EventTile_avatar">
<MemberAvatar
Expand Down Expand Up @@ -1064,6 +1070,7 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>

const showTimestamp =
this.props.mxEvent.getTs() &&
!this.props.hideTimestamp &&
(this.props.alwaysShowTimestamps ||
this.props.last ||
this.state.hover ||
Expand Down Expand Up @@ -1101,7 +1108,7 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
);
}

const linkedTimestamp = (
const linkedTimestamp = !this.props.hideTimestamp ? (
<a
href={permalink}
onClick={this.onPermalinkClicked}
Expand All @@ -1110,7 +1117,7 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
>
{timestamp}
</a>
);
) : null;

const useIRCLayout = this.props.layout === Layout.IRC;
const groupTimestamp = !useIRCLayout ? linkedTimestamp : null;
Expand Down
58 changes: 28 additions & 30 deletions src/components/views/settings/CrossSigningPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -243,36 +243,34 @@ export default class CrossSigningPanel extends React.PureComponent<{}, IState> {
<details>
<summary>{_t("Advanced")}</summary>
<table className="mx_CrossSigningPanel_statusList">
<tbody>
<tr>
<td>{_t("Cross-signing public keys:")}</td>
<td>{crossSigningPublicKeysOnDevice ? _t("in memory") : _t("not found")}</td>
</tr>
<tr>
<td>{_t("Cross-signing private keys:")}</td>
<td>
{crossSigningPrivateKeysInStorage
? _t("in secret storage")
: _t("not found in storage")}
</td>
</tr>
<tr>
<td>{_t("Master private key:")}</td>
<td>{masterPrivateKeyCached ? _t("cached locally") : _t("not found locally")}</td>
</tr>
<tr>
<td>{_t("Self signing private key:")}</td>
<td>{selfSigningPrivateKeyCached ? _t("cached locally") : _t("not found locally")}</td>
</tr>
<tr>
<td>{_t("User signing private key:")}</td>
<td>{userSigningPrivateKeyCached ? _t("cached locally") : _t("not found locally")}</td>
</tr>
<tr>
<td>{_t("Homeserver feature support:")}</td>
<td>{homeserverSupportsCrossSigning ? _t("exists") : _t("not found")}</td>
</tr>
</tbody>
<tr>
<th scope="row">{_t("Cross-signing public keys:")}</th>
<td>{crossSigningPublicKeysOnDevice ? _t("in memory") : _t("not found")}</td>
</tr>
<tr>
<th scope="row">{_t("Cross-signing private keys:")}</th>
<td>
{crossSigningPrivateKeysInStorage
? _t("in secret storage")
: _t("not found in storage")}
</td>
</tr>
<tr>
<th scope="row">{_t("Master private key:")}</th>
<td>{masterPrivateKeyCached ? _t("cached locally") : _t("not found locally")}</td>
</tr>
<tr>
<th scope="row">{_t("Self signing private key:")}</th>
<td>{selfSigningPrivateKeyCached ? _t("cached locally") : _t("not found locally")}</td>
</tr>
<tr>
<th scope="row">{_t("User signing private key:")}</th>
<td>{userSigningPrivateKeyCached ? _t("cached locally") : _t("not found locally")}</td>
</tr>
<tr>
<th scope="row">{_t("Homeserver feature support:")}</th>
<td>{homeserverSupportsCrossSigning ? _t("exists") : _t("not found")}</td>
</tr>
</table>
</details>
{errorSection}
Expand Down
30 changes: 14 additions & 16 deletions src/components/views/settings/CryptographyPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,22 +75,20 @@ export default class CryptographyPanel extends React.Component<IProps, IState> {
<div className="mx_SettingsTab_section mx_CryptographyPanel">
<span className="mx_SettingsTab_subheading">{_t("Cryptography")}</span>
<table className="mx_SettingsTab_subsectionText mx_CryptographyPanel_sessionInfo">
<tbody>
<tr>
<td>{_t("Session ID:")}</td>
<td>
<code>{deviceId}</code>
</td>
</tr>
<tr>
<td>{_t("Session key:")}</td>
<td>
<code>
<b>{identityKey}</b>
</code>
</td>
</tr>
</tbody>
<tr>
<th scope="row">{_t("Session ID:")}</th>
<td>
<code>{deviceId}</code>
</td>
</tr>
<tr>
<th scope="row">{_t("Session key:")}</th>
<td>
<code>
<b>{identityKey}</b>
</code>
</td>
</tr>
</table>
{importExportButtons}
{noSendUnverifiedSetting}
Expand Down
Loading

0 comments on commit 792a39a

Please sign in to comment.