Improve accessibility of the room summary card (#12586)

* Improve accessibility of the room summary card

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update @vector-im/compound-web to 4.5.0

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix bad merge

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

src/components/views/right_panel/RoomSummaryCard.tsx

@@ -522,6 +522,7 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, permalinkCreator, onClose, on
 
             <Separator />
 
+            <div role="menubar" aria-orientation="vertical">
                 <ToggleMenuItem
                     Icon={FavouriteIcon}
                     label={_t("room|context_menu|favourite")}
@@ -566,13 +567,23 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, permalinkCreator, onClose, on
                                 </Text>
                             </MenuItem>
                         )}
-                    <MenuItem Icon={ExportArchiveIcon} label={_t("export_chat|title")} onSelect={onRoomExportClick} />
+                        <MenuItem
+                            Icon={ExportArchiveIcon}
+                            label={_t("export_chat|title")}
+                            onSelect={onRoomExportClick}
+                        />
                     </>
                 )}
 
                 <Separator />
 
-            <MenuItem Icon={LeaveIcon} kind="critical" label={_t("action|leave_room")} onSelect={onLeaveRoomClick} />
+                <MenuItem
+                    Icon={LeaveIcon}
+                    kind="critical"
+                    label={_t("action|leave_room")}
+                    onSelect={onLeaveRoomClick}
+                />
+            </div>
 
             {SettingsStore.getValue(UIFeature.Widgets) &&
                 !isVideoRoom &&

test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap

@@ -123,6 +123,10 @@ exports[`<RoomSummaryCard /> has button to edit topic when expanded 1`] = `
         data-orientation="horizontal"
         role="separator"
       />
+      <div
+        aria-orientation="vertical"
+        role="menubar"
+      >
         <div
           aria-checked="false"
           class="_item_1gwvj_17 _interactive_1gwvj_36"
@@ -406,6 +410,7 @@ exports[`<RoomSummaryCard /> has button to edit topic when expanded 1`] = `
             />
           </svg>
         </button>
+      </div>
       <div
         class="mx_BaseCard_Group mx_RoomSummaryCard_appsGroup"
       >
@@ -521,6 +526,10 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
         data-orientation="horizontal"
         role="separator"
       />
+      <div
+        aria-orientation="vertical"
+        role="menubar"
+      >
         <div
           aria-checked="false"
           class="_item_1gwvj_17 _interactive_1gwvj_36"
@@ -804,6 +813,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
             />
           </svg>
         </button>
+      </div>
       <div
         class="mx_BaseCard_Group mx_RoomSummaryCard_appsGroup"
       >
@@ -930,6 +940,10 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
         data-orientation="horizontal"
         role="separator"
       />
+      <div
+        aria-orientation="vertical"
+        role="menubar"
+      >
         <div
           aria-checked="false"
           class="_item_1gwvj_17 _interactive_1gwvj_36"
@@ -1213,6 +1227,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
             />
           </svg>
         </button>
+      </div>
       <div
         class="mx_BaseCard_Group mx_RoomSummaryCard_appsGroup"
       >