fix(sbb-navigation): fix automatic focus setting inside navigation (#…

…2141)
sbb-design-systems · Nov 6, 2023 · 0039ce9 · 0039ce9
1 parent f7c41d0
commit 0039ce9
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 25 deletions.
diff --git a/src/components/sbb-navigation-section/sbb-navigation-section.stories.tsx b/src/components/sbb-navigation-section/sbb-navigation-section.stories.tsx
@@ -17,7 +17,7 @@ const playStory = async (trigger, canvasElement): Promise<void> => {
   );
 
   const button = canvas.getByTestId('navigation-trigger');
-  userEvent.click(button);
+  await userEvent.click(button);
   await waitFor(() =>
     expect(canvas.getByTestId('navigation').getAttribute('data-state') === 'opened').toBeTruthy(),
   );
@@ -27,7 +27,7 @@ const playStory = async (trigger, canvasElement): Promise<void> => {
     ).toBeTruthy(),
   );
   const action = canvas.getByTestId(trigger);
-  userEvent.click(action);
+  await userEvent.click(action);
 };
 
 const accessibilityLabel: InputType = {

diff --git a/src/components/sbb-navigation-section/sbb-navigation-section.tsx b/src/components/sbb-navigation-section/sbb-navigation-section.tsx
@@ -193,11 +193,12 @@ export class SbbNavigationSection implements ComponentInterface {
     } else if (event.animationName === 'close' && this._state === 'closing') {
       this._state = 'closed';
       this._navigationSectionContainerElement.scrollTo(0, 0);
-      // Manually focus last focused element in order to avoid showing outline in Safari
-      this._triggerElement?.focus();
       this._windowEventsController?.abort();
       this._setNavigationInert();
-      this._isZeroToLargeBreakpoint() && this._triggerElement?.focus();
+      if (this._isZeroToLargeBreakpoint() && this._triggerElement) {
+        setModalityOnNextFocus(this._triggerElement);
+        this._triggerElement.focus();
+      }
     }
   }
 

diff --git a/src/components/sbb-navigation/sbb-navigation.stories.tsx b/src/components/sbb-navigation/sbb-navigation.stories.tsx
@@ -19,7 +19,7 @@ const playStory = async ({ canvasElement }): Promise<void> => {
   );
 
   const button = canvas.getByTestId('navigation-trigger');
-  userEvent.click(button);
+  await userEvent.click(button);
 
   await waitFor(() =>
     expect(canvas.getByTestId('navigation').getAttribute('data-state') === 'opened').toBeTruthy(),
@@ -36,9 +36,13 @@ const playStoryWithSection = async ({ canvasElement }): Promise<void> => {
     ).toBeTruthy(),
   );
   const actionL = canvas.getByTestId('navigation-section-trigger-1');
-  userEvent.click(actionL);
-  const actionS = canvas.getByTestId('navigation-section-trigger-2');
-  userEvent.click(actionS);
+  await userEvent.click(actionL);
+
+  await waitFor(() =>
+    expect(
+      canvas.getByTestId('navigation-section').getAttribute('data-state') === 'opened',
+    ).toBeTruthy(),
+  );
 };
 
 const ariaLabel: InputType = {
@@ -103,7 +107,7 @@ const navigationActionsL = (): JSX.Element[] => [
 const navigationActionsS = (): JSX.Element[] => [
   <sbb-navigation-action id="nav-5">Deutsch</sbb-navigation-action>,
   <sbb-navigation-action id="nav-6">Français</sbb-navigation-action>,
-  <sbb-navigation-action id="nav-7" data-testid="navigation-section-trigger-2">
+  <sbb-navigation-action id="nav-7" active>
     Italiano
   </sbb-navigation-action>,
   <sbb-navigation-action id="nav-8">English</sbb-navigation-action>,
@@ -120,9 +124,7 @@ const navigationList = (label): JSX.Element[] => [
 ];
 
 const actionLabels = (num): JSX.Element[] => {
-  const labels = [
-    <sbb-navigation-action data-testid="navigation-section-trigger-2">Label</sbb-navigation-action>,
-  ];
+  const labels = [<sbb-navigation-action>Label</sbb-navigation-action>];
   for (let i = 1; i <= num; i++) {
     labels.push(<sbb-navigation-action>Label</sbb-navigation-action>);
   }

diff --git a/src/components/sbb-navigation/sbb-navigation.tsx b/src/components/sbb-navigation/sbb-navigation.tsx
@@ -13,13 +13,8 @@ import {
   State,
   Watch,
 } from '@stencil/core';
-import { FocusTrap, IS_FOCUSABLE_QUERY, assignId, setModalityOnNextFocus } from '../../global/a11y';
-import {
-  ScrollHandler,
-  isValidAttribute,
-  isBreakpoint,
-  findReferencedElement,
-} from '../../global/dom';
+import { FocusTrap, assignId, setModalityOnNextFocus } from '../../global/a11y';
+import { ScrollHandler, isValidAttribute, findReferencedElement } from '../../global/dom';
 import {
   documentLanguage,
   HandlerRepository,
@@ -304,11 +299,6 @@ export class SbbNavigation implements ComponentInterface {
         this._activeNavigationSection = this._element.querySelector(
           'sbb-navigation-section[data-state="opening"], sbb-navigation-section[data-state="opened"]',
         );
-        if (!isBreakpoint('zero', 'large')) {
-          (
-            this._activeNavigationSection?.querySelector(IS_FOCUSABLE_QUERY) as HTMLElement
-          )?.focus();
-        }
       }
     }
   }