From 509ee8ae97db7350b7693d673ac8f0fcba68f135 Mon Sep 17 00:00:00 2001
From: Janne Mareike Koschinski <jannemk@element.io>
Date: Thu, 7 Jul 2022 11:38:13 +0200
Subject: [PATCH 01/13] Correct accessibility labels for unread rooms in
 spotlight

---
 .../dialogs/spotlight/RoomResultDetails.tsx   |  9 +-
 .../dialogs/spotlight/SpotlightDialog.tsx     | 83 ++++++++++++++-----
 2 files changed, 71 insertions(+), 21 deletions(-)

diff --git a/src/components/views/dialogs/spotlight/RoomResultDetails.tsx b/src/components/views/dialogs/spotlight/RoomResultDetails.tsx
index 39465b9c735..a0c5535795f 100644
--- a/src/components/views/dialogs/spotlight/RoomResultDetails.tsx
+++ b/src/components/views/dialogs/spotlight/RoomResultDetails.tsx
@@ -19,10 +19,15 @@ import { Room } from "matrix-js-sdk/src/matrix";
 
 import { roomContextDetailsText, spaceContextDetailsText } from "../../../../utils/i18n-helpers";
 
-export const RoomResultDetails = ({ room }: { room: Room }) => {
+interface Props {
+    id: string;
+    room: Room;
+}
+
+export const RoomResultDetails = ({ room, id }: Props) => {
     const contextDetails = room.isSpaceRoom() ? spaceContextDetailsText(room) : roomContextDetailsText(room);
     if (contextDetails) {
-        return <div className="mx_SpotlightDialog_result_details">
+        return <div id={id} className="mx_SpotlightDialog_result_details">
             { contextDetails }
         </div>;
     }
diff --git a/src/components/views/dialogs/spotlight/SpotlightDialog.tsx b/src/components/views/dialogs/spotlight/SpotlightDialog.tsx
index 6013b5721f3..2ee2f241f08 100644
--- a/src/components/views/dialogs/spotlight/SpotlightDialog.tsx
+++ b/src/components/views/dialogs/spotlight/SpotlightDialog.tsx
@@ -63,6 +63,7 @@ import SdkConfig from "../../../../SdkConfig";
 import { SettingLevel } from "../../../../settings/SettingLevel";
 import SettingsStore from "../../../../settings/SettingsStore";
 import { BreadcrumbsStore } from "../../../../stores/BreadcrumbsStore";
+import { RoomNotificationState } from "../../../../stores/notifications/RoomNotificationState";
 import { RoomNotificationStateStore } from "../../../../stores/notifications/RoomNotificationStateStore";
 import { RecentAlgorithm } from "../../../../stores/room-list/algorithms/tag-sorting/RecentAlgorithm";
 import { RoomViewStore } from "../../../../stores/RoomViewStore";
@@ -259,6 +260,22 @@ const findVisibleRoomMembers = (cli: MatrixClient, filterDMs = true) => {
     ).filter(it => it.userId !== cli.getUserId());
 };
 
+const roomAriaLabel = (room: Room, notification: RoomNotificationState) => {
+    if (notification.hasMentions) {
+        return `${room.name} ${_t("%(count)s unread messages including mentions.", {
+            count: notification.count,
+        })}`;
+    } else if (notification.hasUnreadCount) {
+        return `${room.name} ${_t("%(count)s unread messages.", {
+            count: notification.count,
+        })}`;
+    } else if (notification.isUnread) {
+        return `${room.name} ${_t("Unread messages.")}`;
+    } else {
+        return room.name;
+    }
+};
+
 interface IDirectoryOpts {
     limit: number;
     query: string;
@@ -523,6 +540,7 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
     if (trimmedQuery || filter !== null) {
         const resultMapper = (result: Result): JSX.Element => {
             if (isRoomResult(result)) {
+                const notification = RoomNotificationStateStore.instance.getRoomState(result.room);
                 return (
                     <Option
                         id={`mx_SpotlightDialog_button_result_${result.room.roomId}`}
@@ -530,15 +548,25 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
                         onClick={(ev) => {
                             viewRoom(result.room.roomId, true, ev?.type !== "click");
                         }}
+                        aria-label={roomAriaLabel(result.room, notification)}
+                        aria-describedby={`mx_SpotlightDialog_button_result_${result.room.roomId}_details`}
                     >
-                        <DecoratedRoomAvatar room={result.room} avatarSize={AVATAR_SIZE} tooltipProps={{ tabIndex: -1 }} />
+                        <DecoratedRoomAvatar
+                            room={result.room}
+                            avatarSize={AVATAR_SIZE}
+                            tooltipProps={{ tabIndex: -1 }}
+                        />
                         { result.room.name }
-                        <NotificationBadge notification={RoomNotificationStateStore.instance.getRoomState(result.room)} />
-                        <RoomResultDetails room={result.room} />
+                        <NotificationBadge notification={notification} />
+                        <RoomResultDetails
+                            id={`mx_SpotlightDialog_button_result_${result.room.roomId}_details`}
+                            room={result.room}
+                        />
                     </Option>
                 );
             }
             if (isMemberResult(result)) {
+                const label = result.member instanceof RoomMember ? result.member.rawDisplayName : result.member.name;
                 return (
                     <Option
                         id={`mx_SpotlightDialog_button_result_${result.member.userId}`}
@@ -547,10 +575,15 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
                             startDm(cli, [result.member]);
                             onFinished();
                         }}
+                        aria-label={label}
+                        aria-describedby={`mx_SpotlightDialog_button_result_${result.member.userId}_details`}
                     >
                         <SearchResultAvatar user={result.member} size={AVATAR_SIZE} />
-                        { result.member instanceof RoomMember ? result.member.rawDisplayName : result.member.name }
-                        <div className="mx_SpotlightDialog_result_details">
+                        { label }
+                        <div
+                            id={`mx_SpotlightDialog_button_result_${result.member.userId}_details`}
+                            className="mx_SpotlightDialog_result_details"
+                        >
                             { result.member.userId }
                         </div>
                     </Option>
@@ -867,20 +900,32 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
                         </AccessibleButton>
                     </h4>
                     <div>
-                        { recentSearches.map(room => (
-                            <Option
-                                id={`mx_SpotlightDialog_button_recentSearch_${room.roomId}`}
-                                key={room.roomId}
-                                onClick={(ev) => {
-                                    viewRoom(room.roomId, true, ev?.type !== "click");
-                                }}
-                            >
-                                <DecoratedRoomAvatar room={room} avatarSize={AVATAR_SIZE} tooltipProps={{ tabIndex: -1 }} />
-                                { room.name }
-                                <NotificationBadge notification={RoomNotificationStateStore.instance.getRoomState(room)} />
-                                <RoomResultDetails room={room} />
-                            </Option>
-                        )) }
+                        { recentSearches.map(room => {
+                            const notification = RoomNotificationStateStore.instance.getRoomState(room);
+                            return (
+                                <Option
+                                    id={`mx_SpotlightDialog_button_recentSearch_${room.roomId}`}
+                                    key={room.roomId}
+                                    onClick={(ev) => {
+                                        viewRoom(room.roomId, true, ev?.type !== "click");
+                                    }}
+                                    aria-label={roomAriaLabel(room, notification)}
+                                    aria-describedby={`mx_SpotlightDialog_button_result_${room.roomId}_details`}
+                                >
+                                    <DecoratedRoomAvatar
+                                        room={room}
+                                        avatarSize={AVATAR_SIZE}
+                                        tooltipProps={{ tabIndex: -1 }}
+                                    />
+                                    { room.name }
+                                    <NotificationBadge notification={notification} />
+                                    <RoomResultDetails
+                                        id={`mx_SpotlightDialog_button_result_${room.roomId}_details`}
+                                        room={room}
+                                    />
+                                </Option>
+                            );
+                        }) }
                     </div>
                 </div>
             );

From 0e472f7b214b3ea4fd8163c8e5ad41d6318f45f5 Mon Sep 17 00:00:00 2001
From: Janne Mareike Koschinski <jannemk@element.io>
Date: Thu, 7 Jul 2022 13:00:05 +0200
Subject: [PATCH 02/13] Improve public room result accessibility

---
 .../dialogs/spotlight/PublicRoomResultDetails.tsx | 15 +++++++++++----
 .../views/dialogs/spotlight/SpotlightDialog.tsx   | 10 +++++++++-
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/components/views/dialogs/spotlight/PublicRoomResultDetails.tsx b/src/components/views/dialogs/spotlight/PublicRoomResultDetails.tsx
index 2ffcad349b0..3f33a400cc8 100644
--- a/src/components/views/dialogs/spotlight/PublicRoomResultDetails.tsx
+++ b/src/components/views/dialogs/spotlight/PublicRoomResultDetails.tsx
@@ -24,7 +24,14 @@ import { getDisplayAliasForRoom } from "../../../structures/RoomDirectory";
 const MAX_NAME_LENGTH = 80;
 const MAX_TOPIC_LENGTH = 800;
 
-export function PublicRoomResultDetails({ room }: { room: IPublicRoomsChunkRoom }): JSX.Element {
+interface Props {
+    room: IPublicRoomsChunkRoom;
+    labelId: string;
+    descriptionId: string;
+    detailsId: string;
+}
+
+export function PublicRoomResultDetails({ room, labelId, descriptionId, detailsId }: Props): JSX.Element {
     let name = room.name || getDisplayAliasForRoom(room) || _t('Unnamed room');
     if (name.length > MAX_NAME_LENGTH) {
         name = `${name.substring(0, MAX_NAME_LENGTH)}...`;
@@ -41,12 +48,12 @@ export function PublicRoomResultDetails({ room }: { room: IPublicRoomsChunkRoom
     return (
         <div className="mx_SpotlightDialog_result_publicRoomDetails">
             <div className="mx_SpotlightDialog_result_publicRoomHeader">
-                <span className="mx_SpotlightDialog_result_publicRoomName">{ name }</span>
-                <span className="mx_SpotlightDialog_result_publicRoomAlias">
+                <span id={labelId} className="mx_SpotlightDialog_result_publicRoomName">{ name }</span>
+                <span id={descriptionId} className="mx_SpotlightDialog_result_publicRoomAlias">
                     { room.canonical_alias ?? room.room_id }
                 </span>
             </div>
-            <div className="mx_SpotlightDialog_result_publicRoomDescription">
+            <div id={detailsId} className="mx_SpotlightDialog_result_publicRoomDescription">
                 <span className="mx_SpotlightDialog_result_publicRoomMemberCount">
                     { _t("%(count)s Members", {
                         count: room.num_joined_members,
diff --git a/src/components/views/dialogs/spotlight/SpotlightDialog.tsx b/src/components/views/dialogs/spotlight/SpotlightDialog.tsx
index 2ee2f241f08..f90f1d22d0c 100644
--- a/src/components/views/dialogs/spotlight/SpotlightDialog.tsx
+++ b/src/components/views/dialogs/spotlight/SpotlightDialog.tsx
@@ -608,6 +608,9 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
                             >
                                 { _t(clientRoom ? "View" : "Join") }
                             </AccessibleButton>}
+                        aria-labelledby={`mx_SpotlightDialog_button_result_${result.publicRoom.room_id}_name`}
+                        aria-describedby={`mx_SpotlightDialog_button_result_${result.publicRoom.room_id}_alias`}
+                        aria-details={`mx_SpotlightDialog_button_result_${result.publicRoom.room_id}_details`}
                     >
                         <BaseAvatar
                             className="mx_SearchResultAvatar"
@@ -619,7 +622,12 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
                             width={AVATAR_SIZE}
                             height={AVATAR_SIZE}
                         />
-                        <PublicRoomResultDetails room={result.publicRoom} />
+                        <PublicRoomResultDetails
+                            room={result.publicRoom}
+                            labelId={`mx_SpotlightDialog_button_result_${result.publicRoom.room_id}_name`}
+                            descriptionId={`mx_SpotlightDialog_button_result_${result.publicRoom.room_id}_alias`}
+                            detailsId={`mx_SpotlightDialog_button_result_${result.publicRoom.room_id}_details`}
+                        />
                     </Option>
                 );
             }

From c6a9e2887a8fb1566470922a15d66f9c91c43224 Mon Sep 17 00:00:00 2001
From: Janne Mareike Koschinski <jannemk@element.io>
Date: Thu, 7 Jul 2022 13:00:18 +0200
Subject: [PATCH 03/13] Improve room result accessibility

---
 .../dialogs/spotlight/RoomResultDetails.tsx    | 18 ++++++++++++++++--
 src/i18n/strings/en_EN.json                    |  1 +
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/components/views/dialogs/spotlight/RoomResultDetails.tsx b/src/components/views/dialogs/spotlight/RoomResultDetails.tsx
index a0c5535795f..a07d3005def 100644
--- a/src/components/views/dialogs/spotlight/RoomResultDetails.tsx
+++ b/src/components/views/dialogs/spotlight/RoomResultDetails.tsx
@@ -17,6 +17,7 @@ limitations under the License.
 import React from "react";
 import { Room } from "matrix-js-sdk/src/matrix";
 
+import { _t } from "../../../../languageHandler";
 import { roomContextDetailsText, spaceContextDetailsText } from "../../../../utils/i18n-helpers";
 
 interface Props {
@@ -25,9 +26,22 @@ interface Props {
 }
 
 export const RoomResultDetails = ({ room, id }: Props) => {
-    const contextDetails = room.isSpaceRoom() ? spaceContextDetailsText(room) : roomContextDetailsText(room);
+    let contextDetails: string;
+    let ariaLabel: string;
+    if (room.isSpaceRoom()) {
+        contextDetails = spaceContextDetailsText(room);
+        ariaLabel = _t("In space %(space)s.", {
+            space: contextDetails,
+        });
+    } else {
+        contextDetails = roomContextDetailsText(room);
+    }
     if (contextDetails) {
-        return <div id={id} className="mx_SpotlightDialog_result_details">
+        return <div
+            id={id}
+            className="mx_SpotlightDialog_result_details"
+            aria-label={ariaLabel}
+        >
             { contextDetails }
         </div>;
     }
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 693299f9219..acc9ec25c5a 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -2790,6 +2790,7 @@
     "Remember this": "Remember this",
     "%(count)s Members|other": "%(count)s Members",
     "%(count)s Members|one": "%(count)s Member",
+    "In space %(space)s.": "In space %(space)s.",
     "Public rooms": "Public rooms",
     "Use \"%(query)s\" to search": "Use \"%(query)s\" to search",
     "Search for": "Search for",

From c031eac5eb7384afad4a04fef599a89f5466b96d Mon Sep 17 00:00:00 2001
From: Janne Mareike Koschinski <jannemk@element.io>
Date: Thu, 7 Jul 2022 18:28:56 +0200
Subject: [PATCH 04/13] Implement requested changes: add return types to
 roomAriaLabel

---
 src/components/views/dialogs/spotlight/SpotlightDialog.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/dialogs/spotlight/SpotlightDialog.tsx b/src/components/views/dialogs/spotlight/SpotlightDialog.tsx
index f90f1d22d0c..6afccb03636 100644
--- a/src/components/views/dialogs/spotlight/SpotlightDialog.tsx
+++ b/src/components/views/dialogs/spotlight/SpotlightDialog.tsx
@@ -260,7 +260,7 @@ const findVisibleRoomMembers = (cli: MatrixClient, filterDMs = true) => {
     ).filter(it => it.userId !== cli.getUserId());
 };
 
-const roomAriaLabel = (room: Room, notification: RoomNotificationState) => {
+const roomAriaLabel = (room: Room, notification: RoomNotificationState): string => {
     if (notification.hasMentions) {
         return `${room.name} ${_t("%(count)s unread messages including mentions.", {
             count: notification.count,

From 6eb45be2bcd87f1d41da332ed74bcb8618041b75 Mon Sep 17 00:00:00 2001
From: Janne Mareike Koschinski <jannemk@element.io>
Date: Fri, 8 Jul 2022 10:29:35 +0200
Subject: [PATCH 05/13] Implement requested changes: extract space
 accessibility label logic

Avoid concatenating or templating translated strings due to missing context
---
 .../dialogs/spotlight/RoomResultDetails.tsx   | 13 ++++++-----
 src/i18n/strings/en_EN.json                   |  4 +++-
 src/utils/i18n-helpers.ts                     | 22 +++++++++++++++++++
 3 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/src/components/views/dialogs/spotlight/RoomResultDetails.tsx b/src/components/views/dialogs/spotlight/RoomResultDetails.tsx
index a07d3005def..43ea29b5620 100644
--- a/src/components/views/dialogs/spotlight/RoomResultDetails.tsx
+++ b/src/components/views/dialogs/spotlight/RoomResultDetails.tsx
@@ -14,11 +14,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
 import { Room } from "matrix-js-sdk/src/matrix";
+import React from "react";
 
-import { _t } from "../../../../languageHandler";
-import { roomContextDetailsText, spaceContextDetailsText } from "../../../../utils/i18n-helpers";
+import {
+    roomContextDetailsText,
+    spaceContextDetailsAccessibilityText,
+    spaceContextDetailsText,
+} from "../../../../utils/i18n-helpers";
 
 interface Props {
     id: string;
@@ -30,9 +33,7 @@ export const RoomResultDetails = ({ room, id }: Props) => {
     let ariaLabel: string;
     if (room.isSpaceRoom()) {
         contextDetails = spaceContextDetailsText(room);
-        ariaLabel = _t("In space %(space)s.", {
-            space: contextDetails,
-        });
+        ariaLabel = spaceContextDetailsAccessibilityText(room);
     } else {
         contextDetails = roomContextDetailsText(room);
     }
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index acc9ec25c5a..d1494c338c1 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -664,6 +664,9 @@
     "%(spaceName)s and %(count)s others|other": "%(spaceName)s and %(count)s others",
     "%(spaceName)s and %(count)s others|zero": "%(spaceName)s",
     "%(spaceName)s and %(count)s others|one": "%(spaceName)s and %(count)s other",
+    "In spaces %(space1Name)s and %(space2Name)s.": "In spaces %(space1Name)s and %(space2Name)s.",
+    "In y%(spaceName)s and %(count)s other spaces.|other": "In y%(spaceName)s and %(count)s other spaces.",
+    "In space %(spaceName)s.": "In space %(spaceName)s.",
     "%(name)s (%(userId)s)": "%(name)s (%(userId)s)",
     "Unexpected server error trying to leave the room": "Unexpected server error trying to leave the room",
     "Can't leave Server Notices room": "Can't leave Server Notices room",
@@ -2790,7 +2793,6 @@
     "Remember this": "Remember this",
     "%(count)s Members|other": "%(count)s Members",
     "%(count)s Members|one": "%(count)s Member",
-    "In space %(space)s.": "In space %(space)s.",
     "Public rooms": "Public rooms",
     "Use \"%(query)s\" to search": "Use \"%(query)s\" to search",
     "Search for": "Search for",
diff --git a/src/utils/i18n-helpers.ts b/src/utils/i18n-helpers.ts
index 26cbf60cd27..ee413041942 100644
--- a/src/utils/i18n-helpers.ts
+++ b/src/utils/i18n-helpers.ts
@@ -40,6 +40,28 @@ export function spaceContextDetailsText(space: Room): string {
     return space.getCanonicalAlias();
 }
 
+export function spaceContextDetailsAccessibilityText(space: Room): string {
+    if (!space.isSpaceRoom()) return undefined;
+
+    const [parent, secondParent, ...otherParents] = SpaceStore.instance.getKnownParents(space.roomId);
+    if (secondParent && !otherParents?.length) {
+        // exactly 2 edge case for improved i18n
+        return _t("In spaces %(space1Name)s and %(space2Name)s.", {
+            space1Name: space.client.getRoom(parent)?.name,
+            space2Name: space.client.getRoom(secondParent)?.name,
+        });
+    } else if (parent) {
+        return _t("In y%(spaceName)s and %(count)s other spaces.", {
+            spaceName: space.client.getRoom(parent)?.name,
+            count: otherParents.length,
+        });
+    }
+
+    return _t("In space %(spaceName)s.", {
+        spaceName: space.getCanonicalAlias(),
+    });
+}
+
 export function roomContextDetailsText(room: Room): string {
     if (room.isSpaceRoom()) return undefined;
 

From afe52b628a6f6d0262654ce518e80a11ec91acc7 Mon Sep 17 00:00:00 2001
From: Janne Mareike Koschinski <jannemk@element.io>
Date: Fri, 8 Jul 2022 11:26:21 +0200
Subject: [PATCH 06/13] Remove duplication and make sonarcloud happy

---
 .../views/dialogs/ForwardDialog.tsx           | 10 ++-
 .../dialogs/spotlight/RoomResultDetails.tsx   | 19 +----
 .../views/rooms/RecentlyViewedButton.tsx      | 10 ++-
 src/utils/i18n-helpers.ts                     | 73 +++++--------------
 4 files changed, 35 insertions(+), 77 deletions(-)

diff --git a/src/components/views/dialogs/ForwardDialog.tsx b/src/components/views/dialogs/ForwardDialog.tsx
index 2d3de09eecf..104512e5f9c 100644
--- a/src/components/views/dialogs/ForwardDialog.tsx
+++ b/src/components/views/dialogs/ForwardDialog.tsx
@@ -49,7 +49,7 @@ import BaseAvatar from "../avatars/BaseAvatar";
 import { Action } from "../../../dispatcher/actions";
 import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
 import { ButtonEvent } from "../elements/AccessibleButton";
-import { roomContextDetailsText } from "../../../utils/i18n-helpers";
+import { roomContextDetails } from "../../../utils/i18n-helpers";
 import { isLocationEvent } from "../../../utils/EventUtils";
 import { isSelfLocation, locationEventGeoUri } from "../../../utils/location";
 
@@ -130,7 +130,7 @@ const Entry: React.FC<IEntryProps> = ({ room, type, content, matrixClient: cli,
         />;
     }
 
-    const detailsText = roomContextDetailsText(room);
+    const contextDetails = roomContextDetails(room);
 
     return <div className="mx_ForwardList_entry">
         <AccessibleTooltipButton
@@ -141,8 +141,10 @@ const Entry: React.FC<IEntryProps> = ({ room, type, content, matrixClient: cli,
         >
             <DecoratedRoomAvatar room={room} avatarSize={32} />
             <span className="mx_ForwardList_entry_name">{ room.name }</span>
-            { detailsText && <span className="mx_ForwardList_entry_detail">
-                { detailsText }
+            { contextDetails && <span
+                className="mx_ForwardList_entry_detail"
+                aria-label={contextDetails.ariaLabel}>
+                { contextDetails.details }
             </span> }
         </AccessibleTooltipButton>
         <AccessibleTooltipButton
diff --git a/src/components/views/dialogs/spotlight/RoomResultDetails.tsx b/src/components/views/dialogs/spotlight/RoomResultDetails.tsx
index 43ea29b5620..ad087bab0ae 100644
--- a/src/components/views/dialogs/spotlight/RoomResultDetails.tsx
+++ b/src/components/views/dialogs/spotlight/RoomResultDetails.tsx
@@ -17,11 +17,7 @@ limitations under the License.
 import { Room } from "matrix-js-sdk/src/matrix";
 import React from "react";
 
-import {
-    roomContextDetailsText,
-    spaceContextDetailsAccessibilityText,
-    spaceContextDetailsText,
-} from "../../../../utils/i18n-helpers";
+import { roomContextDetails } from "../../../../utils/i18n-helpers";
 
 interface Props {
     id: string;
@@ -29,21 +25,14 @@ interface Props {
 }
 
 export const RoomResultDetails = ({ room, id }: Props) => {
-    let contextDetails: string;
-    let ariaLabel: string;
-    if (room.isSpaceRoom()) {
-        contextDetails = spaceContextDetailsText(room);
-        ariaLabel = spaceContextDetailsAccessibilityText(room);
-    } else {
-        contextDetails = roomContextDetailsText(room);
-    }
+    const contextDetails = roomContextDetails(room);
     if (contextDetails) {
         return <div
             id={id}
             className="mx_SpotlightDialog_result_details"
-            aria-label={ariaLabel}
+            aria-label={contextDetails.ariaLabel}
         >
-            { contextDetails }
+            { contextDetails.details }
         </div>;
     }
 
diff --git a/src/components/views/rooms/RecentlyViewedButton.tsx b/src/components/views/rooms/RecentlyViewedButton.tsx
index df1a151119d..a3c630af4ad 100644
--- a/src/components/views/rooms/RecentlyViewedButton.tsx
+++ b/src/components/views/rooms/RecentlyViewedButton.tsx
@@ -26,7 +26,7 @@ import InteractiveTooltip, { Direction } from "../elements/InteractiveTooltip";
 import { Action } from "../../../dispatcher/actions";
 import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
 import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
-import { roomContextDetailsText } from "../../../utils/i18n-helpers";
+import { roomContextDetails } from "../../../utils/i18n-helpers";
 import RoomAvatar from "../avatars/RoomAvatar";
 
 const RecentlyViewedButton = () => {
@@ -37,7 +37,7 @@ const RecentlyViewedButton = () => {
         <h4>{ _t("Recently viewed") }</h4>
         <div>
             { crumbs.map(crumb => {
-                const contextDetails = roomContextDetailsText(crumb);
+                const contextDetails = roomContextDetails(crumb);
 
                 return <MenuItem
                     key={crumb.roomId}
@@ -57,8 +57,10 @@ const RecentlyViewedButton = () => {
                     }
                     <span className="mx_RecentlyViewedButton_entry_label">
                         <div>{ crumb.name }</div>
-                        { contextDetails && <div className="mx_RecentlyViewedButton_entry_spaces">
-                            { contextDetails }
+                        { contextDetails && <div
+                            className="mx_RecentlyViewedButton_entry_spaces"
+                            aria-label={contextDetails.ariaLabel}>
+                            { contextDetails.details }
                         </div> }
                     </span>
                 </MenuItem>;
diff --git a/src/utils/i18n-helpers.ts b/src/utils/i18n-helpers.ts
index ee413041942..e04f09eb9b1 100644
--- a/src/utils/i18n-helpers.ts
+++ b/src/utils/i18n-helpers.ts
@@ -20,71 +20,36 @@ import SpaceStore from "../stores/spaces/SpaceStore";
 import { _t } from "../languageHandler";
 import DMRoomMap from "./DMRoomMap";
 
-export function spaceContextDetailsText(space: Room): string {
-    if (!space.isSpaceRoom()) return undefined;
-
-    const [parent, secondParent, ...otherParents] = SpaceStore.instance.getKnownParents(space.roomId);
-    if (secondParent && !otherParents?.length) {
-        // exactly 2 edge case for improved i18n
-        return _t("%(space1Name)s and %(space2Name)s", {
-            space1Name: space.client.getRoom(parent)?.name,
-            space2Name: space.client.getRoom(secondParent)?.name,
-        });
-    } else if (parent) {
-        return _t("%(spaceName)s and %(count)s others", {
-            spaceName: space.client.getRoom(parent)?.name,
-            count: otherParents.length,
-        });
-    }
-
-    return space.getCanonicalAlias();
+export interface RoomContextDetails {
+    details: string;
+    ariaLabel?: string;
 }
 
-export function spaceContextDetailsAccessibilityText(space: Room): string {
-    if (!space.isSpaceRoom()) return undefined;
-
-    const [parent, secondParent, ...otherParents] = SpaceStore.instance.getKnownParents(space.roomId);
-    if (secondParent && !otherParents?.length) {
-        // exactly 2 edge case for improved i18n
-        return _t("In spaces %(space1Name)s and %(space2Name)s.", {
-            space1Name: space.client.getRoom(parent)?.name,
-            space2Name: space.client.getRoom(secondParent)?.name,
-        });
-    } else if (parent) {
-        return _t("In y%(spaceName)s and %(count)s other spaces.", {
-            spaceName: space.client.getRoom(parent)?.name,
-            count: otherParents.length,
-        });
-    }
-
-    return _t("In space %(spaceName)s.", {
-        spaceName: space.getCanonicalAlias(),
-    });
-}
-
-export function roomContextDetailsText(room: Room): string {
-    if (room.isSpaceRoom()) return undefined;
-
+export function roomContextDetails(room: Room): RoomContextDetails | null {
     const dmPartner = DMRoomMap.shared().getUserIdForRoomId(room.roomId);
     // if we’ve got more than 2 users, don’t treat it like a regular DM
     const isGroupDm = room.getMembers().length > 2;
-    if (dmPartner && !isGroupDm) {
-        return dmPartner;
+    if (!room.isSpaceRoom() && dmPartner && !isGroupDm) {
+        return { details: dmPartner };
     }
 
     const [parent, secondParent, ...otherParents] = SpaceStore.instance.getKnownParents(room.roomId);
     if (secondParent && !otherParents?.length) {
         // exactly 2 edge case for improved i18n
-        return _t("%(space1Name)s and %(space2Name)s", {
-            space1Name: room.client.getRoom(parent)?.name,
-            space2Name: room.client.getRoom(secondParent)?.name,
-        });
+        const space1Name = room.client.getRoom(parent)?.name;
+        const space2Name = room.client.getRoom(secondParent)?.name;
+        return {
+            details: _t("%(space1Name)s and %(space2Name)s", { space1Name, space2Name }),
+            ariaLabel: _t("In spaces %(space1Name)s and %(space2Name)s.", { space1Name, space2Name }),
+        };
     } else if (parent) {
-        return _t("%(spaceName)s and %(count)s others", {
-            spaceName: room.client.getRoom(parent)?.name,
-            count: otherParents.length,
-        });
+        const spaceName = room.client.getRoom(parent)?.name;
+        const count = otherParents.length;
+        return {
+            details: _t("%(spaceName)s and %(count)s others", { spaceName, count }),
+            ariaLabel: _t("In %(spaceName)s and %(count)s other spaces.", { spaceName, count }),
+        };
     }
 
-    return room.getCanonicalAlias();
+    return { details: room.getCanonicalAlias() };
 }

From e4c0d875e6802df7d0bb80671ab30d8b07c1e13e Mon Sep 17 00:00:00 2001
From: Janne Mareike Koschinski <jannemk@element.io>
Date: Fri, 8 Jul 2022 11:33:07 +0200
Subject: [PATCH 07/13] Update i18n

---
 src/i18n/strings/en_EN.json | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 64766d3a6e1..a8c89534efc 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -661,12 +661,13 @@
     "about a day from now": "about a day from now",
     "%(num)s days from now": "%(num)s days from now",
     "%(space1Name)s and %(space2Name)s": "%(space1Name)s and %(space2Name)s",
+    "In spaces %(space1Name)s and %(space2Name)s.": "In spaces %(space1Name)s and %(space2Name)s.",
     "%(spaceName)s and %(count)s others|other": "%(spaceName)s and %(count)s others",
     "%(spaceName)s and %(count)s others|zero": "%(spaceName)s",
     "%(spaceName)s and %(count)s others|one": "%(spaceName)s and %(count)s other",
-    "In spaces %(space1Name)s and %(space2Name)s.": "In spaces %(space1Name)s and %(space2Name)s.",
-    "In y%(spaceName)s and %(count)s other spaces.|other": "In y%(spaceName)s and %(count)s other spaces.",
-    "In space %(spaceName)s.": "In space %(spaceName)s.",
+    "In %(spaceName)s and %(count)s other spaces.|other": "In %(spaceName)s and %(count)s other spaces.",
+    "In %(spaceName)s and %(count)s other spaces.|zero": "In space %(spaceName)s.",
+    "In %(spaceName)s and %(count)s other spaces.|one": "In %(spaceName)s and %(count)s other space.",
     "%(name)s (%(userId)s)": "%(name)s (%(userId)s)",
     "Unexpected server error trying to leave the room": "Unexpected server error trying to leave the room",
     "Can't leave Server Notices room": "Can't leave Server Notices room",

From 0239556cb5ec31647c9cd08cf1d7036eae319030 Mon Sep 17 00:00:00 2001
From: Janne Mareike Koschinski <jannemk@element.io>
Date: Fri, 8 Jul 2022 12:14:04 +0200
Subject: [PATCH 08/13] Cleanly split aria-description and aria-label for room
 results

---
 .../dialogs/spotlight/SpotlightDialog.tsx     | 45 +++++++++++--------
 1 file changed, 27 insertions(+), 18 deletions(-)

diff --git a/src/components/views/dialogs/spotlight/SpotlightDialog.tsx b/src/components/views/dialogs/spotlight/SpotlightDialog.tsx
index 6afccb03636..55670de20fb 100644
--- a/src/components/views/dialogs/spotlight/SpotlightDialog.tsx
+++ b/src/components/views/dialogs/spotlight/SpotlightDialog.tsx
@@ -14,9 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import { WebSearch as WebSearchEvent } from "@matrix-org/analytics-events/types/typescript/WebSearch";
 import classNames from "classnames";
 import { capitalize, sum } from "lodash";
-import { WebSearch as WebSearchEvent } from "@matrix-org/analytics-events/types/typescript/WebSearch";
 import { IHierarchyRoom } from "matrix-js-sdk/src/@types/spaces";
 import { IPublicRoomsChunkRoom, MatrixClient, RoomMember, RoomType } from "matrix-js-sdk/src/matrix";
 import { Room } from "matrix-js-sdk/src/models/room";
@@ -50,6 +50,7 @@ import { useDebouncedCallback } from "../../../../hooks/spotlight/useDebouncedCa
 import { useRecentSearches } from "../../../../hooks/spotlight/useRecentSearches";
 import { useProfileInfo } from "../../../../hooks/useProfileInfo";
 import { usePublicRoomDirectory } from "../../../../hooks/usePublicRoomDirectory";
+import { useFeatureEnabled } from "../../../../hooks/useSettings";
 import { useSpaceResults } from "../../../../hooks/useSpaceResults";
 import { useUserDirectory } from "../../../../hooks/useUserDirectory";
 import { getKeyBindingsManager } from "../../../../KeyBindingsManager";
@@ -79,6 +80,7 @@ import DecoratedRoomAvatar from "../../avatars/DecoratedRoomAvatar";
 import { SearchResultAvatar } from "../../avatars/SearchResultAvatar";
 import { NetworkDropdown } from "../../directory/NetworkDropdown";
 import AccessibleButton from "../../elements/AccessibleButton";
+import LabelledCheckbox from "../../elements/LabelledCheckbox";
 import Spinner from "../../elements/Spinner";
 import NotificationBadge from "../../rooms/NotificationBadge";
 import BaseDialog from "../BaseDialog";
@@ -88,8 +90,6 @@ import { Option } from "./Option";
 import { PublicRoomResultDetails } from "./PublicRoomResultDetails";
 import { RoomResultDetails } from "./RoomResultDetails";
 import { TooltipOption } from "./TooltipOption";
-import LabelledCheckbox from "../../elements/LabelledCheckbox";
-import { useFeatureEnabled } from "../../../../hooks/useSettings";
 
 const MAX_RECENT_SEARCHES = 10;
 const SECTION_LIMIT = 50; // only show 50 results per section for performance reasons
@@ -260,19 +260,19 @@ const findVisibleRoomMembers = (cli: MatrixClient, filterDMs = true) => {
     ).filter(it => it.userId !== cli.getUserId());
 };
 
-const roomAriaLabel = (room: Room, notification: RoomNotificationState): string => {
+const roomAriaDescription = (room: Room, notification: RoomNotificationState): string | undefined => {
     if (notification.hasMentions) {
-        return `${room.name} ${_t("%(count)s unread messages including mentions.", {
+        return _t("%(count)s unread messages including mentions.", {
             count: notification.count,
-        })}`;
+        });
     } else if (notification.hasUnreadCount) {
-        return `${room.name} ${_t("%(count)s unread messages.", {
+        return _t("%(count)s unread messages.", {
             count: notification.count,
-        })}`;
+        });
     } else if (notification.isUnread) {
-        return `${room.name} ${_t("Unread messages.")}`;
+        return _t("Unread messages.");
     } else {
-        return room.name;
+        return undefined;
     }
 };
 
@@ -541,6 +541,11 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
         const resultMapper = (result: Result): JSX.Element => {
             if (isRoomResult(result)) {
                 const notification = RoomNotificationStateStore.instance.getRoomState(result.room);
+                const ariaProperties = {
+                    "aria-label": result.room.name,
+                    "aria-description": roomAriaDescription(result.room, notification),
+                    "aria-details": `mx_SpotlightDialog_button_result_${result.room.roomId}_details`,
+                };
                 return (
                     <Option
                         id={`mx_SpotlightDialog_button_result_${result.room.roomId}`}
@@ -548,8 +553,7 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
                         onClick={(ev) => {
                             viewRoom(result.room.roomId, true, ev?.type !== "click");
                         }}
-                        aria-label={roomAriaLabel(result.room, notification)}
-                        aria-describedby={`mx_SpotlightDialog_button_result_${result.room.roomId}_details`}
+                        {...ariaProperties}
                     >
                         <DecoratedRoomAvatar
                             room={result.room}
@@ -566,7 +570,6 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
                 );
             }
             if (isMemberResult(result)) {
-                const label = result.member instanceof RoomMember ? result.member.rawDisplayName : result.member.name;
                 return (
                     <Option
                         id={`mx_SpotlightDialog_button_result_${result.member.userId}`}
@@ -575,11 +578,13 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
                             startDm(cli, [result.member]);
                             onFinished();
                         }}
-                        aria-label={label}
+                        aria-label={result.member instanceof RoomMember
+                            ? result.member.rawDisplayName
+                            : result.member.name}
                         aria-describedby={`mx_SpotlightDialog_button_result_${result.member.userId}_details`}
                     >
                         <SearchResultAvatar user={result.member} size={AVATAR_SIZE} />
-                        { label }
+                        { result.member instanceof RoomMember ? result.member.rawDisplayName : result.member.name }
                         <div
                             id={`mx_SpotlightDialog_button_result_${result.member.userId}_details`}
                             className="mx_SpotlightDialog_result_details"
@@ -910,6 +915,11 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
                     <div>
                         { recentSearches.map(room => {
                             const notification = RoomNotificationStateStore.instance.getRoomState(room);
+                            const ariaProperties = {
+                                "aria-label": room.name,
+                                "aria-description": roomAriaDescription(room, notification),
+                                "aria-details": `mx_SpotlightDialog_button_recentSearch_${room.roomId}_details`,
+                            };
                             return (
                                 <Option
                                     id={`mx_SpotlightDialog_button_recentSearch_${room.roomId}`}
@@ -917,8 +927,7 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
                                     onClick={(ev) => {
                                         viewRoom(room.roomId, true, ev?.type !== "click");
                                     }}
-                                    aria-label={roomAriaLabel(room, notification)}
-                                    aria-describedby={`mx_SpotlightDialog_button_result_${room.roomId}_details`}
+                                    {...ariaProperties}
                                 >
                                     <DecoratedRoomAvatar
                                         room={room}
@@ -928,7 +937,7 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
                                     { room.name }
                                     <NotificationBadge notification={notification} />
                                     <RoomResultDetails
-                                        id={`mx_SpotlightDialog_button_result_${room.roomId}_details`}
+                                        id={`mx_SpotlightDialog_button_recentSearch_${room.roomId}_details`}
                                         room={room}
                                     />
                                 </Option>

From 260041587443fe00862859b6e121581f887c3dbc Mon Sep 17 00:00:00 2001
From: Janne Mareike Koschinski <jannemk@element.io>
Date: Mon, 11 Jul 2022 11:30:45 +0200
Subject: [PATCH 09/13] Merge aria-label and aria-description as
 aria-description is still a draft

---
 .../views/dialogs/spotlight/SpotlightDialog.tsx           | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/components/views/dialogs/spotlight/SpotlightDialog.tsx b/src/components/views/dialogs/spotlight/SpotlightDialog.tsx
index 55670de20fb..5ab0b3f6e65 100644
--- a/src/components/views/dialogs/spotlight/SpotlightDialog.tsx
+++ b/src/components/views/dialogs/spotlight/SpotlightDialog.tsx
@@ -260,7 +260,7 @@ const findVisibleRoomMembers = (cli: MatrixClient, filterDMs = true) => {
     ).filter(it => it.userId !== cli.getUserId());
 };
 
-const roomAriaDescription = (room: Room, notification: RoomNotificationState): string | undefined => {
+const roomAriaUnreadLabel = (room: Room, notification: RoomNotificationState): string | undefined => {
     if (notification.hasMentions) {
         return _t("%(count)s unread messages including mentions.", {
             count: notification.count,
@@ -542,8 +542,7 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
             if (isRoomResult(result)) {
                 const notification = RoomNotificationStateStore.instance.getRoomState(result.room);
                 const ariaProperties = {
-                    "aria-label": result.room.name,
-                    "aria-description": roomAriaDescription(result.room, notification),
+                    "aria-label": `${result.room.name} ${roomAriaUnreadLabel(result.room, notification)}`,
                     "aria-details": `mx_SpotlightDialog_button_result_${result.room.roomId}_details`,
                 };
                 return (
@@ -916,8 +915,7 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
                         { recentSearches.map(room => {
                             const notification = RoomNotificationStateStore.instance.getRoomState(room);
                             const ariaProperties = {
-                                "aria-label": room.name,
-                                "aria-description": roomAriaDescription(room, notification),
+                                "aria-label": `${room.name} ${roomAriaUnreadLabel(room, notification)}`,
                                 "aria-details": `mx_SpotlightDialog_button_recentSearch_${room.roomId}_details`,
                             };
                             return (

From b188eae18b4ce00c198555a8f6707c4340e6009b Mon Sep 17 00:00:00 2001
From: Janne Mareike Koschinski <jannemk@element.io>
Date: Mon, 11 Jul 2022 11:59:39 +0200
Subject: [PATCH 10/13] Make RoomContextDetails generic and move it to a more
 fitting location

---
 .../views/dialogs/ForwardDialog.tsx           | 10 ++--------
 .../dialogs/spotlight/SpotlightDialog.tsx     |  8 +++++---
 .../views/rooms/RecentlyViewedButton.tsx      | 10 ++--------
 .../RoomContextDetails.tsx}                   | 19 +++++++++----------
 4 files changed, 18 insertions(+), 29 deletions(-)
 rename src/components/views/{dialogs/spotlight/RoomResultDetails.tsx => rooms/RoomContextDetails.tsx} (72%)

diff --git a/src/components/views/dialogs/ForwardDialog.tsx b/src/components/views/dialogs/ForwardDialog.tsx
index 104512e5f9c..8e23e3bd950 100644
--- a/src/components/views/dialogs/ForwardDialog.tsx
+++ b/src/components/views/dialogs/ForwardDialog.tsx
@@ -49,9 +49,9 @@ import BaseAvatar from "../avatars/BaseAvatar";
 import { Action } from "../../../dispatcher/actions";
 import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
 import { ButtonEvent } from "../elements/AccessibleButton";
-import { roomContextDetails } from "../../../utils/i18n-helpers";
 import { isLocationEvent } from "../../../utils/EventUtils";
 import { isSelfLocation, locationEventGeoUri } from "../../../utils/location";
+import { RoomContextDetails } from "../rooms/RoomContextDetails";
 
 const AVATAR_SIZE = 30;
 
@@ -130,8 +130,6 @@ const Entry: React.FC<IEntryProps> = ({ room, type, content, matrixClient: cli,
         />;
     }
 
-    const contextDetails = roomContextDetails(room);
-
     return <div className="mx_ForwardList_entry">
         <AccessibleTooltipButton
             className="mx_ForwardList_roomButton"
@@ -141,11 +139,7 @@ const Entry: React.FC<IEntryProps> = ({ room, type, content, matrixClient: cli,
         >
             <DecoratedRoomAvatar room={room} avatarSize={32} />
             <span className="mx_ForwardList_entry_name">{ room.name }</span>
-            { contextDetails && <span
-                className="mx_ForwardList_entry_detail"
-                aria-label={contextDetails.ariaLabel}>
-                { contextDetails.details }
-            </span> }
+            <RoomContextDetails component="span" className="mx_ForwardList_entry_detail" room={room} />
         </AccessibleTooltipButton>
         <AccessibleTooltipButton
             kind={sendState === SendState.Failed ? "danger_outline" : "primary_outline"}
diff --git a/src/components/views/dialogs/spotlight/SpotlightDialog.tsx b/src/components/views/dialogs/spotlight/SpotlightDialog.tsx
index 5ab0b3f6e65..f41b45c835e 100644
--- a/src/components/views/dialogs/spotlight/SpotlightDialog.tsx
+++ b/src/components/views/dialogs/spotlight/SpotlightDialog.tsx
@@ -88,7 +88,7 @@ import FeedbackDialog from "../FeedbackDialog";
 import { IDialogProps } from "../IDialogProps";
 import { Option } from "./Option";
 import { PublicRoomResultDetails } from "./PublicRoomResultDetails";
-import { RoomResultDetails } from "./RoomResultDetails";
+import { RoomContextDetails } from "../../rooms/RoomContextDetails";
 import { TooltipOption } from "./TooltipOption";
 
 const MAX_RECENT_SEARCHES = 10;
@@ -561,8 +561,9 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
                         />
                         { result.room.name }
                         <NotificationBadge notification={notification} />
-                        <RoomResultDetails
+                        <RoomContextDetails
                             id={`mx_SpotlightDialog_button_result_${result.room.roomId}_details`}
+                            className="mx_SpotlightDialog_result_details"
                             room={result.room}
                         />
                     </Option>
@@ -934,8 +935,9 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
                                     />
                                     { room.name }
                                     <NotificationBadge notification={notification} />
-                                    <RoomResultDetails
+                                    <RoomContextDetails
                                         id={`mx_SpotlightDialog_button_recentSearch_${room.roomId}_details`}
+                                        className="mx_SpotlightDialog_result_details"
                                         room={room}
                                     />
                                 </Option>
diff --git a/src/components/views/rooms/RecentlyViewedButton.tsx b/src/components/views/rooms/RecentlyViewedButton.tsx
index a3c630af4ad..4a54905dfe3 100644
--- a/src/components/views/rooms/RecentlyViewedButton.tsx
+++ b/src/components/views/rooms/RecentlyViewedButton.tsx
@@ -22,11 +22,11 @@ import { MenuItem } from "../../structures/ContextMenu";
 import { useEventEmitterState } from "../../../hooks/useEventEmitter";
 import { _t } from "../../../languageHandler";
 import dis from "../../../dispatcher/dispatcher";
+import { RoomContextDetails } from "./RoomContextDetails";
 import InteractiveTooltip, { Direction } from "../elements/InteractiveTooltip";
 import { Action } from "../../../dispatcher/actions";
 import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
 import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
-import { roomContextDetails } from "../../../utils/i18n-helpers";
 import RoomAvatar from "../avatars/RoomAvatar";
 
 const RecentlyViewedButton = () => {
@@ -37,8 +37,6 @@ const RecentlyViewedButton = () => {
         <h4>{ _t("Recently viewed") }</h4>
         <div>
             { crumbs.map(crumb => {
-                const contextDetails = roomContextDetails(crumb);
-
                 return <MenuItem
                     key={crumb.roomId}
                     onClick={(ev) => {
@@ -57,11 +55,7 @@ const RecentlyViewedButton = () => {
                     }
                     <span className="mx_RecentlyViewedButton_entry_label">
                         <div>{ crumb.name }</div>
-                        { contextDetails && <div
-                            className="mx_RecentlyViewedButton_entry_spaces"
-                            aria-label={contextDetails.ariaLabel}>
-                            { contextDetails.details }
-                        </div> }
+                        <RoomContextDetails className="mx_RecentlyViewedButton_entry_spaces" room={crumb} />
                     </span>
                 </MenuItem>;
             }) }
diff --git a/src/components/views/dialogs/spotlight/RoomResultDetails.tsx b/src/components/views/rooms/RoomContextDetails.tsx
similarity index 72%
rename from src/components/views/dialogs/spotlight/RoomResultDetails.tsx
rename to src/components/views/rooms/RoomContextDetails.tsx
index ad087bab0ae..ebb83e9e666 100644
--- a/src/components/views/dialogs/spotlight/RoomResultDetails.tsx
+++ b/src/components/views/rooms/RoomContextDetails.tsx
@@ -15,26 +15,25 @@ limitations under the License.
 */
 
 import { Room } from "matrix-js-sdk/src/matrix";
-import React from "react";
+import React, { ComponentPropsWithoutRef, ElementType } from "react";
 
 import { roomContextDetails } from "../../../../utils/i18n-helpers";
 
-interface Props {
-    id: string;
+type Props<T extends ElementType> = ComponentPropsWithoutRef<T> & {
+    component?: T;
     room: Room;
-}
+};
 
-export const RoomResultDetails = ({ room, id }: Props) => {
+export function RoomContextDetails<T extends ElementType>({ room, component: Component = "div", ...other }: Props<T>) {
     const contextDetails = roomContextDetails(room);
     if (contextDetails) {
-        return <div
-            id={id}
-            className="mx_SpotlightDialog_result_details"
+        return <Component
+            {...other}
             aria-label={contextDetails.ariaLabel}
         >
             { contextDetails.details }
-        </div>;
+        </Component>;
     }
 
     return null;
-};
+}

From ea151bcc106ca68f7bb8c8f275509409ab95ed2e Mon Sep 17 00:00:00 2001
From: Janne Mareike Koschinski <jannemk@element.io>
Date: Mon, 11 Jul 2022 12:00:06 +0200
Subject: [PATCH 11/13] Implement suggestions from accessibility testers

---
 .../dialogs/spotlight/SpotlightDialog.tsx     | 84 ++++++++++++++-----
 1 file changed, 65 insertions(+), 19 deletions(-)

diff --git a/src/components/views/dialogs/spotlight/SpotlightDialog.tsx b/src/components/views/dialogs/spotlight/SpotlightDialog.tsx
index f41b45c835e..785affcec09 100644
--- a/src/components/views/dialogs/spotlight/SpotlightDialog.tsx
+++ b/src/components/views/dialogs/spotlight/SpotlightDialog.tsx
@@ -654,8 +654,13 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
         let peopleSection: JSX.Element;
         if (results[Section.People].length) {
             peopleSection = (
-                <div className="mx_SpotlightDialog_section mx_SpotlightDialog_results" role="group">
-                    <h4>{ _t("Recent Conversations") }</h4>
+                <div
+                    className="mx_SpotlightDialog_section mx_SpotlightDialog_results"
+                    role="group"
+                    aria-labelledby="mx_SpotlightDialog_section_people">
+                    <h4 id="mx_SpotlightDialog_section_people">
+                        { _t("Recent Conversations") }
+                    </h4>
                     <div>
                         { results[Section.People].slice(0, SECTION_LIMIT).map(resultMapper) }
                     </div>
@@ -666,8 +671,13 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
         let suggestionsSection: JSX.Element;
         if (results[Section.Suggestions].length && filter === Filter.People) {
             suggestionsSection = (
-                <div className="mx_SpotlightDialog_section mx_SpotlightDialog_results" role="group">
-                    <h4>{ _t("Suggestions") }</h4>
+                <div
+                    className="mx_SpotlightDialog_section mx_SpotlightDialog_results"
+                    role="group"
+                    aria-labelledby="mx_SpotlightDialog_section_suggestions">
+                    <h4 id="mx_SpotlightDialog_section_suggestions">
+                        { _t("Suggestions") }
+                    </h4>
                     <div>
                         { results[Section.Suggestions].slice(0, SECTION_LIMIT).map(resultMapper) }
                     </div>
@@ -678,8 +688,13 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
         let roomsSection: JSX.Element;
         if (results[Section.Rooms].length) {
             roomsSection = (
-                <div className="mx_SpotlightDialog_section mx_SpotlightDialog_results" role="group">
-                    <h4>{ _t("Rooms") }</h4>
+                <div
+                    className="mx_SpotlightDialog_section mx_SpotlightDialog_results"
+                    role="group"
+                    aria-labelledby="mx_SpotlightDialog_section_rooms">
+                    <h4 id="mx_SpotlightDialog_section_rooms">
+                        { _t("Rooms") }
+                    </h4>
                     <div>
                         { results[Section.Rooms].slice(0, SECTION_LIMIT).map(resultMapper) }
                     </div>
@@ -690,8 +705,13 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
         let spacesSection: JSX.Element;
         if (results[Section.Spaces].length) {
             spacesSection = (
-                <div className="mx_SpotlightDialog_section mx_SpotlightDialog_results" role="group">
-                    <h4>{ _t("Spaces you're in") }</h4>
+                <div
+                    className="mx_SpotlightDialog_section mx_SpotlightDialog_results"
+                    role="group"
+                    aria-labelledby="mx_SpotlightDialog_section_spaces">
+                    <h4 id="mx_SpotlightDialog_section_spaces">
+                        { _t("Spaces you're in") }
+                    </h4>
                     <div>
                         { results[Section.Spaces].slice(0, SECTION_LIMIT).map(resultMapper) }
                     </div>
@@ -702,9 +722,14 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
         let publicRoomsSection: JSX.Element;
         if (filter === Filter.PublicRooms) {
             publicRoomsSection = (
-                <div className="mx_SpotlightDialog_section mx_SpotlightDialog_results" role="group">
+                <div
+                    className="mx_SpotlightDialog_section mx_SpotlightDialog_results"
+                    role="group"
+                    aria-labelledby="mx_SpotlightDialog_section_publicRooms">
                     <div className="mx_SpotlightDialog_sectionHeader">
-                        <h4>{ _t("Suggestions") }</h4>
+                        <h4 id="mx_SpotlightDialog_section_publicRooms">
+                            { _t("Suggestions") }
+                        </h4>
                         <div className="mx_SpotlightDialog_options">
                             { exploringPublicSpacesEnabled && <>
                                 <LabelledCheckbox
@@ -738,8 +763,13 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
         let spaceRoomsSection: JSX.Element;
         if (spaceResults.length && activeSpace && filter === null) {
             spaceRoomsSection = (
-                <div className="mx_SpotlightDialog_section mx_SpotlightDialog_results" role="group">
-                    <h4>{ _t("Other rooms in %(spaceName)s", { spaceName: activeSpace.name }) }</h4>
+                <div
+                    className="mx_SpotlightDialog_section mx_SpotlightDialog_results"
+                    role="group"
+                    aria-labelledby="mx_SpotlightDialog_section_spaceRooms">
+                    <h4 id="mx_SpotlightDialog_section_spaceRooms">
+                        { _t("Other rooms in %(spaceName)s", { spaceName: activeSpace.name }) }
+                    </h4>
                     <div>
                         { spaceResults.slice(0, SECTION_LIMIT).map((room: IHierarchyRoom): JSX.Element => (
                             <Option
@@ -853,8 +883,13 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
         let groupChatSection: JSX.Element;
         if (filter === Filter.People) {
             groupChatSection = (
-                <div className="mx_SpotlightDialog_section mx_SpotlightDialog_otherSearches" role="group">
-                    <h4>{ _t('Other options') }</h4>
+                <div
+                    className="mx_SpotlightDialog_section mx_SpotlightDialog_otherSearches"
+                    role="group"
+                    aria-labelledby="mx_SpotlightDialog_section_groupChat">
+                    <h4 id="mx_SpotlightDialog_section_groupChat">
+                        { _t('Other options') }
+                    </h4>
                     <Option
                         id="mx_SpotlightDialog_button_startGroupChat"
                         className="mx_SpotlightDialog_startGroupChat"
@@ -869,8 +904,13 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
         let messageSearchSection: JSX.Element;
         if (filter === null) {
             messageSearchSection = (
-                <div className="mx_SpotlightDialog_section mx_SpotlightDialog_otherSearches" role="group">
-                    <h4>{ _t("Other searches") }</h4>
+                <div
+                    className="mx_SpotlightDialog_section mx_SpotlightDialog_otherSearches"
+                    role="group"
+                    aria-labelledby="mx_SpotlightDialog_section_messageSearch">
+                    <h4 id="mx_SpotlightDialog_section_messageSearch">
+                        { _t("Other searches") }
+                    </h4>
                     <div className="mx_SpotlightDialog_otherSearches_messageSearchText">
                         { _t(
                             "To search messages, look for this icon at the top of a room <icon/>",
@@ -905,8 +945,9 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
                     // Firefox sometimes makes this element focusable due to overflow,
                     // so force it out of tab order by default.
                     tabIndex={-1}
+                    aria-labelledby="mx_SpotlightDialog_section_recentSearches"
                 >
-                    <h4>
+                    <h4 id="mx_SpotlightDialog_section_recentSearches">
                         { _t("Recent searches") }
                         <AccessibleButton kind="link" onClick={clearRecentSearches}>
                             { _t("Clear") }
@@ -949,8 +990,13 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
         }
 
         content = <>
-            <div className="mx_SpotlightDialog_section mx_SpotlightDialog_recentlyViewed" role="group">
-                <h4>{ _t("Recently viewed") }</h4>
+            <div
+                className="mx_SpotlightDialog_section mx_SpotlightDialog_recentlyViewed"
+                role="group"
+                aria-labelledby="mx_SpotlightDialog_section_recentlyViewed">
+                <h4 id="mx_SpotlightDialog_section_recentlyViewed">
+                    { _t("Recently viewed") }
+                </h4>
                 <div>
                     { BreadcrumbsStore.instance.rooms
                         .filter(r => r.roomId !== RoomViewStore.instance.getRoomId())

From 328e734437778b14877682691a7c5e7f56dc3f60 Mon Sep 17 00:00:00 2001
From: Janne Mareike Koschinski <jannemk@element.io>
Date: Mon, 11 Jul 2022 12:36:02 +0200
Subject: [PATCH 12/13] Correct import paths

---
 src/components/views/rooms/RoomContextDetails.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/rooms/RoomContextDetails.tsx b/src/components/views/rooms/RoomContextDetails.tsx
index ebb83e9e666..ea5b11a8bae 100644
--- a/src/components/views/rooms/RoomContextDetails.tsx
+++ b/src/components/views/rooms/RoomContextDetails.tsx
@@ -17,7 +17,7 @@ limitations under the License.
 import { Room } from "matrix-js-sdk/src/matrix";
 import React, { ComponentPropsWithoutRef, ElementType } from "react";
 
-import { roomContextDetails } from "../../../../utils/i18n-helpers";
+import { roomContextDetails } from "../../../utils/i18n-helpers";
 
 type Props<T extends ElementType> = ComponentPropsWithoutRef<T> & {
     component?: T;

From 06d6445e4ef1fc0a401ee4682a88d27ce09be01d Mon Sep 17 00:00:00 2001
From: Janne Mareike Koschinski <jannemk@element.io>
Date: Mon, 11 Jul 2022 13:08:53 +0200
Subject: [PATCH 13/13] Fix issue with undefined in aria-label

---
 src/components/views/dialogs/spotlight/SpotlightDialog.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/views/dialogs/spotlight/SpotlightDialog.tsx b/src/components/views/dialogs/spotlight/SpotlightDialog.tsx
index 785affcec09..64519a0d730 100644
--- a/src/components/views/dialogs/spotlight/SpotlightDialog.tsx
+++ b/src/components/views/dialogs/spotlight/SpotlightDialog.tsx
@@ -541,8 +541,9 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
         const resultMapper = (result: Result): JSX.Element => {
             if (isRoomResult(result)) {
                 const notification = RoomNotificationStateStore.instance.getRoomState(result.room);
+                const unreadLabel = roomAriaUnreadLabel(result.room, notification);
                 const ariaProperties = {
-                    "aria-label": `${result.room.name} ${roomAriaUnreadLabel(result.room, notification)}`,
+                    "aria-label": unreadLabel ? `${result.room.name} ${unreadLabel}` : result.room.name,
                     "aria-details": `mx_SpotlightDialog_button_result_${result.room.roomId}_details`,
                 };
                 return (
@@ -956,8 +957,9 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
                     <div>
                         { recentSearches.map(room => {
                             const notification = RoomNotificationStateStore.instance.getRoomState(room);
+                            const unreadLabel = roomAriaUnreadLabel(room, notification);
                             const ariaProperties = {
-                                "aria-label": `${room.name} ${roomAriaUnreadLabel(room, notification)}`,
+                                "aria-label": unreadLabel ? `${room.name} ${unreadLabel}` : room.name,
                                 "aria-details": `mx_SpotlightDialog_button_recentSearch_${room.roomId}_details`,
                             };
                             return (