Tooltip: improve accessibility for messages

src/components/views/messages/CallEvent.tsx

@@ -28,13 +28,12 @@ import {
 import defaultDispatcher from "../../../dispatcher/dispatcher";
 import type { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
 import { Action } from "../../../dispatcher/actions";
-import type { AccessibleButtonKind, ButtonEvent } from "../elements/AccessibleButton";
+import AccessibleButton, { AccessibleButtonKind, ButtonEvent } from "../elements/AccessibleButton";
 import MemberAvatar from "../avatars/MemberAvatar";
 import { LiveContentSummary, LiveContentType } from "../rooms/LiveContentSummary";
 import FacePile from "../elements/FacePile";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import { CallDuration, SessionDuration } from "../voip/CallDuration";
-import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 
 const MAX_FACES = 8;
 
@@ -78,15 +77,15 @@ const ActiveCallEvent = forwardRef<any, ActiveCallEventProps>(
                             <FacePile members={facePileMembers} size="24px" overflow={facePileOverflow} />
                         </div>
                         {call && <SessionDuration session={call.session} />}
-                        <AccessibleTooltipButton
+                        <AccessibleButton
                             className="mx_CallEvent_button"
                             kind={buttonKind}
                             disabled={onButtonClick === null || buttonDisabledTooltip !== undefined}
                             onClick={onButtonClick}
-                            tooltip={buttonDisabledTooltip}
+                            title={buttonDisabledTooltip}
                         >
                             {buttonText}
-                        </AccessibleTooltipButton>
+                        </AccessibleButton>
                     </div>
                 </div>
             </div>

src/components/views/messages/DownloadActionButton.tsx

@@ -98,6 +98,7 @@ export default class DownloadActionButton extends React.PureComponent<IProps, IS
                 title={spinner ? _t(this.state.tooltip) : _t("action|download")}
                 onClick={this.onDownloadClick}
                 disabled={!!spinner}
+                placement="left"
             >
                 <DownloadIcon />
                 {spinner}

src/components/views/messages/LegacyCallEvent.tsx

@@ -24,7 +24,6 @@ import MemberAvatar from "../avatars/MemberAvatar";
 import LegacyCallEventGrouper, { LegacyCallEventGrouperEvent } from "../../structures/LegacyCallEventGrouper";
 import AccessibleButton from "../elements/AccessibleButton";
 import InfoTooltip, { InfoTooltipKind } from "../elements/InfoTooltip";
-import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import { formatPreciseDuration } from "../../../DateUtils";
 import Clock from "../audio_messages/Clock";
 
@@ -114,7 +113,7 @@ export default class LegacyCallEvent extends React.PureComponent<IProps, IState>
         });
 
         return (
-            <AccessibleTooltipButton
+            <AccessibleButton
                 className={silenceClass}
                 onClick={this.props.callEventGrouper.toggleSilenced}
                 title={this.state.silenced ? _t("voip|unsilence") : _t("voip|silence")}

src/components/views/messages/MessageActionBar.tsx

@@ -129,6 +129,7 @@ const OptionsButton: React.FC<IOptionsButtonProps> = ({
                 ref={button}
                 onFocus={onFocus}
                 tabIndex={isActive ? 0 : -1}
+                placement="left"
             >
                 <ContextMenuIcon />
             </ContextMenuTooltipButton>
@@ -186,6 +187,7 @@ const ReactButton: React.FC<IReactButtonProps> = ({ mxEvent, reactions, onFocusC
                 ref={button}
                 onFocus={onFocus}
                 tabIndex={isActive ? 0 : -1}
+                placement="left"
             >
                 <EmojiIcon />
             </ContextMenuTooltipButton>
@@ -391,6 +393,7 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
                     onClick={this.onEditClick}
                     onContextMenu={this.onEditClick}
                     key="edit"
+                    placement="left"
                 >
                     <EditIcon />
                 </RovingAccessibleTooltipButton>,
@@ -404,6 +407,7 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
                 onClick={this.onCancelClick}
                 onContextMenu={this.onCancelClick}
                 key="cancel"
+                placement="left"
             >
                 <TrashcanIcon />
             </RovingAccessibleTooltipButton>
@@ -429,6 +433,7 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
                     onClick={this.onResendClick}
                     onContextMenu={this.onResendClick}
                     key="resend"
+                    placement="left"
                 >
                     <ResendIcon />
                 </RovingAccessibleTooltipButton>,
@@ -455,6 +460,7 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
                             onClick={this.onReplyClick}
                             onContextMenu={this.onReplyClick}
                             key="reply"
+                            placement="left"
                         >
                             <ReplyIcon />
                         </RovingAccessibleTooltipButton>,

src/components/views/messages/TextualBody.tsx

@@ -31,7 +31,6 @@ import { tooltipifyLinks, unmountTooltips } from "../../../utils/tooltipify";
 import { IntegrationManagers } from "../../../integrations/IntegrationManagers";
 import { isPermalinkHost, tryTransformPermalinkToLocalHref } from "../../../utils/permalinks/Permalinks";
 import { copyPlaintext } from "../../../utils/strings";
-import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import UIStore from "../../../stores/UIStore";
 import { Action } from "../../../dispatcher/actions";
 import GenericTextContextMenu from "../context_menus/GenericTextContextMenu";
@@ -522,22 +521,16 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
         const date = this.props.mxEvent.replacingEventDate();
         const dateString = date && formatDate(date);
 
-        const tooltip = (
-            <div>
-                <div className="mx_Tooltip_title">{_t("timeline|edits|tooltip_title", { date: dateString })}</div>
-                <div className="mx_Tooltip_sub">{_t("timeline|edits|tooltip_sub")}</div>
-            </div>
-        );
-
         return (
-            <AccessibleTooltipButton
+            <AccessibleButton
                 className="mx_EventTile_edited"
                 onClick={this.openHistoryDialog}
-                title={_t("timeline|edits|tooltip_label", { date: dateString })}
-                tooltip={tooltip}
+                aria-label={_t("timeline|edits|tooltip_label", { date: dateString })}
+                title={_t("timeline|edits|tooltip_title", { date: dateString })}
+                caption={_t("timeline|edits|tooltip_sub")}
             >
                 <span>{`(${_t("common|edited")})`}</span>
-            </AccessibleTooltipButton>
+            </AccessibleButton>
         );
     }