Improve ThreadPanel ctx menu accessibility (#7217)

src/components/structures/ThreadPanel.tsx

@@ -24,12 +24,11 @@ import ResizeNotifier from '../../utils/ResizeNotifier';
 import MatrixClientContext from '../../contexts/MatrixClientContext';
 import { _t } from '../../languageHandler';
 import { ContextMenuButton } from '../../accessibility/context_menu/ContextMenuButton';
-import ContextMenu, { ChevronFace, useContextMenu } from './ContextMenu';
+import ContextMenu, { ChevronFace, MenuItemRadio, useContextMenu } from './ContextMenu';
 import RoomContext, { TimelineRenderingType } from '../../contexts/RoomContext';
 import TimelinePanel from './TimelinePanel';
 import { Layout } from '../../settings/enums/Layout';
 import { useEventEmitter } from '../../hooks/useEventEmitter';
-import AccessibleButton from '../views/elements/AccessibleButton';
 import { TileShape } from '../views/rooms/EventTile';
 import { RoomPermalinkCreator } from '../../utils/permalinks/Permalinks';
 
@@ -98,14 +97,14 @@ export const ThreadPanelHeaderFilterOptionItem = ({
     onClick: () => void;
     isSelected: boolean;
 }) => {
-    return <AccessibleButton
-        aria-selected={isSelected}
+    return <MenuItemRadio
+        active={isSelected}
         className="mx_ThreadPanel_Header_FilterOptionItem"
         onClick={onClick}
     >
         <span>{ label }</span>
         <span>{ description }</span>
-    </AccessibleButton>;
+    </MenuItemRadio>;
 };
 
 export const ThreadPanelHeader = ({ filterOption, setFilterOption }: {
@@ -141,8 +140,8 @@ export const ThreadPanelHeader = ({ filterOption, setFilterOption }: {
         top={0}
         right={25}
         onFinished={closeMenu}
-        managed={false}
         chevronFace={ChevronFace.Top}
+        mountAsChild={true}
     >
         { contextMenuOptions }
     </ContextMenu> : null;