@lion/ui 0.15.5 → 0.16.0-alpha.0

package/components/overlays/src/OverlayController.js

@@ -1,8 +1,8 @@
 import { overlays } from './singleton.js';
-import { containFocus } from './utils/contain-focus.js';
 import { deepContains } from './utils/deep-contains.js';
 import { overlayShadowDomStyle } from './overlayShadowDomStyle.js';
 import { _adoptStyleUtils } from './utils/adopt-styles.js';
+import { getFocusableElements } from './utils/get-focusable-elements.js';
 
 /**
  * @typedef {'setup'|'init'|'teardown'|'before-show'|'show'|'hide'|'add'|'remove'} OverlayPhase
@@ -113,6 +113,11 @@ const childDialogsClosedInEventLoopWeakmap = new WeakMap();
  *
  */
 export class OverlayController extends EventTarget {
+  /**
+   * 'True' when Shift key is pressed, 'false' otherwise
+   */
+  #isShiftPressed = false;
+
   /**
    * @constructor
    * @param {OverlayConfig} config initial config. Will be remembered as shared config
@@ -201,8 +206,6 @@ export class OverlayController extends EventTarget {
     this.__escKeyHandler = this.__escKeyHandler.bind(this);
     this.updateConfig(config);
     /** @private */
-    this.__hasActiveTrapsKeyboardFocus = false;
-    /** @private */
     this.__hasActiveBackdrop = true;
     /** @private */
     this.__cancelHandler = this.__cancelHandler.bind(this);
@@ -591,9 +594,7 @@ export class OverlayController extends EventTarget {
    * @private
    */
   __initContentDomStructure() {
-    const wrappingDialogElement = document.createElement(
-      this.config?._noDialogEl ? 'div' : 'dialog',
-    );
+    const wrappingDialogElement = document.createElement('dialog');
     // We use a dialog for its visual capabilities: it renders to the top layer.
     // A11y will depend on the type of overlay and is arranged on contentNode level.
     // Also see: https://www.scottohara.me/blog/2019/03/05/open-dialog.html
@@ -625,7 +626,6 @@ export class OverlayController extends EventTarget {
       contentWrapperNodeL2: this.contentWrapperNode,
       contentNodeL3: this.contentNode,
     });
-    // @ts-expect-error
     wrappingDialogElement.open = true;
 
     if (this.isTooltip) {
@@ -1145,65 +1145,97 @@ export class OverlayController extends EventTarget {
     }
   }
 
-  get hasActiveTrapsKeyboardFocus() {
-    return this.__hasActiveTrapsKeyboardFocus;
-  }
-
   /**
-   * @param {{ phase: OverlayPhase }} config
-   * @protected
+   * @param {KeyboardEvent} event
    */
-  _handleTrapsKeyboardFocus({ phase }) {
-    if (phase === 'show') {
-      // @ts-ignore
-      if ('showModal' in this.__wrappingDialogNode) {
-        // @ts-ignore
-        this.__wrappingDialogNode.close();
-        // @ts-ignore
-        this.__wrappingDialogNode.showModal();
-      }
-      // else {
-      this.enableTrapsKeyboardFocus();
-      // }
-    } else if (phase === 'hide' || phase === 'teardown') {
-      this.disableTrapsKeyboardFocus();
+  #isShiftPressedOnKeyDownHandler = event => {
+    if (event.key === 'Shift') {
+      this.#isShiftPressed = true;
     }
-  }
+  };
 
-  enableTrapsKeyboardFocus() {
-    if (this.__hasActiveTrapsKeyboardFocus) {
-      return;
-    }
-    if (this.manager) {
-      this.manager.disableTrapsKeyboardFocusForAll();
+  /**
+   * @param {KeyboardEvent} event
+   */
+  #isShiftPressedOnKeyUpHandler = event => {
+    if (event.key === 'Shift') {
+      this.#isShiftPressed = false;
     }
+  };
 
-    const isContentShadowHost = Boolean(this.contentNode.shadowRoot);
-    if (isContentShadowHost) {
-      // eslint-disable-next-line no-console
-      console.warn(
-        '[overlays]: For best accessibility (compatibility with Safari + VoiceOver), provide a contentNode that is not a host for a shadow root',
-      );
-    }
+  #handleShiftKeyPress = () => {
+    window.addEventListener('keydown', this.#isShiftPressedOnKeyDownHandler);
+    window.addEventListener('keyup', this.#isShiftPressedOnKeyUpHandler);
+  };
 
-    this._containFocusHandler = containFocus(this.contentNode);
-    this.__hasActiveTrapsKeyboardFocus = true;
-    if (this.manager) {
-      this.manager.informTrapsKeyboardFocusGotEnabled(this.placementMode);
-    }
-  }
+  #stopHandlingShiftKeyPress = () => {
+    window.removeEventListener('keydown', this.#isShiftPressedOnKeyDownHandler);
+    window.removeEventListener('keyup', this.#isShiftPressedOnKeyUpHandler);
+  };
 
-  disableTrapsKeyboardFocus({ findNewTrap = true } = {}) {
-    if (!this.__hasActiveTrapsKeyboardFocus) {
-      return;
+  #getInitialElementToFocus = () => {
+    const focusableElements = getFocusableElements(this.contentNode);
+    // Initial focus goes to first element with autofocus, or `contentNode`
+    return focusableElements.find(e => e.hasAttribute('autofocus')) || this.contentNode;
+  };
+
+  /**
+   * When a `dialog` element gets focused, we focus programmatically something
+   * else inside dialog for better a11y. A dialog element gets focused natively in these cases:
+   * 1) When called by `showModal()` first time
+   * 2) When focus is rotating. That is when a user navigates using Tab key through
+   * all the dialog's focusable elements, then the focus goes to the browser's URL,
+   * all its tabs and then the focus goes back to the dialog element
+   * 3) Same as in the point #2, but when a user navigates backward by hitting `Shift + Tab`.
+   * In this case we do not intercept and let the focus pass through. Otherwise the focus
+   * will never leaves the dialog
+   *
+   * Note, Chrome does not focus `Dialog` element when Tabbing. When dialog is opened first time,
+   * it focuses the contentNode if that has `tabindex` set. But the second time when we
+   * move to the dialog from URL bar, nor the dialog element, nor the `contentNode` are focused.
+   * Instead the first focusable element is focused right away
+   */
+  #handleFocusInsideDialog = () => {
+    this.__wrappingDialogNode?.addEventListener('focus', () => {
+      if (!this.#isShiftPressed) {
+        this.#getInitialElementToFocus().focus();
+      }
+    });
+  };
+
+  /**
+   * @param {{ phase: OverlayPhase }} config
+   * @protected
+   */
+  _handleTrapsKeyboardFocus({ phase }) {
+    if (phase === 'init') {
+      this.contentNode.style.outline = 'none';
+      this.contentNode.tabIndex = -1;
+
+      const isContentShadowHost = Boolean(this.contentNode.shadowRoot);
+      if (isContentShadowHost) {
+        // eslint-disable-next-line no-console
+        console.warn(
+          '[overlays]: For best accessibility (compatibility with Safari + VoiceOver), provide a contentNode that is not a host for a shadow root',
+        );
+      }
     }
-    if (this._containFocusHandler) {
-      this._containFocusHandler.disconnect();
-      this._containFocusHandler = undefined;
+    if (phase === 'show') {
+      this.#handleShiftKeyPress();
+      this.#handleFocusInsideDialog();
+      this.__wrappingDialogNode?.close();
+      this.__wrappingDialogNode?.showModal();
+      /**
+       * At this moment `#handleFocusInsideDialog` should handle the focus.
+       * But for some reason Firefox on the testing setup does not
+       * focus the native `dialog` on showModal() and focuses the first
+       * focusable element inside the dialog instead. Hence here we focus
+       * contentNode explicitly
+       */
+      this.#getInitialElementToFocus().focus();
     }
-    this.__hasActiveTrapsKeyboardFocus = false;
-    if (this.manager) {
-      this.manager.informTrapsKeyboardFocusGotDisabled({ disabledCtrl: this, findNewTrap });
+    if (phase === 'hide') {
+      this.#stopHandlingShiftKeyPress();
     }
   }
 
@@ -1231,12 +1263,7 @@ export class OverlayController extends EventTarget {
       return;
     }
 
-    const hasPressedInside =
-      event.composedPath().includes(this.contentNode) ||
-      (this.invokerNode && event.composedPath().includes(this.invokerNode)) ||
-      deepContains(this.contentNode, /** @type {HTMLElement|ShadowRoot} */ (event.target));
-
-    if (hasPressedInside) {
+    if (this.#hasPressedInside(event)) {
       this.__escKeyHandlerCalled = true;
       this.hide();
       // We could do event.stopPropagation() here, but we don't want to hide info for
@@ -1246,6 +1273,15 @@ export class OverlayController extends EventTarget {
     }
   }
 
+  /**
+   * @param {KeyboardEvent} event
+   * @returns {boolean}
+   */
+  #hasPressedInside = event =>
+    event.composedPath().includes(/** @type {EventTarget} */ (this.__wrappingDialogNode)) ||
+    (this.invokerNode && event.composedPath().includes(this.invokerNode)) ||
+    deepContains(this.contentNode, /** @type {HTMLElement|ShadowRoot} */ (event.target));
+
   /**
    * @param {KeyboardEvent} event
    * @returns {void}
@@ -1253,10 +1289,7 @@ export class OverlayController extends EventTarget {
   #outsideEscKeyHandler = event => {
     if (event.key !== 'Escape') return;
 
-    const hasPressedInside =
-      event.composedPath().includes(this.contentNode) ||
-      deepContains(this.contentNode, /** @type {HTMLElement|ShadowRoot} */ (event.target));
-    if (hasPressedInside) return;
+    if (this.#hasPressedInside(event)) return;
     this.hide();
   };
 

package/components/overlays/src/OverlaysManager.js

@@ -134,39 +134,6 @@ export class OverlaysManager {
     return this.__siblingsInert;
   }
 
-  disableTrapsKeyboardFocusForAll() {
-    this.shownList.forEach(ctrl => {
-      if (ctrl.trapsKeyboardFocus === true && ctrl.disableTrapsKeyboardFocus) {
-        ctrl.disableTrapsKeyboardFocus({ findNewTrap: false });
-      }
-    });
-  }
-
-  /**
-   * @param {'local' | 'global' | undefined} placementMode
-   */
-  informTrapsKeyboardFocusGotEnabled(placementMode) {
-    if (this.siblingsInert === false && placementMode === 'global') {
-      this.__siblingsInert = true;
-    }
-  }
-
-  /**
-   * @param {{ disabledCtrl?:OverlayController, findNewTrap?:boolean }} options
-   */
-  informTrapsKeyboardFocusGotDisabled({ disabledCtrl, findNewTrap = true } = {}) {
-    const next = this.shownList.find(
-      ctrl => ctrl !== disabledCtrl && ctrl.trapsKeyboardFocus === true,
-    );
-    if (next) {
-      if (findNewTrap) {
-        next.enableTrapsKeyboardFocus();
-      }
-    } else if (this.siblingsInert === true) {
-      this.__siblingsInert = false;
-    }
-  }
-
   /** PreventsScroll */
 
   // eslint-disable-next-line class-methods-use-this

package/components/overlays/test/OverlayController.test.js

@@ -1,4 +1,5 @@
 /* eslint-disable no-new */
+/* eslint-disable lit-a11y/no-autofocus */
 import { OverlayController, overlays } from '@lion/ui/overlays.js';
 import { mimicClick } from '@lion/ui/overlays-test-helpers.js';
 import { sendKeys } from '@web/test-runner-commands';
@@ -18,7 +19,7 @@ import { isActiveElement } from '../../core/test-helpers/isActiveElement.js';
 import { createShadowHost } from '../test-helpers/createShadowHost.js';
 import { _adoptStyleUtils } from '../src/utils/adopt-styles.js';
 import { simulateTab } from '../src/utils/simulate-tab.js';
-import { keyCodes } from '../src/utils/key-codes.js';
+import { browserDetection } from '../../core/src/browserDetection.js';
 
 /**
  * @typedef {import('../types/OverlayConfig.js').ViewportPlacement} ViewportPlacement
@@ -585,30 +586,57 @@ describe('OverlayController', () => {
 
   describe('Feature Configuration', () => {
     describe('trapsKeyboardFocus', () => {
-      it('offers an hasActiveTrapsKeyboardFocus flag', async () => {
+      it('focuses the overlay on show', async () => {
         const ctrl = new OverlayController({
           ...withGlobalTestConfig(),
           trapsKeyboardFocus: true,
         });
-        expect(ctrl.hasActiveTrapsKeyboardFocus).to.be.false;
-
         await ctrl.show();
-        expect(ctrl.hasActiveTrapsKeyboardFocus).to.be.true;
+        expect(isActiveElement(ctrl.contentNode)).to.be.true;
       });
 
-      it('focuses the overlay on show', async () => {
+      it('keeps focus within the overlay e.g. you can not tab out by accident', async () => {
+        const contentNode = /** @type {HTMLElement} */ (
+          await fixture(html` <div><input id="input1" /><input id="input2" /></div> `)
+        );
         const ctrl = new OverlayController({
           ...withGlobalTestConfig(),
           trapsKeyboardFocus: true,
+          contentNode,
         });
         await ctrl.show();
 
-        expect(isActiveElement(ctrl.contentNode)).to.be.true;
+        await fixture(html`<button>click me</button>`);
+        const input1 = ctrl.contentNode.querySelectorAll('input')[0];
+        const input2 = ctrl.contentNode.querySelectorAll('input')[1];
+        input2.focus();
+        await sendKeys({ press: 'Tab' });
+
+        if (browserDetection.isChrome) {
+          expect(isActiveElement(document.body)).to.be.true;
+          await sendKeys({ press: 'Tab' });
+          expect(isActiveElement(input1)).to.be.true;
+        }
+        if (browserDetection.isFirefox) {
+          // For some reason with the headless firefox setup,
+          // once we focus on the latest focusable element, `input2` in this case,
+          // any further Tab presses keeps the focus on `input2` element
+          expect(isActiveElement(input2)).to.be.true;
+          await sendKeys({ press: 'Tab' });
+          expect(isActiveElement(input2)).to.be.true;
+        }
+        if (browserDetection.isMacSafari) {
+          expect(isActiveElement(document.body)).to.be.true;
+          await sendKeys({ press: 'Tab' });
+          expect(isActiveElement(ctrl.contentNode)).to.be.true;
+          await sendKeys({ press: 'Tab' });
+          expect(isActiveElement(input1)).to.be.true;
+        }
       });
 
-      it('keeps focus within the overlay e.g. you can not tab out by accident', async () => {
+      it('focuses the element with [autofocus] when dialog gets opened', async () => {
         const contentNode = /** @type {HTMLElement} */ (
-          await fixture(html` <div><input id="input1" /><input id="input2" /></div> `)
+          await fixture(html` <div><input id="input1" /><input id="input2" autofocus /></div> `)
         );
         const ctrl = new OverlayController({
           ...withGlobalTestConfig(),
@@ -617,21 +645,21 @@ describe('OverlayController', () => {
         });
         await ctrl.show();
 
-        const elOutside = /** @type {HTMLElement} */ (
-          await fixture(html`<button>click me</button>`)
-        );
-        const input1 = ctrl.contentNode.querySelectorAll('input')[0];
         const input2 = ctrl.contentNode.querySelectorAll('input')[1];
+        expect(isActiveElement(input2)).to.be.true;
+      });
 
-        input2.focus();
-        // this mimics a tab within the contain-focus system used
-        const event = new CustomEvent('keydown', { detail: 0, bubbles: true });
-        // @ts-ignore override private key
-        event.keyCode = keyCodes.tab;
-        window.dispatchEvent(event);
-
-        expect(isActiveElement(elOutside)).to.be.false;
-        expect(isActiveElement(input1)).to.be.true;
+      it('focuses the contentNode when dialog gets opened and there is no [autofocus]', async () => {
+        const contentNode = /** @type {HTMLElement} */ (
+          await fixture(html` <div><input id="input1" /><input id="input2" /></div> `)
+        );
+        const ctrl = new OverlayController({
+          ...withGlobalTestConfig(),
+          trapsKeyboardFocus: true,
+          contentNode,
+        });
+        await ctrl.show();
+        expect(isActiveElement(contentNode)).to.be.true;
       });
 
       it('allows to move the focus outside of the overlay if trapsKeyboardFocus is disabled', async () => {
@@ -668,12 +696,10 @@ describe('OverlayController', () => {
 
         await ctrl0.show();
         await ctrl1.show();
-        expect(ctrl0.hasActiveTrapsKeyboardFocus).to.be.false;
-        expect(ctrl1.hasActiveTrapsKeyboardFocus).to.be.true;
+        expect(isActiveElement(ctrl1.contentNode)).to.be.true;
 
         await ctrl1.hide();
-        expect(ctrl0.hasActiveTrapsKeyboardFocus).to.be.true;
-        expect(ctrl1.hasActiveTrapsKeyboardFocus).to.be.false;
+        expect(isActiveElement(ctrl0.contentNode)).to.be.true;
       });
 
       it('warns when contentNode is a host for a shadowRoot', async () => {
@@ -812,10 +838,6 @@ describe('OverlayController', () => {
           );
           const { parentOverlay, childOverlay } = await createNestedEscControllers(parentContent);
           await mimicEscapePress(childOverlay.contentNode);
-
-          // without this line, the test is unstable on FF sometimes
-          await aTimeout(100);
-
           await waitUntil(() => !parentOverlay.isShown);
           await waitUntil(() => childOverlay.isShown);