diff --git a/playwright/snapshots/room/room-header.spec.ts/room-header-with-apps-button-not-highlighted-linux.png b/playwright/snapshots/room/room-header.spec.ts/room-header-with-apps-button-not-highlighted-linux.png index 51fb245f60a..498853a9730 100644 Binary files a/playwright/snapshots/room/room-header.spec.ts/room-header-with-apps-button-not-highlighted-linux.png and b/playwright/snapshots/room/room-header.spec.ts/room-header-with-apps-button-not-highlighted-linux.png differ diff --git a/res/css/views/rooms/_RoomBreadcrumbs.pcss b/res/css/views/rooms/_RoomBreadcrumbs.pcss index f502c3f4709..73c4b274329 100644 --- a/res/css/views/rooms/_RoomBreadcrumbs.pcss +++ b/res/css/views/rooms/_RoomBreadcrumbs.pcss @@ -49,8 +49,3 @@ limitations under the License. height: 32px; } } - -.mx_RoomBreadcrumbs_Tooltip { - margin-left: -42px; - margin-top: -42px; -} diff --git a/src/components/views/rooms/CollapsibleButton.tsx b/src/components/views/rooms/CollapsibleButton.tsx index c2c658de103..157e7f7a1a9 100644 --- a/src/components/views/rooms/CollapsibleButton.tsx +++ b/src/components/views/rooms/CollapsibleButton.tsx @@ -18,7 +18,6 @@ import React, { ComponentProps, useContext } from "react"; import classNames from "classnames"; import AccessibleButton from "../elements/AccessibleButton"; -import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; import { OverflowMenuContext } from "./MessageComposerButtons"; import { IconizedContextMenuOption } from "../context_menus/IconizedContextMenu"; import { Ref } from "../../../accessibility/roving/types"; @@ -43,13 +42,8 @@ export const CollapsibleButton: React.FC = ({ } return ( - + {children} - + ); }; diff --git a/src/components/views/rooms/LegacyRoomHeader.tsx b/src/components/views/rooms/LegacyRoomHeader.tsx index 5fab692046d..82080fbd07a 100644 --- a/src/components/views/rooms/LegacyRoomHeader.tsx +++ b/src/components/views/rooms/LegacyRoomHeader.tsx @@ -33,7 +33,6 @@ import RoomHeaderButtons from "../right_panel/LegacyRoomHeaderButtons"; import E2EIcon from "./E2EIcon"; import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar"; import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton"; -import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; import RoomTopic from "../elements/RoomTopic"; import RoomName from "../elements/RoomName"; import { E2EStatus } from "../../../utils/ShieldUtils"; @@ -68,7 +67,6 @@ import IconizedContextMenu, { } from "../context_menus/IconizedContextMenu"; import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload"; import { SessionDuration } from "../voip/CallDuration"; -import { Alignment } from "../elements/Tooltip"; import RoomCallBanner from "../beacon/RoomCallBanner"; import { shouldShowComponent } from "../../../customisations/helpers/UIComponents"; import { UIComponent } from "../../../settings/UIFeature"; @@ -111,12 +109,12 @@ const VoiceCallButton: FC = ({ room, busy, setBusy, behavi }, [behavior, room, setBusy]); return ( - ); @@ -237,13 +235,13 @@ const VideoCallButton: FC = ({ room, busy, setBusy, behavi return ( <> - {menu} @@ -442,7 +440,7 @@ const CallLayoutSelector: FC = ({ call }) => { return ( <> - = ({ call }) => { })} onClick={onClick} title={_t("room|header|video_call_ec_change_layout")} - alignment={Alignment.Bottom} + placement="bottom" key="layout" /> {menu} @@ -600,11 +598,11 @@ export default class RoomHeader extends React.Component { if (!this.props.viewingCall && this.props.onForgetClick) { startButtons.push( - , ); @@ -612,7 +610,7 @@ export default class RoomHeader extends React.Component { if (!this.props.viewingCall && this.props.onAppsClick) { startButtons.push( - { : _t("room|header|show_widgets_button") } aria-checked={this.props.appsShown} - alignment={Alignment.Bottom} + placement="bottom" key="apps" />, ); @@ -631,11 +629,11 @@ export default class RoomHeader extends React.Component { if (!this.props.viewingCall && this.props.onSearchClick && this.props.inRoom) { startButtons.push( - , ); @@ -643,11 +641,11 @@ export default class RoomHeader extends React.Component { if (this.props.onInviteClick && (!this.props.viewingCall || isVideoRoom) && this.props.inRoom) { startButtons.push( - , ); @@ -667,11 +665,11 @@ export default class RoomHeader extends React.Component { ); } else { endButtons.push( - , ); @@ -754,7 +752,7 @@ export default class RoomHeader extends React.Component { onClick={this.onContextMenuOpenClick} isExpanded={!!this.state.contextMenuPosition} title={_t("room|context_menu|title")} - alignment={Alignment.Bottom} + placement="bottom" > {roomName} {this.props.room &&
} diff --git a/src/components/views/rooms/PinnedEventTile.tsx b/src/components/views/rooms/PinnedEventTile.tsx index 1395dcc2c5a..581583d1d5a 100644 --- a/src/components/views/rooms/PinnedEventTile.tsx +++ b/src/components/views/rooms/PinnedEventTile.tsx @@ -27,7 +27,6 @@ import { _t } from "../../../languageHandler"; import { formatDate } from "../../../DateUtils"; import MatrixClientContext from "../../../contexts/MatrixClientContext"; import { getUserNameColorClass } from "../../../utils/FormattingUtils"; -import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload"; import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks"; @@ -76,7 +75,7 @@ export default class PinnedEventTile extends React.Component { let unpinButton: JSX.Element | undefined; if (this.props.onUnpinClicked) { unpinButton = ( - v const [onFocus, isActive, ref] = useRovingTabIndex(); return ( - v hideIfDot={true} tooltipProps={{ tabIndex: isActive ? 0 : -1 }} /> - + ); }; diff --git a/src/components/views/rooms/RoomList.tsx b/src/components/views/rooms/RoomList.tsx index d573f3bbf02..c277bd5aca9 100644 --- a/src/components/views/rooms/RoomList.tsx +++ b/src/components/views/rooms/RoomList.tsx @@ -57,10 +57,10 @@ import IconizedContextMenu, { IconizedContextMenuOption, IconizedContextMenuOptionList, } from "../context_menus/IconizedContextMenu"; -import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; import ExtraTile from "./ExtraTile"; import RoomSublist, { IAuxButtonProps } from "./RoomSublist"; import { SdkContextClass } from "../../../contexts/SDKContext"; +import AccessibleButton from "../elements/AccessibleButton"; interface IProps { onKeyDown: (ev: React.KeyboardEvent, state: IRovingTabIndexState) => void; @@ -185,7 +185,7 @@ const DmAuxButton: React.FC = ({ tabIndex, dispatcher = default ); } else if (!activeSpace && showCreateRooms) { return ( - { dispatcher.dispatch({ action: "view_create_chat" }); diff --git a/src/components/views/rooms/RoomSublist.tsx b/src/components/views/rooms/RoomSublist.tsx index c8ad9d4acab..6fbccaff6a6 100644 --- a/src/components/views/rooms/RoomSublist.tsx +++ b/src/components/views/rooms/RoomSublist.tsx @@ -49,7 +49,6 @@ import ContextMenu, { StyledMenuItemRadio, } from "../../structures/ContextMenu"; import AccessibleButton, { ButtonEvent } from "../../views/elements/AccessibleButton"; -import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; import ExtraTile from "./ExtraTile"; import SettingsStore from "../../../settings/SettingsStore"; import { SlidingSyncManager } from "../../../SlidingSyncManager"; @@ -684,11 +683,6 @@ export default class RoomSublist extends React.Component { const badgeContainer =
{badge}
; - let Button: React.ComponentType> = AccessibleButton; - if (this.props.isMinimized) { - Button = AccessibleTooltipButton; - } - // Note: the addRoomButton conditionally gets moved around // the DOM depending on whether or not the list is minimized. // If we're minimized, we want it below the header so it @@ -707,7 +701,7 @@ export default class RoomSublist extends React.Component { >
- + {this.renderMenu()} {this.props.isMinimized ? null : badgeContainer} {this.props.isMinimized ? null : addRoomButton} diff --git a/src/components/views/rooms/RoomTile.tsx b/src/components/views/rooms/RoomTile.tsx index 61f865e9fc3..aae949858e1 100644 --- a/src/components/views/rooms/RoomTile.tsx +++ b/src/components/views/rooms/RoomTile.tsx @@ -37,7 +37,6 @@ import NotificationBadge from "./NotificationBadge"; import { ActionPayload } from "../../../dispatcher/payloads"; import { RoomNotificationStateStore } from "../../../stores/notifications/RoomNotificationStateStore"; import { NotificationState, NotificationStateEvents } from "../../../stores/notifications/NotificationState"; -import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; import { EchoChamber } from "../../../stores/local-echo/EchoChamber"; import { CachedRoomKey, RoomEchoChamber } from "../../../stores/local-echo/RoomEchoChamber"; import { PROPERTY_UPDATED } from "../../../stores/local-echo/GenericEchoChamber"; @@ -464,21 +463,11 @@ export class RoomTile extends React.PureComponent { ariaDescribedBy = messagePreviewId(this.props.room.roomId); } - const props: Partial> = {}; - let Button: React.ComponentType> = AccessibleButton; - if (this.props.isMinimized) { - Button = AccessibleTooltipButton; - props.title = name; - // force the tooltip to hide whilst we are showing the context menu - props.forceHide = !!this.state.generalMenuPosition; - } - return ( {({ onFocus, isActive, ref }) => ( - + )} diff --git a/src/components/views/rooms/VoiceRecordComposerTile.tsx b/src/components/views/rooms/VoiceRecordComposerTile.tsx index 70cabb474c9..1001def3869 100644 --- a/src/components/views/rooms/VoiceRecordComposerTile.tsx +++ b/src/components/views/rooms/VoiceRecordComposerTile.tsx @@ -19,7 +19,6 @@ import { Room, IEventRelation, MatrixEvent } from "matrix-js-sdk/src/matrix"; import { logger } from "matrix-js-sdk/src/logger"; import { Optional } from "matrix-events-sdk"; -import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; import { _t } from "../../../languageHandler"; import { RecordingState } from "../../../audio/VoiceRecording"; import { MatrixClientPeg } from "../../../MatrixClientPeg"; @@ -44,6 +43,7 @@ import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks"; import RoomContext from "../../../contexts/RoomContext"; import { IUpload, VoiceMessageRecording } from "../../../audio/VoiceMessageRecording"; import { createVoiceMessageContent } from "../../../utils/createVoiceMessageContent"; +import AccessibleButton from "../elements/AccessibleButton"; interface IProps { room: Room; @@ -271,7 +271,7 @@ export default class VoiceRecordComposerTile extends React.PureComponent