View Issue Details

IDProjectCategoryView StatusLast Update
0012032Talerauditor-webuipublic2026-11-10 23:42
Reporterbot-cg [agent] Assigned ToResolution deadline
ImplementerReviewer 
Release signed byDeployed by 
VerifierCommunicatorCM_7  
Data protection authority notification requiredNo  
CSIRT notification requiredNo  
Estimated effort (hours)Actual effort (hours)0 
Fast-trackNo
Work packagenone
PrioritynormalSeveritytweakReproducibilityhave not tried
Status newResolutionopen 
Summary0012032: Auditor: mobile navigation drawer opens without moving focus into it
DescriptionWhat happens:
Below the md breakpoint the '☰' button opens a full-screen drawer (fixed inset-0 overlay). Focus stays on the '☰' button, which is now covered. Measured at 420 px width: activeElement after opening = BUTTON[aria-label='Open navigation'].

Expected:
Focus moves into the drawer, onto its close button (the same convention web-util's Header uses for its mobile menu), and returns to the menu button when the drawer closes.

Where:
  - packages/taler-auditor-webui/src/components/menu/SideBar.tsx:23
  - packages/taler-auditor-webui/src/components/menu/index.tsx:27

Measured in headless Chromium (document.activeElement):
  before: BUTTON[aria-label='Open navigation'] (behind the overlay)
  after: BUTTON[aria-label='Close navigation']; Enter closes the drawer and focus returns to BUTTON[aria-label='Open navigation']

Proposed fix:
When Sidebar is rendered with `mobile`, an effect focuses the drawer's close button and refocuses the previously focused element (the menu button) on unmount if it is still connected. The desktop sidebar is unaffected.

Patch against taler-typescript-core master attached; the same change is committed on branch dev/bots/autofocus (durian). Screenshots attached (focused element outlined in red): 'before' is master, 'after' is with the patch.

Verified: tsc --noEmit ok; eslint + prettier clean; Menu rendered in Chromium at 420 px with the wouter hash router and ConfigContext, before and after
TagsNo tags attached.
Attached Files
auditor--mobile-nav-drawer.diff (1,710 bytes)   
diff --git a/packages/taler-auditor-webui/src/components/menu/SideBar.tsx b/packages/taler-auditor-webui/src/components/menu/SideBar.tsx
index 9d2ecf1a2..ee2aa97ca 100644
--- a/packages/taler-auditor-webui/src/components/menu/SideBar.tsx
+++ b/packages/taler-auditor-webui/src/components/menu/SideBar.tsx
@@ -5,6 +5,7 @@
 
 import { useTranslationContext } from "@gnu-taler/web-util/browser";
 import type { VNode } from "preact";
+import { useEffect, useRef } from "preact/hooks";
 import { Link, useLocation } from "wouter-preact";
 import { useConfigContext } from "../../context/config.js";
 import { Paths } from "../../routing/monitoringRoutes.js";
@@ -19,6 +20,17 @@ export function Sidebar({ mobile = false, onClose }: Props): VNode {
   const config = useConfigContext();
   const { i18n } = useTranslationContext();
   const [location] = useLocation();
+  const closeButton = useRef<HTMLButtonElement>(null);
+  useEffect(() => {
+    if (!mobile) return;
+    // The mobile drawer covers the page, so move focus into it and give it
+    // back to the menu button once the drawer closes.
+    const opener = document.activeElement;
+    closeButton.current?.focus();
+    return () => {
+      if (opener instanceof HTMLElement && opener.isConnected) opener.focus();
+    };
+  }, [mobile]);
   const entries = [
     { path: Paths.overview, label: <i18n.Translate>Overview</i18n.Translate> },
     {
@@ -61,6 +73,7 @@ export function Sidebar({ mobile = false, onClose }: Props): VNode {
         </Link>
         {mobile && (
           <button
+            ref={closeButton}
             type="button"
             class="rounded p-1 text-gray-400 hover:text-white"
             onClick={onClose}

Required notifications

Address or linkRemarkAdded byNotifiedActions

Relationships

child of 0012024 new Web UIs (bank, wallet, exchange AML/KYC, challenger, auditor, web-util forms): dialogs and single-purpose forms open without keyboard focus on the obvious field 

Activities

Issue History

Date ModifiedUsernameFieldChange
2026-11-10 23:42bot-cgNew Issue
2026-11-10 23:42bot-cgRelationship addedchild of 0012024
2026-11-10 23:42bot-cgFile Added: auditor--mobile-nav-drawer.diff
2026-11-10 23:42bot-cgFile Added: auditor--mobile-drawer--before.png
2026-11-10 23:42bot-cgFile Added: auditor--mobile-drawer--after.png