diff --git a/src/components/sbb-navigation-section/sbb-navigation-section.stories.tsx b/src/components/sbb-navigation-section/sbb-navigation-section.stories.tsx index c34157f7ca..94e0784681 100644 --- 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 => { ); 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 => { ).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 index 2c627a3e8f..9b7771ff08 100644 --- 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 index 956a5212d8..082ba6d7c3 100644 --- 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 => { ); 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 => { ).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[] => [ Deutsch, Français, - + Italiano , English, @@ -120,9 +124,7 @@ const navigationList = (label): JSX.Element[] => [ ]; const actionLabels = (num): JSX.Element[] => { - const labels = [ - Label, - ]; + const labels = [Label]; for (let i = 1; i <= num; i++) { labels.push(Label); } diff --git a/src/components/sbb-navigation/sbb-navigation.tsx b/src/components/sbb-navigation/sbb-navigation.tsx index 7baecc8678..157b6dda3e 100644 --- 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(); - } } } }