Skip to content

Commit

Permalink
fix: overlays focus and inert (#2097)
Browse files Browse the repository at this point in the history
  • Loading branch information
dauriamarco authored Oct 20, 2023
1 parent 1fbf9ef commit f8706c1
Show file tree
Hide file tree
Showing 4 changed files with 18 additions and 6 deletions.
10 changes: 7 additions & 3 deletions src/components/sbb-dialog/sbb-dialog.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -208,7 +208,6 @@ export class SbbDialog implements ComponentInterface {
this._setOverflowAttribute();
// Disable scrolling for content below the dialog
this._scrollHandler.disableScroll();
applyInertMechanism(this._element);
}

/**
Expand Down Expand Up @@ -240,7 +239,7 @@ export class SbbDialog implements ComponentInterface {

public connectedCallback(): void {
this._handlerRepository.connect();
this._state = 'closed';
this._state = this._state || 'closed';
this._dialogController = new AbortController();

// Close dialog on backdrop click
Expand All @@ -254,6 +253,10 @@ export class SbbDialog implements ComponentInterface {
// TODO: Remove if possible, related to https://bugs.chromium.org/p/chromium/issues/detail?id=1493323
// For Safari we need to keep the solution which doesn't work in Chrome as it seems mutual exclusive.
toggleDatasetEntry(this._element, 'isSafari', isSafari());

if (this._state === 'opened') {
applyInertMechanism(this._element);
}
}

public disconnectedCallback(): void {
Expand Down Expand Up @@ -329,6 +332,7 @@ export class SbbDialog implements ComponentInterface {
) {
this._state = 'opened';
this.didOpen.emit();
applyInertMechanism(this._element);
this._setDialogFocus();
this._focusTrap.trap(this._element);
this._dialogContentResizeObserver.observe(this._dialogContentElement);
Expand All @@ -340,8 +344,8 @@ export class SbbDialog implements ComponentInterface {
this._state = 'closed';
this._dialogWrapperElement.querySelector('.sbb-dialog__content').scrollTo(0, 0);
setModalityOnNextFocus(this._lastFocusedElement);
this._dialog.close();
removeInertMechanism();
this._dialog.close();
// Manually focus last focused element in order to avoid showing outline in Safari
this._lastFocusedElement?.focus();
this.didClose.emit({ returnValue: this._returnValue, closeTarget: this._dialogCloseElement });
Expand Down
6 changes: 5 additions & 1 deletion src/components/sbb-menu/sbb-menu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -228,6 +228,10 @@ export class SbbMenu implements ComponentInterface {
// TODO: Remove if possible, related to https://bugs.chromium.org/p/chromium/issues/detail?id=1493323
// For Safari we need to keep the solution which doesn't work in Chrome as it seems mutual exclusive.
toggleDatasetEntry(this._element, 'isSafari', isSafari());

if (this._state === 'opened') {
applyInertMechanism(this._element);
}
}

public disconnectedCallback(): void {
Expand Down Expand Up @@ -322,14 +326,14 @@ export class SbbMenu implements ComponentInterface {
this._state = 'closed';
this._dialog.firstElementChild.scrollTo(0, 0);
setModalityOnNextFocus(this._triggerElement);
removeInertMechanism();
this._dialog.close();
// Manually focus last focused element in order to avoid showing outline in Safari
this._triggerElement?.focus({
// When inside the sbb-header, we prevent the scroll to avoid the snapping to the top of the page
preventScroll: this._triggerElement.tagName === 'SBB-HEADER-ACTION',
});
this.didClose.emit();
removeInertMechanism();
this._windowEventsController?.abort();
this._focusTrap.disconnect();

Expand Down
6 changes: 5 additions & 1 deletion src/components/sbb-navigation/sbb-navigation.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -241,11 +241,11 @@ export class SbbNavigation implements ComponentInterface {
this._state = 'closed';
this._navigationContentElement.scrollTo(0, 0);
setModalityOnNextFocus(this._triggerElement);
removeInertMechanism();
this._navigation.close();
// To enable focusing other element than the trigger, we need to call focus() a second time.
this._triggerElement?.focus();
this.didClose.emit();
removeInertMechanism();
this._windowEventsController?.abort();
this._focusTrap.disconnect();

Expand Down Expand Up @@ -351,6 +351,10 @@ export class SbbNavigation implements ComponentInterface {
// TODO: Remove if possible, related to https://bugs.chromium.org/p/chromium/issues/detail?id=1493323
// For Safari we need to keep the solution which doesn't work in Chrome as it seems mutual exclusive.
toggleDatasetEntry(this._element, 'isSafari', isSafari());

if (this._state === 'opened') {
applyInertMechanism(this._element);
}
}

public disconnectedCallback(): void {
Expand Down
2 changes: 1 addition & 1 deletion src/global/overlay/overlay.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { h, JSX } from '@stencil/core';
import { toggleDatasetEntry } from '../dom';

export type SbbOverlayState = 'closed' | 'opening' | 'opened' | 'closing';
const IS_OPEN_OVERLAY_QUERY = `:is(sbb-dialog, sbb-navigation, sbb-menu, sbb-tooltip)[data-state='opened']`;
const IS_OPEN_OVERLAY_QUERY = `:is(sbb-dialog, sbb-navigation, sbb-menu)[data-state='opened']`;

/**
* Used to create the "wrapping" effect around the anchor for overlays (es. autocomplete)
Expand Down

0 comments on commit f8706c1

Please sign in to comment.