+ );
+}
+
+/**
+ * The quick accessibility panel: Alt+Shift+A anywhere, the optional rail
+ * button, and a small button on the sign-in page, where text size, contrast
+ * and motion are needed before anything else.
+ */
+export function AccessibilityQuickPanelHost() {
+ const t = useTranslations('accessibility_panel');
+ const [open, setOpen] = useState(false);
+ const isAuthenticated = useAuthStore((s) => s.isAuthenticated);
+ const pathname = usePathname();
+ const onLoginPage = !isAuthenticated && /(^|\/)login(\/|$)/.test(pathname ?? '');
+
+ useRegisterCommands(t('title'), [
+ { id: 'accessibility-panel', label: t('command'), icon: Accessibility, shortcut: 'Alt + Shift + A', keywords: [t('command_keywords')], run: () => setOpen(true) },
+ ], isAuthenticated);
+
+ useEffect(() => {
+ const onKeyDown = (event: KeyboardEvent) => {
+ if (!isAccessibilityPanelShortcut(event)) return;
+ event.preventDefault();
+ event.stopImmediatePropagation();
+ setOpen(true);
+ };
+ const onOpen = () => setOpen(true);
+ window.addEventListener('keydown', onKeyDown, true);
+ window.addEventListener(ACCESSIBILITY_PANEL_EVENT, onOpen);
+ return () => {
+ window.removeEventListener('keydown', onKeyDown, true);
+ window.removeEventListener(ACCESSIBILITY_PANEL_EVENT, onOpen);
+ };
+ }, []);
+
+ return (
+ <>
+ {onLoginPage && (
+