From c598c20b66e636a07d67ab29911a4e257d007e0d Mon Sep 17 00:00:00 2001
From: glo82145 <glo82145@adobe.com>
Date: Wed, 27 Apr 2022 15:53:13 +0530
Subject: [PATCH 01/11] AC-2480::Flyout panels do not trap focus while open

---
 .../Navigation/__tests__/navigation.spec.js   |  6 ++
 .../lib/components/Navigation/navigation.js   | 59 ++++++++++---------
 2 files changed, 37 insertions(+), 28 deletions(-)

diff --git a/packages/venia-ui/lib/components/Navigation/__tests__/navigation.spec.js b/packages/venia-ui/lib/components/Navigation/__tests__/navigation.spec.js
index 8ce0abe0d5..7a9cdb85cf 100755
--- a/packages/venia-ui/lib/components/Navigation/__tests__/navigation.spec.js
+++ b/packages/venia-ui/lib/components/Navigation/__tests__/navigation.spec.js
@@ -21,6 +21,12 @@ jest.mock('../../Header/currencySwitcher', () => () => 'CurrencySwitcher');
 
 jest.mock('@magento/peregrine/lib/talons/Navigation/useNavigation');
 
+jest.mock('react-aria', () => ({
+    FocusScope: jest.fn(({ children }) => {
+        return children;
+    })
+}));
+
 /*
  * Tests.
  */
diff --git a/packages/venia-ui/lib/components/Navigation/navigation.js b/packages/venia-ui/lib/components/Navigation/navigation.js
index f614cbe40b..b04ab17c9d 100755
--- a/packages/venia-ui/lib/components/Navigation/navigation.js
+++ b/packages/venia-ui/lib/components/Navigation/navigation.js
@@ -10,6 +10,7 @@ import StoreSwitcher from '../Header/storeSwitcher';
 import LoadingIndicator from '../LoadingIndicator';
 import NavHeader from './navHeader';
 import defaultClasses from './navigation.module.css';
+import { FocusScope } from 'react-aria';
 
 const AuthModal = React.lazy(() => import('../AuthModal'));
 
@@ -52,35 +53,37 @@ const Navigation = props => {
     ) : null;
 
     return (
-        <aside className={rootClassName}>
-            <header className={classes.header}>
-                <NavHeader
-                    isTopLevel={isTopLevel}
-                    onBack={handleBack}
-                    view={view}
-                />
-            </header>
-            <div className={bodyClassName}>
-                <CategoryTree
-                    categoryId={categoryId}
-                    onNavigate={handleClose}
-                    setCategoryId={setCategoryId}
-                    updateCategories={catalogActions.updateCategories}
-                />
-            </div>
-            <div className={classes.footer}>
-                <div className={classes.switchers}>
-                    <StoreSwitcher />
-                    <CurrencySwitcher />
+        <FocusScope contain restoreFocus autoFocus>
+            <aside className={rootClassName}>
+                <header className={classes.header}>
+                    <NavHeader
+                        isTopLevel={isTopLevel}
+                        onBack={handleBack}
+                        view={view}
+                    />
+                </header>
+                <div className={bodyClassName}>
+                    <CategoryTree
+                        categoryId={categoryId}
+                        onNavigate={handleClose}
+                        setCategoryId={setCategoryId}
+                        updateCategories={catalogActions.updateCategories}
+                    />
                 </div>
-                <AuthBar
-                    disabled={hasModal}
-                    showMyAccount={showMyAccount}
-                    showSignIn={showSignIn}
-                />
-            </div>
-            <div className={modalClassName}>{authModal}</div>
-        </aside>
+                <div className={classes.footer}>
+                    <div className={classes.switchers}>
+                        <StoreSwitcher />
+                        <CurrencySwitcher />
+                    </div>
+                    <AuthBar
+                        disabled={hasModal}
+                        showMyAccount={showMyAccount}
+                        showSignIn={showSignIn}
+                    />
+                </div>
+                <div className={modalClassName}>{authModal}</div>
+            </aside>
+        </FocusScope>
     );
 };
 

