WS-2486-Fix keyboard navigation order of new nav component

src/app/components/Navigation/index.canonical.test.tsx

@@ -55,6 +55,18 @@ describe('Navigation - Canonical', () => {
       expect(dropdown).toHaveTextContent('Dropdown Items');
     });
 
+    it('should close the menu when focus moves away from the menu area', () => {
+      const { getByRole } = render(navigation);
+
+      const menuButton = getByRole('button', { name: 'menu' });
+      fireEvent.click(menuButton);
+      expect(menuButton).toHaveAttribute('aria-expanded', 'true');
+
+      fireEvent.focusOut(menuButton, { relatedTarget: document.body });
+
+      expect(menuButton).toHaveAttribute('aria-expanded', 'false');
+    });
+
     describe('Top Bar OJs', () => {
       it.each([
         [

src/app/components/Navigation/index.canonical.tsx

@@ -1,4 +1,4 @@
-import React, { useState, use } from 'react';
+import React, { useState, use, FocusEvent } from 'react';
 import Navigation from '#psammead/psammead-navigation/src';
 import { ScrollableNavigation } from '#psammead/psammead-navigation/src/ScrollableNavigation';
 import {
@@ -43,10 +43,25 @@ const CanonicalNavigationContainer: React.FC<
     }
   });
 
+  const closeMenuWhenFocusLeaves = ({
+    currentTarget,
+    relatedTarget,
+  }: FocusEvent<HTMLDivElement>) => {
+    const focusMovedOutsideMenu = !currentTarget.contains(
+      relatedTarget as HTMLElement,
+    );
+    if (isOpen && relatedTarget && focusMovedOutsideMenu) {
+      setIsOpen(false);
+    }
+  };
+
   return (
     <Navigation dir={dir} isOpen={isOpen}>
       <div css={styles.navStack}>
-        <div css={{ position: 'relative', width: '100%' }}>
+        <div
+          css={{ position: 'relative', width: '100%' }}
+          onBlur={closeMenuWhenFocusLeaves}
+        >
           <div css={styles.topRow}>
             <ScrollableNavigation
               dir={dir}

ws-nextjs-app/integration/pages/mostReadPage/pidgin/__snapshots__/canonical.test.ts.snap

@@ -137,7 +137,7 @@ exports[`Canonical Most Read Page I can see the list items 3`] = `"3Canada 2026-
 
 exports[`Canonical Most Read Page I can see the list items 4`] = `"4'If to say I listen to my mama dat day, I for no go jail' – Victim of EndSars protest regret afta six years in jail"`;
 
-exports[`Canonical Most Read Page I can see the list items 5`] = `"5No girl don come out say dem rape am – Police update on 'Ozoro festival'"`;
+exports[`Canonical Most Read Page I can see the list items 5`] = `"5No girl don come out say dem rape am – Police update on 'Ozoro festival'De one we dem update for: 23rd March 2026"`;
 
 exports[`Canonical Most Read Page Main heading should match text 1`] = `"Di one wey dem dey read well well"`;