fix: Focus resize handler when split panel is opened (#495)

cloudscape-design · Nov 18, 2022 · 44b9b43 · 44b9b43
1 parent 3e13d44
commit 44b9b43
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 14 deletions.
diff --git a/src/app-layout/__integ__/app-layout-focus-delegation.test.ts b/src/app-layout/__integ__/app-layout-focus-delegation.test.ts
@@ -26,13 +26,13 @@ function setupTest(
 [false, true].forEach(visualRefresh =>
   describe(`visualRefresh=${visualRefresh}`, () => {
     test(
-      'split panel focus toggles between open and close buttons',
+      'split panel focus moves to slider on open and open button on close',
       setupTest(
         async page => {
           await page.click(wrapper.findSplitPanel().findOpenButton().toSelector());
           await page.keys('Enter');
-          await expect(page.isFocused(wrapper.findSplitPanel().findOpenButton().toSelector())).resolves.toBe(true);
-          await page.keys('Enter');
+          await expect(page.isFocused(wrapper.findSplitPanel().findSlider().toSelector())).resolves.toBe(true);
+          await page.keys(['Tab', 'Tab']);
           await expect(page.isFocused(wrapper.findSplitPanel().findCloseButton().toSelector())).resolves.toBe(true);
           await page.keys('Enter');
           await expect(page.isFocused(wrapper.findSplitPanel().findOpenButton().toSelector())).resolves.toBe(true);
@@ -79,8 +79,7 @@ function setupTest(
         async page => {
           await page.setWindowSize({ width: 1000, height: 800 });
           await page.click(wrapper.findSplitPanel().findOpenButton().toSelector());
-          await page.keys('Tab');
-          await page.keys('Enter');
+          await page.keys(['Tab', 'Tab', 'Tab', 'Enter']);
           await expect(page.isFocused(wrapper.findToolsClose().toSelector())).resolves.toBe(true);
         },
         { pageName: 'with-split-panel', visualRefresh, splitPanelPosition: 'side' }

diff --git a/src/app-layout/__integ__/app-layout-split-panel.test.ts b/src/app-layout/__integ__/app-layout-split-panel.test.ts
@@ -98,7 +98,6 @@ test(
   'slider is accessible by keyboard in bottom position',
   setupTest(async page => {
     await page.openPanel();
-    await page.keys(['Shift', 'Tab', 'Shift', 'Shift', 'Tab', 'Shift']);
     await expect(page.isFocused(wrapper.findSplitPanel().findSlider().toSelector())).resolves.toBe(true);
 
     const { height } = await page.getSplitPanelSize();

diff --git a/src/app-layout/__tests__/split-panel.test.tsx b/src/app-layout/__tests__/split-panel.test.tsx
@@ -110,8 +110,20 @@ for (const theme of ['refresh', 'classic']) {
       })
     );
 
-    (['bottom', 'side'] as const).forEach(position =>
-      test(`Moves focus between open and close buttons in ${position} position`, () => {
+    (['bottom', 'side'] as const).forEach(position => {
+      test(`Moves focus to slider when opened in ${position} position`, () => {
+        const { wrapper } = renderComponent(
+          <AppLayout
+            splitPanel={defaultSplitPanel}
+            splitPanelPreferences={{ position }}
+            onSplitPanelPreferencesChange={noop}
+          />
+        );
+        act(() => wrapper.findSplitPanel()!.findOpenButton()!.click());
+        expect(wrapper.findSplitPanel()!.findSlider()!.getElement()).toHaveFocus();
+      });
+
+      test(`Moves focus to open button when closed in ${position} position`, () => {
         const { wrapper } = renderComponent(
           <AppLayout
             splitPanel={defaultSplitPanel}
@@ -120,13 +132,10 @@ for (const theme of ['refresh', 'classic']) {
           />
         );
         act(() => wrapper.findSplitPanel()!.findOpenButton()!.click());
-        expect(wrapper.findSplitPanel()!.findCloseButton()!.getElement()).toHaveFocus();
         act(() => wrapper.findSplitPanel()!.findCloseButton()!.click());
         expect(wrapper.findSplitPanel()!.findOpenButton()!.getElement()).toHaveFocus();
-        act(() => wrapper.findSplitPanel()!.findOpenButton()!.click());
-        expect(wrapper.findSplitPanel()!.findCloseButton()!.getElement()).toHaveFocus();
-      })
-    );
+      });
+    });
   });
 }
 

diff --git a/src/split-panel/index.tsx b/src/split-panel/index.tsx
@@ -328,7 +328,7 @@ export default function SplitPanel({
   useEffectOnUpdate(() => {
     switch (lastInteraction?.type) {
       case 'open':
-        return closeRef.current?.focus();
+        return handleRef.current?.focus();
       case 'close':
         return toggleRef.current?.focus();
       case 'position':