From 2a7f500db85b2030601367b731a2e42aed8cf524 Mon Sep 17 00:00:00 2001 From: Florian Duros Date: Fri, 26 Apr 2024 15:55:07 +0200 Subject: [PATCH 01/23] Use `AccessibleButton` in `RovingAccessibleTooltipButton` --- .../roving/RovingAccessibleTooltipButton.tsx | 12 ++++---- .../dialogs/spotlight/SpotlightDialog.tsx | 4 ++- .../views/messages/MessageActionBar.tsx | 30 +++++-------------- src/components/views/pips/WidgetPip.tsx | 5 ++-- .../views/rooms/MessageComposerFormatBar.tsx | 13 ++------ 5 files changed, 19 insertions(+), 45 deletions(-) diff --git a/src/accessibility/roving/RovingAccessibleTooltipButton.tsx b/src/accessibility/roving/RovingAccessibleTooltipButton.tsx index 5607089c6e2..e523d8ad5db 100644 --- a/src/accessibility/roving/RovingAccessibleTooltipButton.tsx +++ b/src/accessibility/roving/RovingAccessibleTooltipButton.tsx @@ -16,18 +16,15 @@ limitations under the License. import React, { ComponentProps } from "react"; -import AccessibleTooltipButton from "../../components/views/elements/AccessibleTooltipButton"; import { useRovingTabIndex } from "../RovingTabIndex"; import { Ref } from "./types"; +import AccessibleButton from "../../components/views/elements/AccessibleButton"; -type Props = Omit< - ComponentProps>, - "tabIndex" -> & { +type Props = Omit>, "tabIndex"> & { inputRef?: Ref; }; -// Wrapper to allow use of useRovingTabIndex for simple AccessibleTooltipButtons outside of React Functional Components. +// Wrapper to allow use of useRovingTabIndex for simple AccessibleButtons outside of React Functional Components. export const RovingAccessibleTooltipButton = ({ inputRef, onFocus, @@ -35,7 +32,8 @@ export const RovingAccessibleTooltipButton = ): JSX.Element => { const [onFocusInternal, isActive, ref] = useRovingTabIndex(inputRef); return ( - { onFocusInternal(); diff --git a/src/components/views/dialogs/spotlight/SpotlightDialog.tsx b/src/components/views/dialogs/spotlight/SpotlightDialog.tsx index ee42a59221d..2ac7681afae 100644 --- a/src/components/views/dialogs/spotlight/SpotlightDialog.tsx +++ b/src/components/views/dialogs/spotlight/SpotlightDialog.tsx @@ -939,7 +939,9 @@ const SpotlightDialog: React.FC = ({ initialText = "", initialFilter = n setInviteLinkCopied(true); copyPlaintext(ownInviteLink); }} - onHideTooltip={() => setInviteLinkCopied(false)} + onTooltipOpenChange={(open) => { + if (!open) setInviteLinkCopied(false); + }} title={inviteLinkCopied ? _t("common|copied") : _t("action|copy")} > diff --git a/src/components/views/messages/MessageActionBar.tsx b/src/components/views/messages/MessageActionBar.tsx index 9cf35922089..87b5cb79c49 100644 --- a/src/components/views/messages/MessageActionBar.tsx +++ b/src/components/views/messages/MessageActionBar.tsx @@ -229,22 +229,16 @@ const ReplyInThreadButton: React.FC = ({ mxEvent }) => { } }; + const title = !hasARelation ? _t("action|reply_in_thread") : _t("threads|error_start_thread_existing_relation"); + return ( -
- {!hasARelation - ? _t("action|reply_in_thread") - : _t("threads|error_start_thread_existing_relation")} -
- - } - title={!hasARelation ? _t("action|reply_in_thread") : _t("threads|error_start_thread_existing_relation")} + title={title} onClick={onClick} onContextMenu={onClick} + placement="left" > @@ -509,18 +503,7 @@ export default class MessageActionBar extends React.PureComponent -
- {this.props.isQuoteExpanded - ? _t("timeline|mab|collapse_reply_chain") - : _t("timeline|mab|expand_reply_chain")} -
-
- {_t(ALTERNATE_KEY_NAME[Key.SHIFT]) + " + " + _t("action|click")} -
- - ); + toolbarOpts.push( {this.props.isQuoteExpanded ? : } , diff --git a/src/components/views/pips/WidgetPip.tsx b/src/components/views/pips/WidgetPip.tsx index 4a0d5e66180..2ba9e39e25d 100644 --- a/src/components/views/pips/WidgetPip.tsx +++ b/src/components/views/pips/WidgetPip.tsx @@ -34,7 +34,6 @@ import { WidgetType } from "../../../widgets/WidgetType"; import { WidgetMessagingStore } from "../../../stores/widgets/WidgetMessagingStore"; import WidgetUtils from "../../../utils/WidgetUtils"; import { ElementWidgetActions } from "../../../stores/widgets/ElementWidgetActions"; -import { Alignment } from "../elements/Tooltip"; interface Props { widgetId: string; @@ -128,9 +127,9 @@ export const WidgetPip: FC = ({ widgetId, room, viewingRoom, onStartMovin diff --git a/src/components/views/rooms/MessageComposerFormatBar.tsx b/src/components/views/rooms/MessageComposerFormatBar.tsx index 0d737c40016..58935405283 100644 --- a/src/components/views/rooms/MessageComposerFormatBar.tsx +++ b/src/components/views/rooms/MessageComposerFormatBar.tsx @@ -127,16 +127,6 @@ interface IFormatButtonProps { class FormatButton extends React.PureComponent { public render(): React.ReactNode { const className = `mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIcon${this.props.icon}`; - let shortcut; - if (this.props.shortcut) { - shortcut =
{this.props.shortcut}
; - } - const tooltip = ( -
-
{this.props.label}
-
{shortcut}
-
- ); // element="button" and type="button" are necessary for the buttons to work on WebKit, // otherwise the text is deselected before onClick can ever be called @@ -145,8 +135,9 @@ class FormatButton extends React.PureComponent { element="button" type="button" onClick={this.props.onClick} + aria-label={this.props.label} title={this.props.label} - tooltip={tooltip} + caption={this.props.shortcut} className={className} /> ); From f3b87033c214237301d7c5d5571060cd041e5b10 Mon Sep 17 00:00:00 2001 From: Florian Duros Date: Fri, 26 Apr 2024 16:05:03 +0200 Subject: [PATCH 02/23] Update snapshots --- .../structures/__snapshots__/RoomView-test.tsx.snap | 12 ++++++++++++ .../EventTileThreadToolbar-test.tsx.snap | 2 ++ 2 files changed, 14 insertions(+) diff --git a/test/components/structures/__snapshots__/RoomView-test.tsx.snap b/test/components/structures/__snapshots__/RoomView-test.tsx.snap index 80d6ac7c747..b6c87aaaef9 100644 --- a/test/components/structures/__snapshots__/RoomView-test.tsx.snap +++ b/test/components/structures/__snapshots__/RoomView-test.tsx.snap @@ -397,6 +397,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =