Improve header accessibility and keyboard navigation support. Resolves #4804

frontend/__tests__/a11y/components/Header.a11y.test.tsx

@@ -1,7 +1,25 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import 'jest-axe/extend-expect'
+import '@testing-library/jest-dom'
+import Header from 'components/Header'
+
+describe('Header accessibility', () => {
+  test('has no basic a11y violations and exposes mobile toggle attributes', async () => {
+    const { container } = render(<Header isGitHubAuthEnabled={false} />)
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+
+    const toggle = screen.getByRole('button', { name: /open main menu|close main menu/i })
+    expect(toggle).toHaveAttribute('aria-controls', 'mobile-navigation')
+    expect(toggle).toHaveAttribute('aria-expanded', 'false')
+  })
+})
 import { render } from '@testing-library/react'
 import { axe } from 'jest-axe'
 import { useTheme } from 'next-themes'
 import Header from 'components/Header'
 
 jest.mock('hooks/useDjangoSession', () => ({
   useDjangoSession: jest.fn(() => ({

frontend/src/app/globals.css

@@ -399,6 +399,30 @@ select:disabled,
     color: black;
   }
 
+  /* Skip link for keyboard users */
+  .skip-link {
+    position: absolute;
+    left: -999px;
+    top: auto;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    z-index: 9999;
+  }
+
+  .skip-link:focus,
+  .skip-link:active {
+    left: 1rem;
+    top: 1rem;
+    width: auto;
+    height: auto;
+    padding: 0.5rem 0.75rem;
+    background-color: #111827; /* gray-900 */
+    color: #ffffff;
+    border-radius: 0.375rem;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+  }
+
   .dark .popup-content {
     color: white;
   }

frontend/src/app/layout.tsx

@@ -71,13 +71,16 @@ export default function RootLayout({
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
         style={{ minHeight: '100vh' }}
       >
+        <a href="#main" className="skip-link">
+          Skip to main content
+        </a>
         <Providers>
           <BreadcrumbRoot>
             <div className="flex min-h-screen flex-col">
               <AutoScrollToTop />
               <Header isGitHubAuthEnabled={IS_GITHUB_AUTH_ENABLED} />
               <BreadCrumbsWrapper />
-              <main className="flex flex-1 flex-col justify-center">{children}</main>
+              <main id="main" className="flex flex-1 flex-col justify-center">{children}</main>
               <Footer />
               <ScrollToTop />
             </div>

frontend/src/components/Header.tsx

@@ -3,7 +3,7 @@
 import Image from 'next/image'
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import {
   FaRegHeart,
   FaRegStar,
@@ -24,6 +24,7 @@
   const pathname = usePathname()
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
   const toggleMobileMenu = () => setMobileMenuOpen(!mobileMenuOpen)
+  const previousActiveElement = useRef<HTMLElement | null>(null)
 
   useEffect(() => {
     const handleResize = () => {
@@ -46,12 +47,44 @@
       }
     }
 
+    const handleKeydown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape' && mobileMenuOpen) {
+        setMobileMenuOpen(false)
+      }
+    }
+
+    // Focus management: when opening mobile nav, move focus to first focusable inside it.
+    if (mobileMenuOpen) {
+      previousActiveElement.current = document.activeElement as HTMLElement | null
+      // Defer to next tick so the panel is in the DOM
+      setTimeout(() => {
+        const mobileNav = document.getElementById('mobile-navigation')
+        if (mobileNav) {
+          const first = mobileNav.querySelector<HTMLElement>('a, button, [tabindex]:not([tabindex="-1"])')
+          first?.focus()
+        }
+      }, 0)
+    } else {
+      // restore focus to previous element or to the toggle button
+      setTimeout(() => {
+        const prev = previousActiveElement.current
+        if (prev) {
+          prev.focus()
+        } else {
+          const toggle = document.getElementById('mobile-menu-toggle') as HTMLElement | null
+          toggle?.focus()
+        }
+      }, 0)
+    }
+
     globalThis.addEventListener('resize', handleResize)
     globalThis.addEventListener('click', handleOutsideClick)
+    globalThis.addEventListener('keydown', handleKeydown)
 
     return () => {
       globalThis.removeEventListener('resize', handleResize)
       globalThis.removeEventListener('click', handleOutsideClick)
+      globalThis.removeEventListener('keydown', handleKeydown)
     }
   }, [mobileMenuOpen])
 
@@ -139,20 +172,25 @@
           <div className="lg:hidden">
             <Button
               onPress={toggleMobileMenu}
+              aria-expanded={mobileMenuOpen}
+              aria-controls="mobile-navigation"
               className="flex h-11 w-11 items-center justify-center rounded-lg bg-transparent text-slate-300 hover:bg-transparent hover:text-slate-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
             >
-              <span className="sr-only">Open main menu</span>
+              <span className="sr-only">{mobileMenuOpen ? 'Close main menu' : 'Open main menu'}</span>
               {mobileMenuOpen ? <FaTimes className="h-6 w-6" /> : <FaBars className="h-6 w-6" />}
             </Button>
           </div>
         </div>
       </div>
       <div
+        id="mobile-navigation"
+        role="navigation"
+        aria-hidden={!mobileMenuOpen}
         className={cn(
           'bg-owasp-blue fixed inset-y-0 left-0 z-50 w-64 transform shadow-md transition-transform dark:bg-slate-800',
           mobileMenuOpen ? 'translate-x-0' : '-translate-x-full'
         )}
       >
         <div className="flex h-full flex-col justify-between gap-1 px-2 pt-2 pb-3">
           {/* Logo */}
           <div className="flex flex-col justify-center gap-5">