a11y: add focus trap and dialog role to mobile sidebar (#56)

- Sidebar uses role="dialog" + aria-modal="true" when open on mobile,
  reverts to role="complementary" on desktop
- Main content gets inert attribute when sidebar dialog is open,
  preventing focus from escaping the sidebar
- Escape key closes the sidebar
- Focus moves to close button on open, returns to trigger on close
- Added aria-labelledby pointing to the sidebar title

Closes #48

Co-authored-by: Claude Opus 4.6 <[email protected]>

Author: corvid-agent

src/app/components/shell/shell.html

@@ -1,12 +1,15 @@
 <div class="shell">
   <aside
+    #sidebar
     class="sidebar"
     [class.sidebar-open]="sidebarOpen()"
-    role="complementary"
-    aria-label="Spec navigation"
+    [attr.role]="isDialog() ? 'dialog' : 'complementary'"
+    [attr.aria-modal]="isDialog() ? 'true' : null"
+    [attr.aria-label]="isDialog() ? null : 'Spec navigation'"
+    [attr.aria-labelledby]="isDialog() ? 'sidebar-title' : null"
   >
     <div class="sidebar-header">
-      <h1 class="logo">Specl</h1>
+      <h1 id="sidebar-title" class="logo">Specl</h1>
       <button class="btn-icon sidebar-close" (click)="toggleSidebar()" aria-label="Close sidebar">
         &times;
       </button>
@@ -19,7 +22,12 @@ <h1 class="logo">Specl</h1>
     (click)="toggleSidebar()"
     aria-hidden="true"
   ></div>
-  <main id="main-content" class="content" role="main">
+  <main
+    id="main-content"
+    class="content"
+    role="main"
+    [attr.inert]="isDialog() ? '' : null"
+  >
     <button
       class="btn-icon mobile-menu-btn"
       (click)="toggleSidebar()"

src/app/components/shell/shell.ts

@@ -1,4 +1,4 @@
-import { Component, signal, inject } from '@angular/core';
+import { Component, signal, computed, inject, effect, ElementRef, HostListener, ViewChild } from '@angular/core';
 import { RouterOutlet, Router, NavigationEnd } from '@angular/router';
 import { SpecListComponent } from '../spec-list/spec-list';
 import { filter } from 'rxjs';
@@ -16,6 +16,17 @@ export class ShellComponent {
   /** Whether the mobile sidebar is visible */
   readonly sidebarOpen = signal(true);
 
+  /** Track mobile breakpoint for dialog semantics */
+  readonly isMobile = signal(window.innerWidth < 768);
+
+  /** Sidebar acts as a dialog on mobile when open */
+  readonly isDialog = computed(() => this.isMobile() && this.sidebarOpen());
+
+  @ViewChild('sidebar') private sidebarRef?: ElementRef<HTMLElement>;
+
+  /** Element that had focus before sidebar opened (for focus restoration) */
+  private previousFocus: HTMLElement | null = null;
+
   constructor() {
     // Auto-close sidebar on navigation (mobile: user selected a spec)
     this.router.events
@@ -25,6 +36,35 @@ export class ShellComponent {
           this.sidebarOpen.set(false);
         }
       });
+
+    // Manage focus when sidebar opens/closes on mobile
+    effect(() => {
+      const open = this.sidebarOpen();
+      const mobile = this.isMobile();
+      if (mobile && open) {
+        this.previousFocus = document.activeElement as HTMLElement | null;
+        // Move focus into sidebar after Angular renders
+        queueMicrotask(() => {
+          const closeBtn = this.sidebarRef?.nativeElement.querySelector<HTMLElement>('.sidebar-close');
+          closeBtn?.focus();
+        });
+      } else if (this.previousFocus) {
+        this.previousFocus.focus();
+        this.previousFocus = null;
+      }
+    });
+  }
+
+  @HostListener('window:resize')
+  onResize(): void {
+    this.isMobile.set(window.innerWidth < 768);
+  }
+
+  @HostListener('keydown.escape')
+  onEscape(): void {
+    if (this.isDialog()) {
+      this.sidebarOpen.set(false);
+    }
   }
 
   toggleSidebar(): void {