@lion/ui 0.15.4 → 0.16.0-alpha.0

package/components/collapsible/src/LionCollapsible.js

@@ -54,12 +54,10 @@ export class LionCollapsible extends LitElement {
     if (this._invokerNode) {
       this._invokerNode.addEventListener('click', this.toggle);
       this._invokerNode.setAttribute('aria-expanded', `${this.opened}`);
-      this._invokerNode.setAttribute('id', `collapsible-invoker-${uid}`);
       this._invokerNode.setAttribute('aria-controls', `collapsible-content-${uid}`);
     }
 
     if (this._contentNode) {
-      this._contentNode.setAttribute('aria-labelledby', `collapsible-invoker-${uid}`);
       this._contentNode.setAttribute('id', `collapsible-content-${uid}`);
     }
 

package/components/collapsible/test/lion-collapsible.test.js

@@ -136,14 +136,5 @@ describe('<lion-collapsible>', () => {
         expect(invoker).to.have.attribute('aria-expanded', 'true');
       });
     });
-
-    describe('Contents', () => {
-      it('adds aria-labelledby referring to invoker id', async () => {
-        const collapsibleElement = await fixture(defaultCollapsible);
-        const invoker = collapsibleElement.querySelector('[slot=invoker]');
-        const content = collapsibleElement.querySelector('[slot=content]');
-        expect(content).to.have.attribute('aria-labelledby', invoker?.id);
-      });
-    });
   });
 });

package/components/core/test-helpers/ssr-definitions/ScopedElementsHost.define.js

@@ -0,0 +1 @@
+// ... empty file needed for '@lit-labs/testing/fixtures.js'

package/components/drawer/test/lion-drawer.test.js

@@ -96,14 +96,5 @@ describe('<lion-drawer>', () => {
         expect(invoker).to.have.attribute('aria-expanded', 'true');
       });
     });
-
-    describe('Contents', () => {
-      it('adds aria-labelledby referring to invoker id', async () => {
-        const drawerElement = await fixture(template);
-        const invoker = drawerElement.querySelector('[slot=invoker]');
-        const content = drawerElement.querySelector('[slot=content]');
-        expect(content).to.have.attribute('aria-labelledby', invoker?.id);
-      });
-    });
   });
 });

package/components/form-core/src/choice-group/ChoiceGroupMixin.js

@@ -1,6 +1,6 @@
 import { dedupeMixin } from '@open-wc/dedupe-mixin';
-import { FormRegistrarMixin } from '../registration/FormRegistrarMixin.js';
 import { InteractionStateMixin } from '../InteractionStateMixin.js';