From 54bafc8274cd65b1bfdec7556992c6b17ec83259 Mon Sep 17 00:00:00 2001
From: glo82145 <glo82145@adobe.com>
Date: Mon, 2 May 2022 16:56:00 +0530
Subject: [PATCH 02/11] AC-2480::removed autoscope propety from FocusScope as
 not approved by yarn run lint

---
 packages/venia-ui/lib/components/Navigation/navigation.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/venia-ui/lib/components/Navigation/navigation.js b/packages/venia-ui/lib/components/Navigation/navigation.js
index b04ab17c9d..78aa8fa86c 100755
--- a/packages/venia-ui/lib/components/Navigation/navigation.js
+++ b/packages/venia-ui/lib/components/Navigation/navigation.js
@@ -53,7 +53,7 @@ const Navigation = props => {
     ) : null;
 
     return (
-        <FocusScope contain restoreFocus autoFocus>
+        <FocusScope contain restoreFocus>
             <aside className={rootClassName}>
                 <header className={classes.header}>
                     <NavHeader

From 3c336744e57e56ee6ec1cca770fc1c73466e98d5 Mon Sep 17 00:00:00 2001
From: glo82145 <glo82145@adobe.com>
Date: Tue, 24 May 2022 16:31:02 +0530
Subject: [PATCH 03/11] AC-2480- Implemented some PR changes

---
 .../venia-ui/lib/components/Navigation/navigation.js   |  4 ++--
 .../lib/components/Navigation/navigation.module.css    | 10 ++++------
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/packages/venia-ui/lib/components/Navigation/navigation.js b/packages/venia-ui/lib/components/Navigation/navigation.js
index 78aa8fa86c..cc812bfc04 100755
--- a/packages/venia-ui/lib/components/Navigation/navigation.js
+++ b/packages/venia-ui/lib/components/Navigation/navigation.js
@@ -53,8 +53,8 @@ const Navigation = props => {
     ) : null;
 
     return (
-        <FocusScope contain restoreFocus>
-            <aside className={rootClassName}>
+        <FocusScope contain restoreFocus autoFocus>
+            <aside aria-hidden="true" className={rootClassName}>
                 <header className={classes.header}>
                     <NavHeader
                         isTopLevel={isTopLevel}
diff --git a/packages/venia-ui/lib/components/Navigation/navigation.module.css b/packages/venia-ui/lib/components/Navigation/navigation.module.css
index 4e8edf9f4d..0447b09e88 100644
--- a/packages/venia-ui/lib/components/Navigation/navigation.module.css
+++ b/packages/venia-ui/lib/components/Navigation/navigation.module.css
@@ -1,15 +1,14 @@
 .root {
     composes: bg-white from global;
     composes: bottom-0 from global;
-    composes: grid from global;
     composes: left-0 from global;
     composes: max-w-modal from global;
-    composes: opacity-0 from global;
     composes: overflow-hidden from global;
     composes: fixed from global;
     composes: top-0 from global;
     composes: w-full from global;
     composes: z-menu from global;
+    display: none;
     grid-template-rows: auto 1fr auto;
     transform: translate3d(-100%, 0, 0);
     transition-duration: 192ms;
@@ -18,21 +17,20 @@
 
     /* TODO @TW: review (B6) */
     /* composes: invisible from global; */
-    visibility: hidden;
+
 }
 
 .root_open {
     composes: root;
-
-    composes: opacity-100 from global;
     composes: shadow-modal from global;
+    display: block;
     transform: translate3d(0, 0, 0);
     transition-duration: 384ms;
     transition-timing-function: var(--venia-global-anim-in);
 
     /* TODO @TW: review (B6) */
     /* composes: visible from global; */
-    visibility: visible;
+   
 }
 
 .header {

From febcab7d7e0b3d980d787dadf5f2d35e79a3917a Mon Sep 17 00:00:00 2001
From: glo82145 <glo82145@adobe.com>
Date: Tue, 24 May 2022 16:47:11 +0530
Subject: [PATCH 04/11] AC-2480::implemented PR comments

---
 .../__tests__/__snapshots__/navigation.spec.js.snap    |  3 +++
 .../venia-ui/lib/components/Navigation/navigation.js   |  1 -
 .../lib/components/Navigation/navigation.module.css    | 10 +---------
 3 files changed, 4 insertions(+), 10 deletions(-)

diff --git a/packages/venia-ui/lib/components/Navigation/__tests__/__snapshots__/navigation.spec.js.snap b/packages/venia-ui/lib/components/Navigation/__tests__/__snapshots__/navigation.spec.js.snap
index 931c6d6cda..e0b4029aeb 100644
--- a/packages/venia-ui/lib/components/Navigation/__tests__/__snapshots__/navigation.spec.js.snap
+++ b/packages/venia-ui/lib/components/Navigation/__tests__/__snapshots__/navigation.spec.js.snap
@@ -2,6 +2,7 @@
 
 exports[`authModal is rendered when hasModal is true 1`] = `
 <aside
+  aria-hidden="true"
   className="root"
 >
   <header
@@ -37,6 +38,7 @@ exports[`authModal is rendered when hasModal is true 1`] = `
 
 exports[`renders correctly when closed 1`] = `
 <aside
+  aria-hidden="true"
   className="root"
 >
   <header
@@ -68,6 +70,7 @@ exports[`renders correctly when closed 1`] = `
 
 exports[`renders correctly when open 1`] = `
 <aside
+  aria-hidden="true"
   className="root_open"
 >
   <header
diff --git a/packages/venia-ui/lib/components/Navigation/navigation.js b/packages/venia-ui/lib/components/Navigation/navigation.js
index cc812bfc04..bd435d2543 100755
--- a/packages/venia-ui/lib/components/Navigation/navigation.js
+++ b/packages/venia-ui/lib/components/Navigation/navigation.js
@@ -36,7 +36,6 @@ const Navigation = props => {
     const rootClassName = isOpen ? classes.root_open : classes.root;
     const modalClassName = hasModal ? classes.modal_open : classes.modal;
     const bodyClassName = hasModal ? classes.body_masked : classes.body;
-
     // Lazy load the auth modal because it may not be needed.
     const authModal = hasModal ? (
         <Suspense fallback={<LoadingIndicator />}>
diff --git a/packages/venia-ui/lib/components/Navigation/navigation.module.css b/packages/venia-ui/lib/components/Navigation/navigation.module.css
index 0447b09e88..82b23cc899 100644
--- a/packages/venia-ui/lib/components/Navigation/navigation.module.css
+++ b/packages/venia-ui/lib/components/Navigation/navigation.module.css
@@ -14,10 +14,6 @@
     transition-duration: 192ms;
     transition-property: opacity, transform, visibility;
     transition-timing-function: var(--venia-global-anim-out);
-
-    /* TODO @TW: review (B6) */
-    /* composes: invisible from global; */
-
 }
 
 .root_open {
@@ -26,11 +22,7 @@
     display: block;
     transform: translate3d(0, 0, 0);
     transition-duration: 384ms;
-    transition-timing-function: var(--venia-global-anim-in);
-
-    /* TODO @TW: review (B6) */
-    /* composes: visible from global; */
-   
+    transition-timing-function: var(--venia-global-anim-in);  
 }
 
 .header {

From 239ca3125b689ccf7d1da8f7e554ec9334fa463e Mon Sep 17 00:00:00 2001
From: glo82145 <glo82145@adobe.com>
Date: Mon, 30 May 2022 13:56:14 +0530
Subject: [PATCH 05/11] AC-2480::added portal tag

---
 .../lib/components/Navigation/navigation.js      |  8 ++++++--
 .../components/Navigation/navigation.module.css  | 16 +++++++++++++---
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/packages/venia-ui/lib/components/Navigation/navigation.js b/packages/venia-ui/lib/components/Navigation/navigation.js
index bd435d2543..9a6e10c7db 100755
--- a/packages/venia-ui/lib/components/Navigation/navigation.js
+++ b/packages/venia-ui/lib/components/Navigation/navigation.js
@@ -11,7 +11,7 @@ import LoadingIndicator from '../LoadingIndicator';
 import NavHeader from './navHeader';
 import defaultClasses from './navigation.module.css';
 import { FocusScope } from 'react-aria';
-
+import { Portal } from '../Portal';
 const AuthModal = React.lazy(() => import('../AuthModal'));
 
 const Navigation = props => {
@@ -52,7 +52,10 @@ const Navigation = props => {
     ) : null;
 
     return (
-        <FocusScope contain restoreFocus autoFocus>
+        <Portal>
+            {/* eslint-disable-next-line jsx-a11y/no-autofocus */}
+            <FocusScope contain restoreFocus autoFocus>
+                {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
             <aside aria-hidden="true" className={rootClassName}>
                 <header className={classes.header}>
                     <NavHeader
@@ -83,6 +86,7 @@ const Navigation = props => {
                 <div className={modalClassName}>{authModal}</div>
             </aside>
         </FocusScope>
+        </Portal>
     );
 };
 
diff --git a/packages/venia-ui/lib/components/Navigation/navigation.module.css b/packages/venia-ui/lib/components/Navigation/navigation.module.css
index 82b23cc899..4e8edf9f4d 100644
--- a/packages/venia-ui/lib/components/Navigation/navigation.module.css
+++ b/packages/venia-ui/lib/components/Navigation/navigation.module.css
@@ -1,28 +1,38 @@
 .root {
     composes: bg-white from global;
     composes: bottom-0 from global;
+    composes: grid from global;
     composes: left-0 from global;
     composes: max-w-modal from global;
+    composes: opacity-0 from global;
     composes: overflow-hidden from global;
     composes: fixed from global;
     composes: top-0 from global;
     composes: w-full from global;
     composes: z-menu from global;
-    display: none;
     grid-template-rows: auto 1fr auto;
     transform: translate3d(-100%, 0, 0);
     transition-duration: 192ms;
     transition-property: opacity, transform, visibility;
     transition-timing-function: var(--venia-global-anim-out);
+
+    /* TODO @TW: review (B6) */
+    /* composes: invisible from global; */
+    visibility: hidden;
 }
 
 .root_open {
     composes: root;
+
+    composes: opacity-100 from global;
     composes: shadow-modal from global;
-    display: block;
     transform: translate3d(0, 0, 0);
     transition-duration: 384ms;
-    transition-timing-function: var(--venia-global-anim-in);  
+    transition-timing-function: var(--venia-global-anim-in);
+
+    /* TODO @TW: review (B6) */
+    /* composes: visible from global; */
+    visibility: visible;
 }
 
 .header {

From 07f6920ecfde6b9e8d82844a7c65a4f944bb62f5 Mon Sep 17 00:00:00 2001
From: glo82145 <glo82145@adobe.com>
Date: Mon, 30 May 2022 18:58:50 +0530
Subject: [PATCH 06/11] AC-2480::added tabindex to remove focus when menu is
 closed

---
 .../venia-ui/lib/components/CategoryTree/categoryBranch.js | 6 ++++--
 .../venia-ui/lib/components/CategoryTree/categoryLeaf.js   | 4 +++-
 .../venia-ui/lib/components/CategoryTree/categoryTree.js   | 7 +++++--
 .../__tests__/__snapshots__/navigation.spec.js.snap        | 3 ---
 .../lib/components/Navigation/__tests__/navigation.spec.js | 5 +++++
 packages/venia-ui/lib/components/Navigation/navigation.js  | 5 ++++-
 6 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/packages/venia-ui/lib/components/CategoryTree/categoryBranch.js b/packages/venia-ui/lib/components/CategoryTree/categoryBranch.js
index d5ef965cd1..bc46df2b26 100644
--- a/packages/venia-ui/lib/components/CategoryTree/categoryBranch.js
+++ b/packages/venia-ui/lib/components/CategoryTree/categoryBranch.js
@@ -6,7 +6,7 @@ import { useStyle } from '../../classify';
 import defaultClasses from './categoryBranch.module.css';
 
 const Branch = props => {
-    const { category, setCategoryId } = props;
+    const { category, setCategoryId, tabindex } = props;
     const { name } = category;
     const classes = useStyle(defaultClasses, props.classes);
 
@@ -20,6 +20,7 @@ const Branch = props => {
     return (
         <li className={classes.root}>
             <button
+                tabindex={tabindex}
                 className={classes.target}
                 data-cy="CategoryTree-Branch-target"
                 type="button"
@@ -44,5 +45,6 @@ Branch.propTypes = {
         target: string,
         text: string
     }),
-    setCategoryId: func.isRequired
+    setCategoryId: func.isRequired,
+    tabindex: func.isRequired
 };
diff --git a/packages/venia-ui/lib/components/CategoryTree/categoryLeaf.js b/packages/venia-ui/lib/components/CategoryTree/categoryLeaf.js
index 25f8028f85..eceb1838d4 100644
--- a/packages/venia-ui/lib/components/CategoryTree/categoryLeaf.js
+++ b/packages/venia-ui/lib/components/CategoryTree/categoryLeaf.js
@@ -9,7 +9,7 @@ import { useStyle } from '../../classify';
 import defaultClasses from './categoryLeaf.module.css';
 
 const Leaf = props => {
-    const { category, onNavigate, categoryUrlSuffix } = props;
+    const { category, onNavigate, categoryUrlSuffix, tabindex } = props;
     const { name, url_path, children } = category;
     const classes = useStyle(defaultClasses, props.classes);
     const { handleClick } = useCategoryLeaf({ onNavigate });
@@ -35,6 +35,7 @@ const Leaf = props => {
                 data-cy="CategoryTree-Leaf-target"
                 to={destination}
                 onClick={handleClick}
+                tabIndex={tabindex}
             >
                 <span className={classes.text}>{leafLabel}</span>
             </Link>
@@ -55,5 +56,6 @@ Leaf.propTypes = {
         text: string
     }),
     onNavigate: func.isRequired,
+    tabindex: func.isRequired,
     categoryUrlSuffix: string
 };
diff --git a/packages/venia-ui/lib/components/CategoryTree/categoryTree.js b/packages/venia-ui/lib/components/CategoryTree/categoryTree.js
index a2eab5e132..a623704401 100644
--- a/packages/venia-ui/lib/components/CategoryTree/categoryTree.js
+++ b/packages/venia-ui/lib/components/CategoryTree/categoryTree.js
@@ -8,7 +8,7 @@ import Leaf from './categoryLeaf';
 import defaultClasses from './categoryTree.module.css';
 
 const Tree = props => {
-    const { categoryId, onNavigate, setCategoryId, updateCategories } = props;
+    const { categoryId, onNavigate, setCategoryId, updateCategories, tabindex } = props;
 
     const talonProps = useCategoryTree({
         categoryId,
@@ -29,12 +29,14 @@ const Tree = props => {
                       category={category}
                       onNavigate={onNavigate}
                       categoryUrlSuffix={categoryUrlSuffix}
+                      tabindex={tabindex}
                   />
               ) : (
                   <Branch
                       key={id}
                       category={category}
                       setCategoryId={setCategoryId}
+                      tabindex={tabindex}
                   />
               );
           })
@@ -57,5 +59,6 @@ Tree.propTypes = {
     }),
     onNavigate: func.isRequired,
     setCategoryId: func.isRequired,
-    updateCategories: func.isRequired
+    updateCategories: func.isRequired,
+    tabindex: func.isRequired
 };
diff --git a/packages/venia-ui/lib/components/Navigation/__tests__/__snapshots__/navigation.spec.js.snap b/packages/venia-ui/lib/components/Navigation/__tests__/__snapshots__/navigation.spec.js.snap
index e0b4029aeb..931c6d6cda 100644
--- a/packages/venia-ui/lib/components/Navigation/__tests__/__snapshots__/navigation.spec.js.snap
+++ b/packages/venia-ui/lib/components/Navigation/__tests__/__snapshots__/navigation.spec.js.snap
@@ -2,7 +2,6 @@
 
 exports[`authModal is rendered when hasModal is true 1`] = `
 <aside
-  aria-hidden="true"
   className="root"
 >
   <header
@@ -38,7 +37,6 @@ exports[`authModal is rendered when hasModal is true 1`] = `
 
 exports[`renders correctly when closed 1`] = `
 <aside
-  aria-hidden="true"
   className="root"
 >
   <header
@@ -70,7 +68,6 @@ exports[`renders correctly when closed 1`] = `
 
 exports[`renders correctly when open 1`] = `
 <aside
-  aria-hidden="true"
   className="root_open"
 >
   <header
diff --git a/packages/venia-ui/lib/components/Navigation/__tests__/navigation.spec.js b/packages/venia-ui/lib/components/Navigation/__tests__/navigation.spec.js
index 7a9cdb85cf..14c78c106f 100755
--- a/packages/venia-ui/lib/components/Navigation/__tests__/navigation.spec.js
+++ b/packages/venia-ui/lib/components/Navigation/__tests__/navigation.spec.js
@@ -27,6 +27,11 @@ jest.mock('react-aria', () => ({
     })
 }));
 
+jest.mock('../../Portal', () => ({
+    Portal: jest.fn(({ children }) => {
+        return children;
+    })
+}));
 /*
  * Tests.
  */
diff --git a/packages/venia-ui/lib/components/Navigation/navigation.js b/packages/venia-ui/lib/components/Navigation/navigation.js
index 9a6e10c7db..147c497000 100755
--- a/packages/venia-ui/lib/components/Navigation/navigation.js
+++ b/packages/venia-ui/lib/components/Navigation/navigation.js
@@ -36,6 +36,8 @@ const Navigation = props => {
     const rootClassName = isOpen ? classes.root_open : classes.root;
     const modalClassName = hasModal ? classes.modal_open : classes.modal;
     const bodyClassName = hasModal ? classes.body_masked : classes.body;
+    const tabindex = isOpen ? "1" : "-1";
+
     // Lazy load the auth modal because it may not be needed.
     const authModal = hasModal ? (
         <Suspense fallback={<LoadingIndicator />}>
@@ -56,7 +58,7 @@ const Navigation = props => {
             {/* eslint-disable-next-line jsx-a11y/no-autofocus */}
             <FocusScope contain restoreFocus autoFocus>
                 {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
-            <aside aria-hidden="true" className={rootClassName}>
+            <aside className={rootClassName}>
                 <header className={classes.header}>
                     <NavHeader
                         isTopLevel={isTopLevel}
@@ -70,6 +72,7 @@ const Navigation = props => {
                         onNavigate={handleClose}
                         setCategoryId={setCategoryId}
                         updateCategories={catalogActions.updateCategories}
+                        tabindex={tabindex}
                     />
                 </div>
                 <div className={classes.footer}>

From 905964af180827307b5f67c509b003ac86f19438 Mon Sep 17 00:00:00 2001
From: glo82145 <glo82145@adobe.com>
Date: Mon, 30 May 2022 18:58:50 +0530
Subject: [PATCH 07/11] AC-2480new::added tabindex for flyout menu

---
 packages/venia-ui/lib/components/Navigation/navigation.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/venia-ui/lib/components/Navigation/navigation.js b/packages/venia-ui/lib/components/Navigation/navigation.js
index 147c497000..44acd81b30 100755
--- a/packages/venia-ui/lib/components/Navigation/navigation.js
+++ b/packages/venia-ui/lib/components/Navigation/navigation.js
@@ -36,7 +36,7 @@ const Navigation = props => {
     const rootClassName = isOpen ? classes.root_open : classes.root;
     const modalClassName = hasModal ? classes.modal_open : classes.modal;
     const bodyClassName = hasModal ? classes.body_masked : classes.body;
-    const tabindex = isOpen ? "1" : "-1";
+    const tabindex = isOpen ? "0" : "-1";
 
     // Lazy load the auth modal because it may not be needed.
     const authModal = hasModal ? (

From 819039c355ff3a9f2ad665fc73190dff0094da50 Mon Sep 17 00:00:00 2001
From: glo82145 <glo82145@adobe.com>
Date: Thu, 2 Jun 2022 16:54:43 +0530
Subject: [PATCH 08/11] AC-2480::add prettier to two files

---
 .../components/CategoryTree/categoryTree.js   |  8 ++-
 .../lib/components/Navigation/navigation.js   | 62 +++++++++----------
 2 files changed, 38 insertions(+), 32 deletions(-)

diff --git a/packages/venia-ui/lib/components/CategoryTree/categoryTree.js b/packages/venia-ui/lib/components/CategoryTree/categoryTree.js
index a623704401..1182a099e2 100644
--- a/packages/venia-ui/lib/components/CategoryTree/categoryTree.js
+++ b/packages/venia-ui/lib/components/CategoryTree/categoryTree.js
@@ -8,7 +8,13 @@ import Leaf from './categoryLeaf';
 import defaultClasses from './categoryTree.module.css';
 
 const Tree = props => {
-    const { categoryId, onNavigate, setCategoryId, updateCategories, tabindex } = props;
+    const {
+        categoryId,
+        onNavigate,
+        setCategoryId,
+        updateCategories,
+        tabindex
+    } = props;
 
     const talonProps = useCategoryTree({
         categoryId,
diff --git a/packages/venia-ui/lib/components/Navigation/navigation.js b/packages/venia-ui/lib/components/Navigation/navigation.js
index 44acd81b30..d7d691e954 100755
--- a/packages/venia-ui/lib/components/Navigation/navigation.js
+++ b/packages/venia-ui/lib/components/Navigation/navigation.js
@@ -36,7 +36,7 @@ const Navigation = props => {
     const rootClassName = isOpen ? classes.root_open : classes.root;
     const modalClassName = hasModal ? classes.modal_open : classes.modal;
     const bodyClassName = hasModal ? classes.body_masked : classes.body;
-    const tabindex = isOpen ? "0" : "-1";
+    const tabindex = isOpen ? '0' : '-1';
 
     // Lazy load the auth modal because it may not be needed.
     const authModal = hasModal ? (
@@ -58,37 +58,37 @@ const Navigation = props => {
             {/* eslint-disable-next-line jsx-a11y/no-autofocus */}
             <FocusScope contain restoreFocus autoFocus>
                 {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
-            <aside className={rootClassName}>
-                <header className={classes.header}>
-                    <NavHeader
-                        isTopLevel={isTopLevel}
-                        onBack={handleBack}
-                        view={view}
-                    />
-                </header>
-                <div className={bodyClassName}>
-                    <CategoryTree
-                        categoryId={categoryId}
-                        onNavigate={handleClose}
-                        setCategoryId={setCategoryId}
-                        updateCategories={catalogActions.updateCategories}
-                        tabindex={tabindex}
-                    />
-                </div>
-                <div className={classes.footer}>
-                    <div className={classes.switchers}>
-                        <StoreSwitcher />
-                        <CurrencySwitcher />
+                <aside className={rootClassName}>
+                    <header className={classes.header}>
+                        <NavHeader
+                            isTopLevel={isTopLevel}
+                            onBack={handleBack}
+                            view={view}
+                        />
+                    </header>
+                    <div className={bodyClassName}>
+                        <CategoryTree
+                            categoryId={categoryId}
+                            onNavigate={handleClose}
+                            setCategoryId={setCategoryId}
+                            updateCategories={catalogActions.updateCategories}
+                            tabindex={tabindex}
+                        />
                     </div>
-                    <AuthBar
-                        disabled={hasModal}
-                        showMyAccount={showMyAccount}
-                        showSignIn={showSignIn}
-                    />
-                </div>
-                <div className={modalClassName}>{authModal}</div>
-            </aside>
-        </FocusScope>
+                    <div className={classes.footer}>
+                        <div className={classes.switchers}>
+                            <StoreSwitcher />
+                            <CurrencySwitcher />
+                        </div>
+                        <AuthBar
+                            disabled={hasModal}
+                            showMyAccount={showMyAccount}
+                            showSignIn={showSignIn}
+                        />
+                    </div>
+                    <div className={modalClassName}>{authModal}</div>
+                </aside>
+            </FocusScope>
         </Portal>
     );
 };

From a248ac31340e150f01a64caaa981945e7be71d38 Mon Sep 17 00:00:00 2001
From: glo82145 <glo82145@adobe.com>
Date: Mon, 25 Jul 2022 15:28:59 +0530
Subject: [PATCH 09/11] AC-2480::Fixing the issue failing cypress test

---
 packages/venia-ui/lib/components/Navigation/navigation.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/venia-ui/lib/components/Navigation/navigation.js b/packages/venia-ui/lib/components/Navigation/navigation.js
index d7d691e954..24ad04f1df 100755
--- a/packages/venia-ui/lib/components/Navigation/navigation.js
+++ b/packages/venia-ui/lib/components/Navigation/navigation.js
@@ -56,7 +56,7 @@ const Navigation = props => {
     return (
         <Portal>
             {/* eslint-disable-next-line jsx-a11y/no-autofocus */}
-            <FocusScope contain restoreFocus autoFocus>
+            <FocusScope contain={isOpen} restoreFocus autoFocus>
                 {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
                 <aside className={rootClassName}>
                     <header className={classes.header}>

From 317d1e010f49619d7d5501e3f7ad7ab9fe0899be Mon Sep 17 00:00:00 2001
From: glo82145 <glo82145@adobe.com>
Date: Mon, 25 Jul 2022 15:31:08 +0530
Subject: [PATCH 10/11] AC-2480::Fixing the issue failing cypress test

---
 packages/venia-ui/lib/components/Navigation/navigation.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/venia-ui/lib/components/Navigation/navigation.js b/packages/venia-ui/lib/components/Navigation/navigation.js
index 24ad04f1df..bf5b753b2a 100755
--- a/packages/venia-ui/lib/components/Navigation/navigation.js
+++ b/packages/venia-ui/lib/components/Navigation/navigation.js
@@ -63,8 +63,7 @@ const Navigation = props => {
                         <NavHeader
                             isTopLevel={isTopLevel}
                             onBack={handleBack}
-                            view={view}
-                        />
+                            view={view} />
                     </header>
                     <div className={bodyClassName}>
                         <CategoryTree

From d95a37fca030bb76020ebe1ad3ec83d3f221f2c5 Mon Sep 17 00:00:00 2001
From: glo82145 <glo82145@adobe.com>
Date: Mon, 25 Jul 2022 15:32:27 +0530
Subject: [PATCH 11/11] AC-2480::Fixing the issue failing cypress test

---
 packages/venia-ui/lib/components/Navigation/navigation.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/venia-ui/lib/components/Navigation/navigation.js b/packages/venia-ui/lib/components/Navigation/navigation.js
index bf5b753b2a..24ad04f1df 100755
--- a/packages/venia-ui/lib/components/Navigation/navigation.js
+++ b/packages/venia-ui/lib/components/Navigation/navigation.js
@@ -63,7 +63,8 @@ const Navigation = props => {
                         <NavHeader
                             isTopLevel={isTopLevel}
                             onBack={handleBack}
-                            view={view} />
+                            view={view}
+                        />
                     </header>
                     <div className={bodyClassName}>
                         <CategoryTree