feat: focusNavigation API

cloudscape-design · Jan 24, 2025 · 0cf8021 · 0cf8021
1 parent 63e9618
commit 0cf8021
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 8 deletions.
diff --git a/pages/page-layout/default.page.tsx b/pages/page-layout/default.page.tsx
@@ -24,7 +24,7 @@ export default function WithDrawers() {
   const { urlParams, setUrlParams } = useContext(AppContext as DemoContext);
   const [isToolsOpen, setIsToolsOpen] = useState(false);
   const [isNavigationOpen, setIsNavigationOpen] = useState(true);
-  const appLayoutRef = useRef<PageLayoutProps.Ref>(null);
+  const pageLayoutRef = useRef<PageLayoutProps.Ref>(null);
 
   const drawersProps: Pick<PageLayoutProps, 'activeDrawerId' | 'onDrawerChange' | 'drawers'> | null = {
     activeDrawerId: activeDrawerId,
@@ -49,7 +49,7 @@ export default function WithDrawers() {
     <PageLayout
       ariaLabels={{ ...appLayoutLabels, ...drawerLabels }}
       breadcrumbs={<Breadcrumbs />}
-      ref={appLayoutRef}
+      ref={pageLayoutRef}
       content={
         <ContentLayout
           disableOverlap={true}
@@ -65,7 +65,7 @@ export default function WithDrawers() {
                     onFollow={() => {
                       setHelpPathSlug('header');
                       setIsToolsOpen(true);
-                      appLayoutRef.current?.focusToolsClose();
+                      pageLayoutRef.current?.focusToolsClose();
                     }}
                   >
                     Info
@@ -76,12 +76,19 @@ export default function WithDrawers() {
               </Header>
 
               <SpaceBetween size="xs">
-                <Button onClick={() => setIsNavigationOpen(current => !current)}>Toggle navigation</Button>
+                <Button
+                  onClick={() => {
+                    setIsNavigationOpen(current => !current);
+                    pageLayoutRef.current?.focusNavigation();
+                  }}
+                >
+                  Toggle navigation
+                </Button>
 
                 <Button
                   onClick={() => {
                     setActiveDrawerId('pro-help');
-                    appLayoutRef.current?.focusActiveDrawer();
+                    pageLayoutRef.current?.focusActiveDrawer();
                   }}
                 >
                   Open a drawer without trigger

diff --git a/src/app-layout/visual-refresh-toolbar/index.tsx b/src/app-layout/visual-refresh-toolbar/index.tsx
@@ -220,7 +220,7 @@ const AppLayoutVisualRefreshToolbar = React.forwardRef<AppLayoutProps.Ref, AppLa
 
     const globalDrawersFocusControl = useMultipleFocusControl(true, activeGlobalDrawersIds);
     const drawersFocusControl = useFocusControl(!!activeDrawer?.id, true, activeDrawer?.id);
-    const navigationFocusControl = useFocusControl(navigationOpen);
+    const navigationFocusControl = useFocusControl(navigationOpen, navigationTriggerHide);
     const splitPanelFocusControl = useSplitPanelFocusControl([splitPanelPreferences, splitPanelOpen]);
 
     const onNavigationToggle = useStableCallback((open: boolean) => {
@@ -235,6 +235,7 @@ const AppLayoutVisualRefreshToolbar = React.forwardRef<AppLayoutProps.Ref, AppLa
       focusToolsClose: () => drawersFocusControl.setFocus(true),
       focusActiveDrawer: () => drawersFocusControl.setFocus(true),
       focusSplitPanel: () => splitPanelFocusControl.refs.slider.current?.focus(),
+      focusNavigation: () => navigationFocusControl.setFocus(true),
     }));
 
     const resolvedStickyNotifications = !!stickyNotifications && !isMobile;

diff --git a/src/page-layout/__tests__/page-layout.test.tsx b/src/page-layout/__tests__/page-layout.test.tsx
@@ -17,17 +17,25 @@ describe('PageLayout', () => {
   test('triggerless navigation', () => {
     const PageLayoutWrapper = () => {
       const [isNavigationOpen, setIsNavigationOpen] = useState(false);
+      const pageLayoutRef = useRef<PageLayoutProps.Ref>(null);
 
       return (
         <PageLayout
+          ref={pageLayoutRef}
           navigationTriggerHide={true}
           navigationOpen={isNavigationOpen}
           onNavigationChange={event => setIsNavigationOpen(event.detail.open)}
           navigation={<>Mock Navigation</>}
           content={
             <div>
               Content
-              <button data-testid="toggle-navigation" onClick={() => setIsNavigationOpen(current => !current)}>
+              <button
+                data-testid="toggle-navigation"
+                onClick={() => {
+                  setIsNavigationOpen(current => !current);
+                  pageLayoutRef.current?.focusNavigation();
+                }}
+              >
                 Toggle navigation
               </button>
             </div>
@@ -43,6 +51,7 @@ describe('PageLayout', () => {
     wrapper.find(`[data-testid="toggle-navigation"]`)!.click();
 
     expect(wrapper.findOpenNavigationPanel()).toBeTruthy();
+    expect(wrapper.findNavigationClose()!.getElement()).toHaveFocus();
   });
 
   test('triggerless drawers', () => {

diff --git a/src/page-layout/interfaces.ts b/src/page-layout/interfaces.ts
@@ -39,7 +39,12 @@ export interface PageLayoutProps extends Omit<AppLayoutProps, 'disableBodyScroll
 export namespace PageLayoutProps {
   export type AnalyticsMetadata = AppLayoutProps.AnalyticsMetadata;
   export type ContentType = AppLayoutProps.ContentType;
-  export type Ref = AppLayoutProps.Ref;
+  export interface Ref extends AppLayoutProps.Ref {
+    /**
+     * Focuses the navigation. Use this to focus the navigation after opening it programmatically.
+     */
+    focusNavigation(): void;
+  }
   export type Drawer = AppLayoutProps.Drawer;
   export type DrawerAriaLabels = AppLayoutProps.DrawerAriaLabels;
   export type Labels = AppLayoutProps.Labels;