Revert "A11y: move focus to right panel when opened" (#30999)

* Revert "A11y: move focus to right panel when opened (#30553)"

This reverts commit 0c498a66b1.

* test(e2e): update test

playwright/pages/ElementAppPage.ts

@@ -218,7 +218,7 @@ export class ElementAppPage {
      */
     public async inviteUserToCurrentRoom(userId: string): Promise<void> {
         await this.toggleRoomInfoPanel(); // TODO skip this if the room info panel is already open
-        await this.page.getByLabel("Right panel").getByRole("menuitem", { name: "Invite" }).click();
+        await this.page.getByTestId("right-panel").getByRole("menuitem", { name: "Invite" }).click();
 
         const input = this.page.getByRole("dialog").getByTestId("invite-dialog-input");
         await input.fill(userId);

src/components/structures/RightPanel.tsx

@@ -34,7 +34,6 @@ import { Action } from "../../dispatcher/actions";
 import { type XOR } from "../../@types/common";
 import ExtensionsCard from "../views/right_panel/ExtensionsCard";
 import MemberListView from "../views/rooms/MemberList/MemberListView";
-import { _t } from "../../languageHandler";
 
 interface BaseProps {
     overwriteCard?: IRightPanelCard; // used to display a custom card and ignoring the RightPanelStore (used for UserView)
@@ -65,7 +64,6 @@ interface IState {
 export default class RightPanel extends React.Component<Props, IState> {
     public static contextType = MatrixClientContext;
     declare public context: React.ContextType<typeof MatrixClientContext>;
-    private ref = React.createRef<HTMLDivElement>();
 
     public constructor(props: Props) {
         super(props);
@@ -84,7 +82,6 @@ export default class RightPanel extends React.Component<Props, IState> {
     public componentDidMount(): void {
         this.context.on(RoomStateEvent.Members, this.onRoomStateMember);
         RightPanelStore.instance.on(UPDATE_EVENT, this.onRightPanelStoreUpdate);
-        this.ref.current?.focus();
     }
 
     public componentWillUnmount(): void {
@@ -122,13 +119,7 @@ export default class RightPanel extends React.Component<Props, IState> {
     };
 
     private onRightPanelStoreUpdate = (): void => {
-        const oldPhase = this.state.phase;
+        this.setState({ ...(RightPanel.getDerivedStateFromProps(this.props) as IState) });
-        const newState = RightPanel.getDerivedStateFromProps(this.props) as IState;
-        this.setState({ ...newState });
-
-        if (oldPhase !== newState.phase) {
-            this.ref.current?.focus();
-        }
     };
 
     private onClose = (): void => {
@@ -289,14 +280,7 @@ export default class RightPanel extends React.Component<Props, IState> {
         }
 
         return (
-            <aside
+            <aside className="mx_RightPanel" id="mx_RightPanel" data-testid="right-panel">
-                aria-label={_t("right_panel|title")}
-                ref={this.ref}
-                className="mx_RightPanel"
-                id="mx_RightPanel"
-                data-testid="right-panel"
-                tabIndex={-1}
-            >
                 {card}
             </aside>
         );

src/i18n/strings/en_EN.json

@@ -1917,7 +1917,6 @@
         "thread_list": {
             "context_menu_label": "Thread options"
         },
-        "title": "Right panel",
         "video_room_chat": {
             "title": "Chat"
         }

test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap

@@ -1958,11 +1958,9 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
         style="position: relative; user-select: auto; width: 420px; height: 100%; max-width: 50%; min-width: 320px; box-sizing: border-box; flex-shrink: 0;"
       >
         <aside
-          aria-label="Right panel"
           class="mx_RightPanel"
           data-testid="right-panel"
           id="mx_RightPanel"
-          tabindex="-1"
         >
           <div
             class="mx_BaseCard mx_ThreadPanel mx_TimelineCard"

test/unit-tests/components/views/elements/__snapshots__/AppTile-test.tsx.snap

@@ -3,11 +3,9 @@
 exports[`AppTile destroys non-persisted right panel widget on room change 1`] = `
 <DocumentFragment>
   <aside
-    aria-label="Right panel"
     class="mx_RightPanel"
     data-testid="right-panel"
     id="mx_RightPanel"
-    tabindex="-1"
   >
     <div
       class="mx_BaseCard mx_WidgetCard"