♿️(frontend) close side panel with Escape key

[Ovgodd]

Purpose

Side panels can be closed with the ✕ button, but keyboard users have no equivalent shortcut. Escape should close the panel and return focus to the trigger button.

Proposal

• Close side panel with Escape when focus is inside the panel
• Restore focus on the trigger button that opened the panel
• If a second panel is opened without closing the first, restore focus on the last opened panel trigger (not the first one)
• Allow Escape from the chat textarea to close the panel

[greptile-apps]

Confidence Score: 4/5

This is close, but the subpanel keyboard path should be fixed before merging.

• Escape works for focused content inside the side panel.
• Opening a Tools subpanel can remove the focused trigger without moving focus into the new panel content.
• Once focus falls back outside the panel, the containment check prevents Escape from closing it.

src/frontend/src/features/rooms/livekit/components/SidePanel.tsx

Important Files Changed

Filename	Overview
src/frontend/src/features/rooms/livekit/components/SidePanel.tsx	Adds Escape close wiring and a screen-reader hint, but subpanel focus can leave Escape unable to close the panel.
src/frontend/src/hooks/useEscapeToClose.ts	Adds the shared Escape close hook with a containment check against the active element.
src/frontend/src/features/rooms/livekit/components/chat/Input.tsx	Lets Escape leave the chat textarea so the panel-level close handler can run.
src/frontend/src/locales/en/rooms.json	Adds English text for the Escape shortcut.
src/frontend/src/locales/de/rooms.json	Adds German text for the Escape shortcut.
src/frontend/src/locales/fr/rooms.json	Adds French text for the Escape shortcut.
src/frontend/src/locales/nl/rooms.json	Adds Dutch text for the Escape shortcut.
CHANGELOG.md	Documents the new Escape shortcut.

Comments Outside Diff (1)

1. src/frontend/src/features/rooms/livekit/components/SidePanel.tsx, line 193-196 (link)

   Focus can escape

   When a submenu is opened from the Tools panel, only activeSubPanelId changes while activePanelId stays TOOLS, so this open-focus effect does not run again. The Tools list then swaps to the subpanel content and removes the clicked submenu button from the DOM. If focus falls back to document.body, the new Escape handler will not close the panel because asideRef.contains(document.activeElement) is false. This leaves keyboard users in an open side panel where Escape no longer works after opening a subpanel. Please move focus into the new subpanel when the submenu changes, or handle the fallback focus state before relying on the containment check.

_{Reviews (2): Last reviewed commit: "♿️(frontend) announce Escape close hint ..." | Re-trigger Greptile}

[greptile-apps]

Subpanel Trigger Can Disappear

When Escape closes the panel from inside a subpanel, the close path clears both activePanelId and activeSubPanelId. If focus was last captured from the subpanel opener inside the side panel, that element can be unmounted before focus restoration runs, so document.contains(trigger) fails and keyboard focus is not restored to a visible trigger.

[coderabbitai]

Caution

Review failed

An error occurred during the review process. Please try again later.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud