AC-2480::Flyout panels do not trap focus while open

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
 };

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
 };

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 } = props;
+    const {
+        categoryId,
+        onNavigate,
+        setCategoryId,
+        updateCategories,
+        tabindex
+    } = props;
 
     const talonProps = useCategoryTree({
         categoryId,
@@ -29,12 +35,14 @@ const Tree = props => {
                       category={category}
                       onNavigate={onNavigate}
                       categoryUrlSuffix={categoryUrlSuffix}
+                      tabindex={tabindex}
                   />
               ) : (
                   <Branch
                       key={id}
                       category={category}
                       setCategoryId={setCategoryId}
+                      tabindex={tabindex}
                   />
               );
           })
@@ -57,5 +65,6 @@ Tree.propTypes = {
     }),
     onNavigate: func.isRequired,
     setCategoryId: func.isRequired,
-    updateCategories: func.isRequired
+    updateCategories: func.isRequired,
+    tabindex: func.isRequired
 };

packages/venia-ui/lib/components/Navigation/__tests__/navigation.spec.js

@@ -21,6 +21,17 @@ jest.mock('../../Header/currencySwitcher', () => () => 'CurrencySwitcher');
 
 jest.mock('@magento/peregrine/lib/talons/Navigation/useNavigation');
 
+jest.mock('react-aria', () => ({
+    FocusScope: jest.fn(({ children }) => {
+        return children;
+    })
+}));
+
+jest.mock('../../Portal', () => ({
+    Portal: jest.fn(({ children }) => {
+        return children;
+    })
+}));
 /*
  * Tests.
  */

packages/venia-ui/lib/components/Navigation/navigation.js

@@ -10,7 +10,8 @@ import StoreSwitcher from '../Header/storeSwitcher';
 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 => {
@@ -35,6 +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';
 
     // Lazy load the auth modal because it may not be needed.
     const authModal = hasModal ? (
@@ -52,35 +54,42 @@ 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 />
-                </div>
-                <AuthBar
-                    disabled={hasModal}
-                    showMyAccount={showMyAccount}
-                    showSignIn={showSignIn}
-                />
-            </div>
-            <div className={modalClassName}>{authModal}</div>
-        </aside>
+        <Portal>
+            {/* eslint-disable-next-line jsx-a11y/no-autofocus */}
+            <FocusScope contain={isOpen} 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 />
+                        </div>
+                        <AuthBar
+                            disabled={hasModal}
+                            showMyAccount={showMyAccount}
+                            showSignIn={showSignIn}
+                        />
+                    </div>
+                    <div className={modalClassName}>{authModal}</div>
+                </aside>
+            </FocusScope>
+        </Portal>
     );
 };