nikrozman/element-web
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

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

Browse Source 
* fix: move focus to right panel when opened

* test: update snapshot

* test(e2e): update screenshot
This commit is contained in:
Florian Duros
2025-08-14 10:59:42 +02:00
committed by GitHub
parent 64dfbc5aa5
commit 0c498a66b1
5 changed files with 23 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/structures/RightPanel.tsx
View File

@@ -34,6 +34,7 @@ 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)
@@ -64,6 +65,7 @@ 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);
@@ -82,6 +84,7 @@ 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 {
@@ -119,7 +122,13 @@ export default class RightPanel extends React.Component<Props, IState> {
};
private onRightPanelStoreUpdate = (): void => {
this.setState({ ...(RightPanel.getDerivedStateFromProps(this.props) as IState) });
const oldPhase = this.state.phase;
const newState = RightPanel.getDerivedStateFromProps(this.props) as IState;
this.setState({ ...newState });
if (oldPhase !== newState.phase) {
this.ref.current?.focus();
}
};
private onClose = (): void => {
@@ -282,7 +291,14 @@ export default class RightPanel extends React.Component<Props, IState> {
}
return (
<aside className="mx_RightPanel" id="mx_RightPanel" data-testid="right-panel">
<aside
aria-label={_t("right_panel|title")}
ref={this.ref}
className="mx_RightPanel"
id="mx_RightPanel"
data-testid="right-panel"
tabIndex={-1}
>
{card}
</aside>
);