Ensure tooltip contents is linked via aria to the target element (#10729)

* Ensure tooltip contents is linked via aria to the target element

* Iterate

* Fix tests

* Fix tests

* Update snapshot

* Fix missing aria labels for more tooltips

* Iterate

* Update snapshots

res/css/views/right_panel/_UserInfo.pcss

@@ -163,6 +163,8 @@ limitations under the License.
             line-height: $font-25px;
             flex: 1;
             justify-content: center;
+            // We reverse things here so for accessible technologies the name comes before the e2e shield
+            flex-direction: row-reverse;
 
             span {
                 /* limit to 2 lines, show an ellipsis if it overflows */

src/components/structures/auth/forgot-password/CheckEmail.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { ReactNode } from "react";
+import React, { ReactNode, useRef } from "react";
 
 import AccessibleButton from "../../../views/elements/AccessibleButton";
 import { Icon as EMailPromptIcon } from "../../../../../res/img/element-icons/email-prompt.svg";
@@ -42,6 +42,7 @@ export const CheckEmail: React.FC<CheckEmailProps> = ({
     onSubmitForm,
     onResendClick,
 }) => {
+    const tooltipId = useRef(`mx_CheckEmail_${Math.random()}`).current;
     const { toggle: toggleTooltipVisible, value: tooltipVisible } = useTimeoutToggle(false, 2500);
 
     const onResendClickFn = async (): Promise<void> => {
@@ -68,10 +69,16 @@ export const CheckEmail: React.FC<CheckEmailProps> = ({
             <input onClick={onSubmitForm} type="button" className="mx_Login_submit" value={_t("Next")} />
             <div className="mx_AuthBody_did-not-receive">
                 <span className="mx_VerifyEMailDialog_text-light">{_t("Did not receive it?")}</span>
-                <AccessibleButton className="mx_AuthBody_resend-button" kind="link" onClick={onResendClickFn}>
+                <AccessibleButton
+                    className="mx_AuthBody_resend-button"
+                    kind="link"
+                    onClick={onResendClickFn}
+                    aria-describedby={tooltipVisible ? tooltipId : undefined}
+                >
                     <RetryIcon className="mx_Icon mx_Icon_16" />
                     {_t("Resend")}
                     <Tooltip
+                        id={tooltipId}
                         label={_t("Verification link email resent!")}
                         alignment={Alignment.Top}
                         visible={tooltipVisible}

src/components/structures/auth/forgot-password/VerifyEmailModal.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { ReactNode } from "react";
+import React, { ReactNode, useRef } from "react";
 
 import { _t } from "../../../../languageHandler";
 import AccessibleButton from "../../../views/elements/AccessibleButton";
@@ -40,6 +40,7 @@ export const VerifyEmailModal: React.FC<Props> = ({
     onReEnterEmailClick,
     onResendClick,
 }) => {
+    const tooltipId = useRef(`mx_VerifyEmailModal_${Math.random()}`).current;
     const { toggle: toggleTooltipVisible, value: tooltipVisible } = useTimeoutToggle(false, 2500);
 
     const onResendClickFn = async (): Promise<void> => {
@@ -66,10 +67,16 @@ export const VerifyEmailModal: React.FC<Props> = ({
 
             <div className="mx_AuthBody_did-not-receive">
                 <span className="mx_VerifyEMailDialog_text-light">{_t("Did not receive it?")}</span>
-                <AccessibleButton className="mx_AuthBody_resend-button" kind="link" onClick={onResendClickFn}>
+                <AccessibleButton
+                    className="mx_AuthBody_resend-button"
+                    kind="link"
+                    onClick={onResendClickFn}
+                    aria-describedby={tooltipVisible ? tooltipId : undefined}
+                >
                     <RetryIcon className="mx_Icon mx_Icon_16" />
                     {_t("Resend")}
                     <Tooltip
+                        id={tooltipId}
                         label={_t("Verification link email resent!")}
                         alignment={Alignment.Top}
                         visible={tooltipVisible}

src/components/views/dialogs/UntrustedDeviceDialog.tsx

@@ -31,8 +31,8 @@ interface IProps {
 }
 
 const UntrustedDeviceDialog: React.FC<IProps> = ({ device, user, onFinished }) => {
-    let askToVerifyText;
+    let askToVerifyText: string;
-    let newSessionText;
+    let newSessionText: string;
 
     if (MatrixClientPeg.get().getUserId() === user.userId) {
         newSessionText = _t("You signed in to a new session without verifying it:");
@@ -51,7 +51,7 @@ const UntrustedDeviceDialog: React.FC<IProps> = ({ device, user, onFinished }) =
             className="mx_UntrustedDeviceDialog"
             title={
                 <>
-                    <E2EIcon status={E2EState.Warning} size={24} hideTooltip={true} />
+                    <E2EIcon status={E2EState.Warning} isUser size={24} hideTooltip={true} />
                     {_t("Not Trusted")}
                 </>
             }

src/components/views/elements/LinkWithTooltip.tsx

@@ -18,7 +18,9 @@ import React from "react";
 
 import TextWithTooltip from "./TextWithTooltip";
 
-interface IProps extends Omit<React.ComponentProps<typeof TextWithTooltip>, "tabIndex" | "onClick"> {}
+interface IProps extends Omit<React.ComponentProps<typeof TextWithTooltip>, "tabIndex" | "onClick" | "tooltip"> {
+    tooltip: string;
+}
 
 export default class LinkWithTooltip extends React.Component<IProps> {
     public constructor(props: IProps) {

src/components/views/elements/Pill.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { ReactElement, useState } from "react";
+import React, { ReactElement, useRef, useState } from "react";
 import classNames from "classnames";
 import { Room } from "matrix-js-sdk/src/models/room";
 import { RoomMember } from "matrix-js-sdk/src/matrix";
@@ -89,6 +89,7 @@ export interface PillProps {
 }
 
 export const Pill: React.FC<PillProps> = ({ type: propType, url, inMessage, room, shouldShowPillAvatar = true }) => {
+    const tooltipId = useRef(`mx_Pill_${Math.random()}`).current;
     const [hover, setHover] = useState(false);
     const { event, member, onClick, resourceId, targetRoom, text, type } = usePermalink({
         room,
@@ -117,7 +118,7 @@ export const Pill: React.FC<PillProps> = ({ type: propType, url, inMessage, room
         setHover(false);
     };
 
-    const tip = hover && resourceId ? <Tooltip label={resourceId} alignment={Alignment.Right} /> : null;
+    const tip = hover && resourceId ? <Tooltip id={tooltipId} label={resourceId} alignment={Alignment.Right} /> : null;
     let avatar: ReactElement | null = null;
     let pillText: string | null = text;
 
@@ -165,13 +166,19 @@ export const Pill: React.FC<PillProps> = ({ type: propType, url, inMessage, room
                         onClick={onClick}
                         onMouseOver={onMouseOver}
                         onMouseLeave={onMouseLeave}
+                        aria-describedby={tooltipId}
                     >
                         {avatar}
                         <span className="mx_Pill_text">{pillText}</span>
                         {tip}
                     </a>
                 ) : (
-                    <span className={classes} onMouseOver={onMouseOver} onMouseLeave={onMouseLeave}>
+                    <span
+                        className={classes}
+                        onMouseOver={onMouseOver}
+                        onMouseLeave={onMouseLeave}
+                        aria-describedby={tooltipId}
+                    >
                         {avatar}
                         <span className="mx_Pill_text">{pillText}</span>
                         {tip}

src/components/views/elements/TextWithTooltip.tsx

@@ -35,6 +35,10 @@ export default class TextWithTooltip extends React.Component<IProps> {
     public render(): React.ReactNode {
         const { class: className, children, tooltip, tooltipClass, tooltipProps, ...props } = this.props;
 
+        if (typeof tooltip === "string") {
+            props["aria-label"] = tooltip;
+        }
+
         return (
             <TooltipTarget
                 onClick={this.props.onClick}

src/components/views/elements/Tooltip.tsx

@@ -188,7 +188,7 @@ export default class Tooltip extends React.PureComponent<ITooltipProps, State> {
         style.display = this.props.visible ? "block" : "none";
 
         const tooltip = (
-            <div role={this.props.role || "tooltip"} className={tooltipClasses} style={style}>
+            <div id={this.props.id} role={this.props.role || "tooltip"} className={tooltipClasses} style={style}>
                 <div className="mx_Tooltip_chevron" />
                 {this.props.label}
             </div>

src/components/views/messages/ReactionsRowButton.tsx

@@ -92,7 +92,7 @@ export default class ReactionsRowButton extends React.PureComponent<IProps, ISta
             mx_ReactionsRowButton_selected: !!myReactionEvent,
         });
 
-        let tooltip;
+        let tooltip: JSX.Element | undefined;
         if (this.state.tooltipRendered) {
             tooltip = (
                 <ReactionsRowButtonTooltip

src/components/views/messages/ReactionsRowButtonTooltip.tsx

@@ -40,7 +40,7 @@ export default class ReactionsRowButtonTooltip extends React.PureComponent<IProp
         const { content, reactionEvents, mxEvent, visible } = this.props;
 
         const room = this.context.getRoom(mxEvent.getRoomId());
-        let tooltipLabel;
+        let tooltipLabel: JSX.Element | undefined;
         if (room) {
             const senders: string[] = [];
             for (const reactionEvent of reactionEvents) {
@@ -72,7 +72,7 @@ export default class ReactionsRowButtonTooltip extends React.PureComponent<IProp
             );
         }
 
-        let tooltip;
+        let tooltip: JSX.Element | undefined;
         if (tooltipLabel) {
             tooltip = <Tooltip visible={visible} label={tooltipLabel} />;
         }

src/components/views/right_panel/UserInfo.tsx

@@ -1560,9 +1560,9 @@ export const UserInfoHeader: React.FC<{
         </div>
     );
 
-    let presenceState;
+    let presenceState: string | undefined;
-    let presenceLastActiveAgo;
+    let presenceLastActiveAgo: number | undefined;
-    let presenceCurrentlyActive;
+    let presenceCurrentlyActive: boolean | undefined;
     if (member instanceof RoomMember && member.user) {
         presenceState = member.user.presence;
         presenceLastActiveAgo = member.user.lastActiveAgo;
@@ -1597,10 +1597,10 @@ export const UserInfoHeader: React.FC<{
                 <div className="mx_UserInfo_profile">
                     <div>
                         <h2>
-                            {e2eIcon}
                             <span title={displayName} aria-label={displayName} dir="auto">
                                 {displayName}
                             </span>
+                            {e2eIcon}
                         </h2>
                     </div>
                     <div className="mx_UserInfo_profile_mxid">

src/components/views/rooms/E2EIcon.tsx

@@ -22,6 +22,7 @@ import { _t, _td } from "../../../languageHandler";
 import AccessibleButton from "../elements/AccessibleButton";
 import Tooltip, { Alignment } from "../elements/Tooltip";
 import { E2EStatus } from "../../../utils/ShieldUtils";
+import { XOR } from "../../../@types/common";
 
 export enum E2EState {
     Verified = "verified",
@@ -42,9 +43,7 @@ const crossSigningRoomTitles: { [key in E2EState]?: string } = {
     [E2EState.Verified]: _td("Everyone in this room is verified"),
 };
 
-interface IProps {
+interface Props {
-    isUser?: boolean;
-    status?: E2EState | E2EStatus;
     className?: string;
     size?: number;
     onClick?: () => void;
@@ -53,7 +52,17 @@ interface IProps {
     bordered?: boolean;
 }
 
-const E2EIcon: React.FC<IProps> = ({
+interface UserProps extends Props {
+    isUser: true;
+    status: E2EState | E2EStatus;
+}
+
+interface RoomProps extends Props {
+    isUser?: false;
+    status: E2EStatus;
+}
+
+const E2EIcon: React.FC<XOR<UserProps, RoomProps>> = ({
     isUser,
     status,
     className,
@@ -77,12 +86,10 @@ const E2EIcon: React.FC<IProps> = ({
     );
 
     let e2eTitle: string | undefined;
-    if (status) {
+    if (isUser) {
-        if (isUser) {
+        e2eTitle = crossSigningUserTitles[status];
-            e2eTitle = crossSigningUserTitles[status];
+    } else {
-        } else {
+        e2eTitle = crossSigningRoomTitles[status];
-            e2eTitle = crossSigningRoomTitles[status];
-        }
     }
 
     let style: CSSProperties | undefined;
@@ -93,9 +100,11 @@ const E2EIcon: React.FC<IProps> = ({
     const onMouseOver = (): void => setHover(true);
     const onMouseLeave = (): void => setHover(false);
 
+    const label = e2eTitle ? _t(e2eTitle) : "";
+
     let tip: JSX.Element | undefined;
-    if (hover && !hideTooltip) {
+    if (hover && !hideTooltip && label) {
-        tip = <Tooltip label={e2eTitle ? _t(e2eTitle) : ""} alignment={tooltipAlignment} />;
+        tip = <Tooltip label={label} alignment={tooltipAlignment} />;
     }
 
     if (onClick) {
@@ -106,6 +115,7 @@ const E2EIcon: React.FC<IProps> = ({
                 onMouseLeave={onMouseLeave}
                 className={classes}
                 style={style}
+                aria-label={label}
             >
                 {tip}
             </AccessibleButton>
@@ -113,7 +123,7 @@ const E2EIcon: React.FC<IProps> = ({
     }
 
     return (
-        <div onMouseOver={onMouseOver} onMouseLeave={onMouseLeave} className={classes} style={style}>
+        <div onMouseOver={onMouseOver} onMouseLeave={onMouseLeave} className={classes} style={style} aria-label={label}>
             {tip}
         </div>
     );

src/components/views/rooms/EventTile.tsx

@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { createRef, forwardRef, MouseEvent, ReactNode, RefObject } from "react";
+import React, { createRef, forwardRef, MouseEvent, ReactNode, RefObject, useRef } from "react";
 import classNames from "classnames";
 import { EventType, MsgType, RelationType } from "matrix-js-sdk/src/@types/event";
 import { EventStatus, MatrixEvent, MatrixEventEvent } from "matrix-js-sdk/src/models/event";
@@ -1513,7 +1513,12 @@ class E2ePadlock extends React.Component<IE2ePadlockProps, IE2ePadlockState> {
 
         const classes = `mx_EventTile_e2eIcon mx_EventTile_e2eIcon_${this.props.icon}`;
         return (
-            <div className={classes} onMouseEnter={this.onHoverStart} onMouseLeave={this.onHoverEnd}>
+            <div
+                className={classes}
+                onMouseEnter={this.onHoverStart}
+                onMouseLeave={this.onHoverEnd}
+                aria-label={this.props.title}
+            >
                 {tooltip}
             </div>
         );
@@ -1525,6 +1530,7 @@ interface ISentReceiptProps {
 }
 
 function SentReceipt({ messageState }: ISentReceiptProps): JSX.Element {
+    const tooltipId = useRef(`mx_SentReceipt_${Math.random()}`).current;
     const isSent = !messageState || messageState === "sent";
     const isFailed = messageState === "not_sent";
     const receiptClasses = classNames({
@@ -1546,6 +1552,7 @@ function SentReceipt({ messageState }: ISentReceiptProps): JSX.Element {
         label = _t("Failed to send");
     }
     const [{ showTooltip, hideTooltip }, tooltip] = useTooltip({
+        id: tooltipId,
         label: label,
         alignment: Alignment.TopRight,
     });
@@ -1559,6 +1566,7 @@ function SentReceipt({ messageState }: ISentReceiptProps): JSX.Element {
                     onMouseLeave={hideTooltip}
                     onFocus={showTooltip}
                     onBlur={hideTooltip}
+                    aria-describedby={tooltipId}
                 >
                     <span className="mx_ReadReceiptGroup_container">
                         <span className={receiptClasses}>{nonCssBadge}</span>

src/components/views/rooms/MessageComposer.tsx

@@ -107,6 +107,7 @@ interface IState {
 }
 
 export class MessageComposer extends React.Component<IProps, IState> {
+    private tooltipId = `mx_MessageComposer_${Math.random()}`;
     private dispatcherRef?: string;
     private messageComposerInput = createRef<SendMessageComposerClass>();
     private voiceRecordingButton = createRef<VoiceRecordComposerTile>();
@@ -470,7 +471,7 @@ export class MessageComposer extends React.Component<IProps, IState> {
     public render(): React.ReactNode {
         const hasE2EIcon = Boolean(!this.state.isWysiwygLabEnabled && this.props.e2eStatus);
         const e2eIcon = hasE2EIcon && (
-            <E2EIcon key="e2eIcon" status={this.props.e2eStatus} className="mx_MessageComposer_e2eIcon" />
+            <E2EIcon key="e2eIcon" status={this.props.e2eStatus!} className="mx_MessageComposer_e2eIcon" />
         );
 
         const controls: ReactNode[] = [];
@@ -561,11 +562,15 @@ export class MessageComposer extends React.Component<IProps, IState> {
             );
         }
 
-        let recordingTooltip;
+        let recordingTooltip: JSX.Element | undefined;
         if (this.state.recordingTimeLeftSeconds) {
             const secondsLeft = Math.round(this.state.recordingTimeLeftSeconds);
             recordingTooltip = (
-                <Tooltip label={_t("%(seconds)ss left", { seconds: secondsLeft })} alignment={Alignment.Top} />
+                <Tooltip
+                    id={this.tooltipId}
+                    label={_t("%(seconds)ss left", { seconds: secondsLeft })}
+                    alignment={Alignment.Top}
+                />
             );
         }
 
@@ -593,7 +598,11 @@ export class MessageComposer extends React.Component<IProps, IState> {
         });
 
         return (
-            <div className={classes} ref={this.ref}>
+            <div
+                className={classes}
+                ref={this.ref}
+                aria-describedby={this.state.recordingTimeLeftSeconds ? this.tooltipId : undefined}
+            >
                 {recordingTooltip}
                 <div className="mx_MessageComposer_wrapper">
                     <ReplyPreview

test/components/structures/__snapshots__/RoomView-test.tsx.snap

@@ -579,6 +579,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
           </div>
         </div>
         <div
+          aria-label="This room is end-to-end encrypted"
           class="mx_E2EIcon mx_E2EIcon_normal mx_RoomHeader_icon"
         />
         <div

test/components/views/elements/Pill-test.tsx

@@ -117,6 +117,12 @@ describe("<Pill>", () => {
 
         jest.spyOn(dis, "dispatch");
         pillParentClickHandler = jest.fn();
+
+        jest.spyOn(global.Math, "random").mockReturnValue(0.123456);
+    });
+
+    afterEach(() => {
+        jest.spyOn(global.Math, "random").mockRestore();
     });
 
     describe("when rendering a pill for a room", () => {

test/components/views/elements/__snapshots__/Pill-test.tsx.snap

@@ -11,6 +11,7 @@ exports[`<Pill> should not render an avatar or link when called with inMessage =
   <div>
     <bdi>
       <span
+        aria-describedby="mx_Pill_0.123456"
         class="mx_Pill mx_RoomPill"
       >
         <span
@@ -29,6 +30,7 @@ exports[`<Pill> should render the expected pill for @room 1`] = `
   <div>
     <bdi>
       <span
+        aria-describedby="mx_Pill_0.123456"
         class="mx_Pill mx_AtRoomPill"
       >
         <span
@@ -68,6 +70,7 @@ exports[`<Pill> should render the expected pill for a known user not in the room
   <div>
     <bdi>
       <a
+        aria-describedby="mx_Pill_0.123456"
         class="mx_Pill mx_UserPill"
         href="https://matrix.to/#/@user2:example.com"
       >
@@ -108,6 +111,7 @@ exports[`<Pill> should render the expected pill for a message in another room 1`
   <div>
     <bdi>
       <a
+        aria-describedby="mx_Pill_0.123456"
         class="mx_Pill mx_EventPill"
         href="https://matrix.to/#/!room1:example.com/$123-456"
       >
@@ -148,6 +152,7 @@ exports[`<Pill> should render the expected pill for a message in the same room 1
   <div>
     <bdi>
       <a
+        aria-describedby="mx_Pill_0.123456"
         class="mx_Pill mx_EventPill"
         href="https://matrix.to/#/!room1:example.com/$123-456"
       >
@@ -188,6 +193,7 @@ exports[`<Pill> should render the expected pill for a room alias 1`] = `
   <div>
     <bdi>
       <a
+        aria-describedby="mx_Pill_0.123456"
         class="mx_Pill mx_RoomPill"
         href="https://matrix.to/#/#room1:example.com"
       >
@@ -228,6 +234,7 @@ exports[`<Pill> should render the expected pill for a space 1`] = `
   <div>
     <bdi>
       <a
+        aria-describedby="mx_Pill_0.123456"
         class="mx_Pill mx_RoomPill"
         href="https://matrix.to/#/!space1:example.com"
       >
@@ -268,6 +275,7 @@ exports[`<Pill> should render the expected pill for an uknown user not in the ro
   <div>
     <bdi>
       <a
+        aria-describedby="mx_Pill_0.123456"
         class="mx_Pill mx_UserPill"
         href="https://matrix.to/#/@user3:example.com"
       >
@@ -290,6 +298,7 @@ exports[`<Pill> when rendering a pill for a room should render the expected pill
   <div>
     <bdi>
       <a
+        aria-describedby="mx_Pill_0.123456"
         class="mx_Pill mx_RoomPill"
         href="https://matrix.to/#/!room1:example.com"
       >
@@ -330,6 +339,7 @@ exports[`<Pill> when rendering a pill for a user in the room should render as ex
   <div>
     <bdi>
       <a
+        aria-describedby="mx_Pill_0.123456"
         class="mx_Pill mx_UserPill"
         href="https://matrix.to/#/@user1:example.com"
       >

test/components/views/elements/__snapshots__/TooltipTarget-test.tsx.snap

@@ -3,6 +3,7 @@
 exports[`<TooltipTarget /> displays Bottom aligned tooltip on mouseover 1`] = `
 <div
   class="mx_Tooltip test tooltipClassName mx_Tooltip_visible"
+  id="test id"
   role="tooltip"
   style="display: block; top: 6px; transform: translate(max(10px, min(calc(0px - 50%), calc(100vw - 100% - 10px))));"
 >
@@ -16,6 +17,7 @@ exports[`<TooltipTarget /> displays Bottom aligned tooltip on mouseover 1`] = `
 exports[`<TooltipTarget /> displays InnerBottom aligned tooltip on mouseover 1`] = `
 <div
   class="mx_Tooltip test tooltipClassName mx_Tooltip_visible"
+  id="test id"
   role="tooltip"
   style="display: block; top: -50px; transform: translate(max(10px, min(calc(0px - 50%), calc(100vw - 100% - 10px))));"
 >
@@ -29,6 +31,7 @@ exports[`<TooltipTarget /> displays InnerBottom aligned tooltip on mouseover 1`]
 exports[`<TooltipTarget /> displays Left aligned tooltip on mouseover 1`] = `
 <div
   class="mx_Tooltip test tooltipClassName mx_Tooltip_visible"
+  id="test id"
   role="tooltip"
   style="display: block; right: 1030px; top: 0px; transform: translateY(-50%);"
 >
@@ -42,6 +45,7 @@ exports[`<TooltipTarget /> displays Left aligned tooltip on mouseover 1`] = `
 exports[`<TooltipTarget /> displays Natural aligned tooltip on mouseover 1`] = `
 <div
   class="mx_Tooltip test tooltipClassName mx_Tooltip_visible"
+  id="test id"
   role="tooltip"
   style="display: block; left: 6px; top: 0px; transform: translateY(-50%);"
 >
@@ -55,6 +59,7 @@ exports[`<TooltipTarget /> displays Natural aligned tooltip on mouseover 1`] = `
 exports[`<TooltipTarget /> displays Right aligned tooltip on mouseover 1`] = `
 <div
   class="mx_Tooltip test tooltipClassName mx_Tooltip_visible"
+  id="test id"
   role="tooltip"
   style="display: block; left: 6px; top: 0px; transform: translateY(-50%);"
 >
@@ -68,6 +73,7 @@ exports[`<TooltipTarget /> displays Right aligned tooltip on mouseover 1`] = `
 exports[`<TooltipTarget /> displays Top aligned tooltip on mouseover 1`] = `
 <div
   class="mx_Tooltip test tooltipClassName mx_Tooltip_visible"
+  id="test id"
   role="tooltip"
   style="display: block; top: -6px; transform: translate(max(10px, min(calc(0px - 50%), calc(100vw - 100% - 10px))), -100%);"
 >
@@ -81,6 +87,7 @@ exports[`<TooltipTarget /> displays Top aligned tooltip on mouseover 1`] = `
 exports[`<TooltipTarget /> displays TopRight aligned tooltip on mouseover 1`] = `
 <div
   class="mx_Tooltip test tooltipClassName mx_Tooltip_visible"
+  id="test id"
   role="tooltip"
   style="display: block; top: -6px; right: 1024px; transform: translateY(-100%);"
 >

test/components/views/messages/TextualBody-test.tsx

@@ -60,6 +60,7 @@ const mkFormattedMessage = (body: string, formattedBody: string): MatrixEvent =>
 describe("<TextualBody />", () => {
     afterEach(() => {
         jest.spyOn(MatrixClientPeg, "get").mockRestore();
+        jest.spyOn(global.Math, "random").mockRestore();
     });
 
     const defaultRoom = mkStubRoom(room1Id, "test room", undefined);
@@ -98,6 +99,7 @@ describe("<TextualBody />", () => {
             if (eventId === defaultEvent.getId()) return defaultEvent;
             return undefined;
         });
+        jest.spyOn(global.Math, "random").mockReturnValue(0.123456);
     });
 
     const defaultProps = {
@@ -197,7 +199,7 @@ describe("<TextualBody />", () => {
             const { container } = getComponent({ mxEvent: ev });
             const content = container.querySelector(".mx_EventTile_body");
             expect(content.innerHTML).toMatchInlineSnapshot(
-                `"Chat with <span><bdi><a class="mx_Pill mx_UserPill mx_UserPill_me" href="https://matrix.to/#/@user:example.com"><img class="mx_BaseAvatar mx_BaseAvatar_image" src="mxc://avatar.url/image.png" style="width: 16px; height: 16px;" alt="" data-testid="avatar-img" aria-hidden="true"><span class="mx_Pill_text">Member</span></a></bdi></span>"`,
+                `"Chat with <span><bdi><a class="mx_Pill mx_UserPill mx_UserPill_me" href="https://matrix.to/#/@user:example.com" aria-describedby="mx_Pill_0.123456"><img class="mx_BaseAvatar mx_BaseAvatar_image" src="mxc://avatar.url/image.png" style="width: 16px; height: 16px;" alt="" data-testid="avatar-img" aria-hidden="true"><span class="mx_Pill_text">Member</span></a></bdi></span>"`,
             );
         });
 
@@ -215,7 +217,7 @@ describe("<TextualBody />", () => {
             const { container } = getComponent({ mxEvent: ev });
             const content = container.querySelector(".mx_EventTile_body");
             expect(content.innerHTML).toMatchInlineSnapshot(
-                `"Visit <span><bdi><a class="mx_Pill mx_RoomPill" href="https://matrix.to/#/#room:example.com"><div class="mx_Pill_LinkIcon mx_BaseAvatar mx_BaseAvatar_image"></div><span class="mx_Pill_text">#room:example.com</span></a></bdi></span>"`,
+                `"Visit <span><bdi><a class="mx_Pill mx_RoomPill" href="https://matrix.to/#/#room:example.com" aria-describedby="mx_Pill_0.123456"><div class="mx_Pill_LinkIcon mx_BaseAvatar mx_BaseAvatar_image"></div><span class="mx_Pill_text">#room:example.com</span></a></bdi></span>"`,
             );
         });
 

test/components/views/messages/__snapshots__/TextualBody-test.tsx.snap

@@ -50,6 +50,7 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for an
   <span>
     <bdi>
       <a
+        aria-describedby="mx_Pill_0.123456"
         class="mx_Pill mx_UserPill"
         href="https://matrix.to/#/@user:example.com"
       >
@@ -85,6 +86,7 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for eve
       <span>
         <bdi>
           <a
+            aria-describedby="mx_Pill_0.123456"
             class="mx_Pill mx_EventPill"
             href="https://matrix.to/#/!ZxbRYPQXDXKGmDnJNg:example.com/$16085560162aNpaH:example.com?via=example.com"
           >
@@ -122,6 +124,7 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for roo
       <span>
         <bdi>
           <a
+            aria-describedby="mx_Pill_0.123456"
             class="mx_Pill mx_RoomPill"
             href="https://matrix.to/#/!ZxbRYPQXDXKGmDnJNg:example.com?via=example.com&via=bob.com"
           >
@@ -218,6 +221,7 @@ exports[`<TextualBody /> renders formatted m.text correctly pills get injected c
   <span>
     <bdi>
       <a
+        aria-describedby="mx_Pill_0.123456"
         class="mx_Pill mx_UserPill"
         href="https://matrix.to/#/@user:server"
       >
@@ -247,6 +251,7 @@ exports[`<TextualBody /> renders plain-text m.text correctly should pillify a pe
     ><a
       class="mx_Pill mx_EventPill"
       href="https://matrix.to/#/!room1:example.com/%event_id%"
+      aria-describedby="mx_Pill_0.123456"
       ><img
         class="mx_BaseAvatar mx_BaseAvatar_image"
         src="mxc://avatar.url/image.png"
@@ -268,6 +273,7 @@ exports[`<TextualBody /> renders plain-text m.text correctly should pillify a pe
     ><a
       class="mx_Pill mx_EventPill"
       href="https://matrix.to/#/!room2:example.com/%event_id%"
+      aria-describedby="mx_Pill_0.123456"
       ><img
         class="mx_BaseAvatar mx_BaseAvatar_image"
         src="mxc://avatar.url/room.png"
@@ -291,6 +297,7 @@ exports[`<TextualBody /> renders plain-text m.text correctly should pillify a pe
   <span>
     <bdi>
       <a
+        aria-describedby="mx_Pill_0.123456"
         class="mx_Pill mx_EventPill"
         href="https://matrix.to/#/!room1:example.com/!abc123"
       >

test/components/views/right_panel/UserInfo-test.tsx

@@ -322,7 +322,7 @@ describe("<UserInfo />", () => {
             renderComponent({ room: mockRoom });
             await act(flushPromises);
 
-            const userHeading = screen.getByRole("heading", { name: defaultUserId });
+            const userHeading = screen.getByRole("heading", { name: /@user:example.com/ });
 
             // there should be a "normal" E2E padlock
             expect(userHeading.getElementsByClassName("mx_E2EIcon_normal")).toHaveLength(1);
@@ -333,7 +333,7 @@ describe("<UserInfo />", () => {
             renderComponent({ room: mockRoom });
             await act(flushPromises);
 
-            const userHeading = screen.getByRole("heading", { name: defaultUserId });
+            const userHeading = screen.getByRole("heading", { name: /@user:example.com/ });
 
             // there should be a "verified" E2E padlock
             expect(userHeading.getElementsByClassName("mx_E2EIcon_verified")).toHaveLength(1);
@@ -368,7 +368,7 @@ describe("<UserInfoHeader />", () => {
 
     it("renders an e2e icon in the header if e2eStatus prop is defined", () => {
         renderComponent({ e2eStatus: E2EStatus.Normal });
-        const header = screen.getByRole("heading", { name: defaultUserId });
+        const header = screen.getByRole("heading");
 
         expect(header.getElementsByClassName("mx_E2EIcon")).toHaveLength(1);
     });

test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap

@@ -40,6 +40,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
           />
         </span>
         <div
+          aria-label="Not encrypted"
           class="mx_TextWithTooltip_target mx_RoomSummaryCard_e2ee"
           tabindex="0"
         />