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

Author: t3chguy

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 newSessionText;
+    let askToVerifyText: string;
+    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} />;
         }