Merge pull request #6760 from matrix-org/t3chguy/fix/18528

Improve tooltips on space quick actions and explore button

src/components/structures/LeftPanel.tsx

@@ -399,7 +399,9 @@ export default class LeftPanel extends React.Component<IProps, IState> {
                         mx_LeftPanel_exploreButton_space: !!this.state.activeSpace,
                     })}
                     onClick={this.onExplore}
-                    title={_t("Explore rooms")}
+                    title={this.state.activeSpace
+                        ? _t("Explore %(spaceName)s", { spaceName: this.state.activeSpace.name })
+                        : _t("Explore rooms")}
                 />
             </div>
         );

src/components/views/rooms/RoomList.tsx

@@ -48,6 +48,7 @@ import SpaceStore, { ISuggestedRoom, SUGGESTED_ROOMS } from "../../../stores/Spa
 import { showAddExistingRooms, showCreateNewRoom, showSpaceInvite } from "../../../utils/space";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import RoomAvatar from "../avatars/RoomAvatar";
+import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 
 interface IProps {
     onKeyDown: (ev: React.KeyboardEvent) => void;
@@ -522,20 +523,23 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
             } else if (
                 this.props.activeSpace?.canInvite(userId) || this.props.activeSpace?.getMyMembership() === "join"
             ) {
+                const spaceName = this.props.activeSpace.name;
                 explorePrompt = <div className="mx_RoomList_explorePrompt">
                     <div>{ _t("Quick actions") }</div>
-                    { this.props.activeSpace.canInvite(userId) && <AccessibleButton
+                    { this.props.activeSpace.canInvite(userId) && <AccessibleTooltipButton
                         className="mx_RoomList_explorePrompt_spaceInvite"
                         onClick={this.onSpaceInviteClick}
+                        title={_t("Invite to %(spaceName)s", { spaceName })}
                     >
                         { _t("Invite people") }
-                    </AccessibleButton> }
-                    { this.props.activeSpace.getMyMembership() === "join" && <AccessibleButton
+                    </AccessibleTooltipButton> }
+                    { this.props.activeSpace.getMyMembership() === "join" && <AccessibleTooltipButton
                         className="mx_RoomList_explorePrompt_spaceExplore"
                         onClick={this.onExplore}
+                        title={_t("Explore %(spaceName)s", { spaceName })}
                     >
                         { _t("Explore rooms") }
-                    </AccessibleButton> }
+                    </AccessibleTooltipButton> }
                 </div>;
             } else if (Object.values(this.state.sublists).some(list => list.length > 0)) {
                 const unfilteredLists = RoomListStore.instance.unfilteredLists;

src/i18n/strings/en_EN.json

@@ -1643,6 +1643,7 @@
     "Start a new chat": "Start a new chat",
     "Explore all public rooms": "Explore all public rooms",
     "Quick actions": "Quick actions",
+    "Explore %(spaceName)s": "Explore %(spaceName)s",
     "Use the + to make a new room or explore existing ones below": "Use the + to make a new room or explore existing ones below",
     "%(count)s results in all spaces|other": "%(count)s results in all spaces",
     "%(count)s results in all spaces|one": "%(count)s result in all spaces",