+import { FormRegistrarMixin } from '../registration/FormRegistrarMixin.js';
 import { ValidateMixin } from '../validate/ValidateMixin.js';
 
 /**
@@ -260,7 +260,17 @@ const ChoiceGroupMixinImplementation = superclass =>
       ) {
         return this[property];
       }
-      return this.formElements.filter(el => _filterFn(el, property)).map(el => el.property);
+
+      // TODO: consider a shared approach for all value getters
+      const filteredFnElements = this.formElements.filter(el => _filterFn(el, property));
+
+      if (property === '_initialModelValue') {
+        return this.multipleChoice
+          ? filteredFnElements.filter(el => el[property].checked).map(el => el[property].value)
+          : filteredFnElements.find(el => el[property].checked)?.value;
+      }
+
+      return filteredFnElements.map(el => el[property]);
     }
 
     /**

package/components/form-core/test-suites/choice-group/ChoiceGroupMixin.suite.js

@@ -1,15 +1,15 @@
-import { LitElement } from 'lit';
-import '@lion/ui/define/lion-fieldset.js';
 import '@lion/ui/define/lion-checkbox-group.js';
 import '@lion/ui/define/lion-checkbox.js';
+import '@lion/ui/define/lion-fieldset.js';
 import {
-  FormGroupMixin,
-  Required,
   ChoiceGroupMixin,
   ChoiceInputMixin,
+  FormGroupMixin,
+  Required,
 } from '@lion/ui/form-core.js';
 import { LionInput } from '@lion/ui/input.js';
 import { expect, fixture, fixtureSync, html, unsafeStatic } from '@open-wc/testing';
+import { LitElement } from 'lit';
 import sinon from 'sinon';
 
 class ChoiceInputFoo extends ChoiceInputMixin(LionInput) {}
@@ -45,6 +45,28 @@ export function runChoiceGroupMixinSuite({ parentTagString, childTagString, choi
 
   describe(`ChoiceGroupMixin: ${cfg.parentTagString}`, () => {
     if (cfg.choiceType === 'single') {
+      it('has a single modelValue representing initial checked values', async () => {
+        const el = /** @type {ChoiceInputGroup} */ (
+          await fixture(html`
+          <${parentTag} name="gender[]">
+            <${childTag} .choiceValue=${'male'}></${childTag}>
+            <${childTag} .choiceValue=${'female'} checked></${childTag}>
+            <${childTag} .choiceValue=${'other'}></${childTag}>
+          </${parentTag}>
+        `)
+        );
+
+        // @ts-ignore protected members allowed in test
+        expect(el._initialModelValue).to.eql('female');
+        expect(el.modelValue).to.eql('female');
+
+        el.formElements[0].checked = true;
+
+        // @ts-ignore protected members allowed in test
+        expect(el._initialModelValue).to.eql('female');
+        expect(el.modelValue).to.eql('male');
+      });
+
       it('has a single modelValue representing the currently checked radio value', async () => {
         const el = /** @type {ChoiceInputGroup} */ (
           await fixture(html`
@@ -585,6 +607,28 @@ export function runChoiceGroupMixinSuite({ parentTagString, childTagString, choi
     });
 
     describe('multipleChoice', () => {
+      it('has multiple _initialModelValue representing initial checked values', async () => {
+        const el = /** @type {ChoiceInputGroup} */ (
+          await fixture(html`
+          <${parentTag} multiple-choice name="animals[]">
+            <${childTag} .choiceValue=${'dog'} checked></${childTag}>
+            <${childTag} .choiceValue=${'cat'} checked></${childTag}>
+            <${childTag} .choiceValue=${'lion'}></${childTag}>
+          </${parentTag}>
+        `)
+        );
+
+        // @ts-ignore protected members allowed in test
+        expect(el._initialModelValue).to.eql(['dog', 'cat']);
+        expect(el.modelValue).to.eql(['dog', 'cat']);
+
+        el.formElements[2].checked = true;
+
+        // @ts-ignore protected members allowed in test
+        expect(el._initialModelValue).to.eql(['dog', 'cat']);
+        expect(el.modelValue).to.eql(['dog', 'cat', 'lion']);
+      });
+
       it('has a single modelValue representing all currently checked values', async () => {
         const el = /** @type {ChoiceInputGroup} */ (
           await fixture(html`

package/components/input-tel/translations/es.js

@@ -1,5 +1,5 @@
 export default {
-  allCountries: 'Pays suggérés',
+  allCountries: 'Todos los países',
   phoneNumber: 'Número de teléfono',
   selectCountry: 'Seleccione país',
   suggestedCountries: 'Países sugeridos',

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';
@@ -11,13 +12,14 @@ import {
   fixture,
   expect,
   html,
+  waitUntil,
 } from '@open-wc/testing';
 
 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
@@ -584,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(),
@@ -616,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 () => {
@@ -667,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 () => {
@@ -811,12 +838,8 @@ 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);
-
-          expect(parentOverlay.isShown).to.be.false;
-          expect(childOverlay.isShown).to.be.true;
+          await waitUntil(() => !parentOverlay.isShown);
+          await waitUntil(() => childOverlay.isShown);
 
           await childOverlay.teardown();
           await parentOverlay.teardown();