t18: A11y + dismissal polish for the mobile nav

The mobile nav was a single signal-driven flyout with no accessibility
affordances and no dismissal paths beyond clicking the hamburger
again. Add the missing pieces a screen reader / keyboard user
expects:

  * Hamburger button now exposes `aria-expanded` (bound to the
    `menu_open` signal), `aria-controls` pointing at the flyout's
    new `id="primary-mobile-nav"`, and a dynamic `aria-label` that
    flips between "Open menu" / "Close menu".
  * Both `<nav>` regions get `aria-label="Primary"` so assistive
    tech can name them.
  * The active-route detection that already drives the
    `odp-header-btn-active` styling now also emits
    `aria-current="page"` on the matching `<A>`.
  * Pressing **Escape** while the flyout is open closes it
    (`window_event_listener(ev::keydown, ...)`).
  * Clicking outside the flyout closes it -- a transparent backdrop
    `<div class="fixed inset-0 z-40 lg:hidden">` is rendered when
    the menu is open and dismisses on click. Flyout sits on `z-50`
    so it stays above the backdrop.
  * Tapping any link inside the flyout closes it. `NavButton` and
    `ExternalNavButton` gained an optional
    `on_navigate: Option<Callback<()>>` prop that fires from the
    underlying `on:click`; the call sites in the mobile nav pass a
    closure that flips `menu_open` to `false`. Desktop nav passes
    no callback so its behaviour is unchanged.
  * `ExternalNavButton` now sets `rel="noopener noreferrer"` to
    fix the long-standing reverse-tabnabbing risk on the Library
    link.

The desktop / mobile breakpoint switch (now at `lg` after t15) is
left in place. The plan's "compact nav at lg, full nav at xl" idea is
intentionally skipped: with the current label lengths the full nav
fits cleanly at `lg` and a separate icon-only ladder would add
maintenance burden without a real visual win.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: felipebalbi

src/components/header.rs

@@ -1,11 +1,21 @@
 use crate::components::themed_icon::ThemedIcon;
+use leptos::ev;
 use leptos::prelude::RwSignal;
 use leptos::prelude::*;
 use leptos_router::components::A;
 
 #[component]
 pub fn Header(#[prop(optional, default = "header_background")] background_class: &'static str) -> impl IntoView {
     let menu_open = RwSignal::new(false);
+    let close_menu = move || menu_open.set(false);
+
+    // ESC closes the mobile menu when it is open.
+    window_event_listener(ev::keydown, move |e| {
+        if e.key() == "Escape" && menu_open.get_untracked() {
+            menu_open.set(false);
+        }
+    });
+
     view! {
         <header class=format!(
             "w-full h-[80px] lg:h-[160px] px-4 sm:px-8 md:px-16 {} flex items-center justify-between z-50 m-0 p-0 relative",
@@ -21,15 +31,17 @@ pub fn Header(#[prop(optional, default = "header_background")] background_class:
 
             <button
                 class="lg:hidden flex flex-col justify-center items-center w-10 h-10 p-2 focus:outline-none"
-                aria-label="Open menu"
+                aria-label=move || if menu_open.get() { "Close menu" } else { "Open menu" }
+                aria-expanded=move || if menu_open.get() { "true" } else { "false" }
+                aria-controls="primary-mobile-nav"
                 on:click=move |_| menu_open.update(|v| *v = !*v)
             >
                 <span class="block w-6 h-0.5 bg-black dark:bg-white mb-1"></span>
                 <span class="block w-6 h-0.5 bg-black dark:bg-white mb-1"></span>
                 <span class="block w-6 h-0.5 bg-black dark:bg-white"></span>
             </button>
 
-            <nav class="hidden lg:flex [column-gap:25px]">
+            <nav class="hidden lg:flex [column-gap:25px]" aria-label="Primary">
                 <NavButton href="/getting-started" label="Getting Started" />
                 <NavButton href="/projects" label="Projects" />
                 <ExternalNavButton
@@ -40,26 +52,47 @@ pub fn Header(#[prop(optional, default = "header_background")] background_class:
                 <NavButton href="/home" label="Home" />
             </nav>
 
+            // Backdrop: catches clicks outside the open mobile menu and dismisses it.
+            <div
+                class="fixed inset-0 z-40 lg:hidden"
+                style=move || { if menu_open.get() { "display: block;" } else { "display: none;" } }
+                on:click=move |_| close_menu()
+                aria-hidden="true"
+            ></div>
+
             <nav
-                class="absolute right-0 top-full w-[80vw] max-w-xs background_primary flex-col items-end px-4 py-4 space-y-2 shadow-lg lg:hidden transition-all duration-200"
+                id="primary-mobile-nav"
+                aria-label="Primary"
+                class="absolute right-0 top-full w-[80vw] max-w-xs background_primary flex-col items-end px-4 py-4 space-y-2 shadow-lg lg:hidden transition-all duration-200 z-50"
                 style=move || if menu_open.get() { "display: flex;" } else { "display: none;" }
             >
-                <NavButton href="/getting-started" label="Getting Started" mobile=true />
-                <NavButton href="/projects" label="Projects" mobile=true />
+                <NavButton
+                    href="/getting-started"
+                    label="Getting Started"
+                    mobile=true
+                    on_navigate=close_menu
+                />
+                <NavButton href="/projects" label="Projects" mobile=true on_navigate=close_menu />
                 <ExternalNavButton
                     href="https://opendevicepartnership.github.io/documentation/"
                     label="Library"
                     mobile=true
+                    on_navigate=close_menu
                 />
-                <NavButton href="/community" label="Community" mobile=true />
-                <NavButton href="/home" label="Home" mobile=true />
+                <NavButton href="/community" label="Community" mobile=true on_navigate=close_menu />
+                <NavButton href="/home" label="Home" mobile=true on_navigate=close_menu />
             </nav>
         </header>
     }
 }
 
 #[component]
-fn NavButton(href: &'static str, label: &'static str, #[prop(optional)] mobile: bool) -> impl IntoView {
+fn NavButton(
+    href: &'static str,
+    label: &'static str,
+    #[prop(optional)] mobile: bool,
+    #[prop(optional, into)] on_navigate: Option<Callback<()>>,
+) -> impl IntoView {
     let location = leptos_router::hooks::use_location();
     let is_active = move || location.pathname.get().starts_with(href);
 
@@ -71,14 +104,25 @@ fn NavButton(href: &'static str, label: &'static str, #[prop(optional)] mobile:
             class:odp-header-btn-active=is_active
             class:odp-header-btn-active-text=is_active
             class:w-full=mobile
+            attr:aria-current=move || if is_active() { Some("page") } else { None }
+            on:click=move |_| {
+                if let Some(cb) = on_navigate {
+                    cb.run(());
+                }
+            }
         >
             {label}
         </A>
     }
 }
 
 #[component]
-fn ExternalNavButton(href: &'static str, label: &'static str, #[prop(optional)] mobile: bool) -> impl IntoView {
+fn ExternalNavButton(
+    href: &'static str,
+    label: &'static str,
+    #[prop(optional)] mobile: bool,
+    #[prop(optional, into)] on_navigate: Option<Callback<()>>,
+) -> impl IntoView {
     view! {
         <a
             href=href
@@ -87,6 +131,12 @@ fn ExternalNavButton(href: &'static str, label: &'static str, #[prop(optional)]
                 if mobile { " w-full" } else { "" },
             )
             target="_blank"
+            rel="noopener noreferrer"
+            on:click=move |_| {
+                if let Some(cb) = on_navigate {
+                    cb.run(());
+                }
+            }
         >
             {label}
         </a>