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

src/components/views/elements/EventTilePreview.tsx

@@ -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>
         );
     }

src/components/views/elements/LabelledToggleSwitch.tsx

@@ -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";
@@ -43,18 +44,15 @@ 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 = (
@@ -62,15 +60,14 @@ export default class LabelledToggleSwitch extends React.PureComponent<IProps> {
                 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, {

src/components/views/elements/ToggleSwitch.tsx

@@ -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);
@@ -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>