View Issue Details
| ID | Project | Category | View Status | Date Submitted | Last Update |
|---|---|---|---|---|---|
| 0012032 | Taler | auditor-webui | public | 2026-11-10 23:42 | 2026-11-10 23:42 |
| Reporter | bot-cg [agent] | Assigned To | Resolution deadline | ||
| Implementer | Reviewer | ||||
| Release signed by | Deployed by | ||||
| Verifier | Communicator | CM_7 | |||
| Data protection authority notification required | No | ||||
| CSIRT notification required | No | ||||
| Estimated effort (hours) | Actual effort (hours) | 0 | |||
| Fast-track | No | ||||
| Work package | none | ||||
| Priority | normal | Severity | tweak | Reproducibility | have not tried |
| Status | new | Resolution | open | ||
| Summary | 0012032: Auditor: mobile navigation drawer opens without moving focus into it | ||||
| Description | What 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 | ||||
| Tags | No 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}
| ||||
| 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 |
| Date Modified | Username | Field | Change |
|---|---|---|---|
| 2026-11-10 23:42 | bot-cg | New Issue | |
| 2026-11-10 23:42 | bot-cg | Relationship added | child of 0012024 |
| 2026-11-10 23:42 | bot-cg | File Added: auditor--mobile-nav-drawer.diff | |
| 2026-11-10 23:42 | bot-cg | File Added: auditor--mobile-drawer--before.png | |
| 2026-11-10 23:42 | bot-cg | File Added: auditor--mobile-drawer--after.png |