@lion/ui 0.7.9 → 0.8.1

package/components/combobox/test/validators.test.js

@@ -25,13 +25,13 @@ describe('MatchesOption validation', () => {
     config.node = el;
     const validator = new MatchesOption();
 
-    mimicUserTyping(el, 'Artichoke');
+    await mimicUserTyping(el, 'Artichoke');
     await el.updateComplete;
 
     isEnabled = validator.execute('Artichoke', undefined, config);
     expect(isEnabled).to.be.false;
 
-    mimicUserTyping(el, 'Foo');
+    await mimicUserTyping(el, 'Foo');
     await el.updateComplete;
 
     isEnabled = validator.execute('Foo', undefined, config);

package/components/combobox/test-helpers/combobox-helpers.js

@@ -1,4 +1,5 @@
 import { getListboxMembers } from '@lion/ui/listbox-test-helpers.js';
+import { sendKeys } from '@web/test-runner-commands';
 
 /**
  * @typedef {import('@lion/ui/combobox.js').LionCombobox} LionCombobox
@@ -34,17 +35,15 @@ export function getComboboxMembers(el) {
 
 /**
  * @param {LionCombobox} el
- * @param {string} value
+ * @param {string} keys
  */
-// TODO: add keys that actually make sense...
-export function mimicUserTyping(el, value) {
+export async function mimicUserTyping(el, keys) {
   const { _inputNode } = getComboboxMembers(el);
-  _inputNode.dispatchEvent(new Event('focusin', { bubbles: true }));
-  // eslint-disable-next-line no-param-reassign
-  _inputNode.value = value;
-  _inputNode.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
-  _inputNode.dispatchEvent(new KeyboardEvent('keyup', { key: value }));
-  _inputNode.dispatchEvent(new KeyboardEvent('keydown', { key: value }));
+  _inputNode.value = '';
+  _inputNode.focus();
+  await sendKeys({
+    type: keys,
+  });
 }
 
 /**

package/components/core/src/browserDetection.js

@@ -9,11 +9,19 @@ function checkChrome(flavor = 'google-chrome') {
     return flavor === 'google-chrome';
   }
 
-  const isChromium = /** @type {window & { chrome?: boolean}} */ (globalThis).chrome;
+  // eslint-disable-next-line prefer-destructuring
+  const navigator = /** @type {Navigator & {userAgentData: {brands:{brand:string}[]}}} */ (
+    globalThis.navigator
+  );
+
+  const isChromium =
+    !!navigator.userAgentData &&
+    navigator.userAgentData.brands.some(data => data.brand === 'Chromium');
 
   if (flavor === 'chromium') {
     return isChromium;
   }
+
   const winNav = globalThis.navigator;
   const vendorName = winNav?.vendor;
   const isOpera =

package/components/form/src/LionForm.js

@@ -10,15 +10,6 @@ const throwFormNodeError = () => {
   );
 };
 
-/**
- * @param {FormRegistrarHost} formEl
- * @returns {boolean}
- */
-function hasFocusableChildren(formEl) {
-  // this implies all children have the same type (either all of them are focusable or none of them are)
-  return formEl.formElements?.some(child => child._focusableNode);
-}
-
 /**
  * LionForm: form wrapper providing extra features and integration with lion-field elements.
  *
@@ -104,10 +95,10 @@ export class LionForm extends LionFieldset {
       element.formElements.find(child => child.hasFeedbackFor.includes('error')) ||
       element.formElements[0];
 
-    if (hasFocusableChildren(firstFormElWithError)) {
-      this._setFocusOnFirstErroneousFormElement(firstFormElWithError);
-    } else {
+    if (firstFormElWithError._focusableNode) {
       firstFormElWithError._focusableNode.focus();
+    } else {
+      this._setFocusOnFirstErroneousFormElement(firstFormElWithError);
     }
   }
 

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

@@ -5,6 +5,10 @@ import '@lion/ui/define/lion-field.js';
 import '@lion/ui/define/lion-validation-feedback.js';
 import '@lion/ui/define/lion-listbox.js';
 import '@lion/ui/define/lion-option.js';
+import '@lion/ui/define/lion-checkbox-group.js';
+import '@lion/ui/define/lion-checkbox.js';
+import '@lion/ui/define/lion-radio-group.js';
+import '@lion/ui/define/lion-radio.js';
 import '@lion/ui/define/lion-form.js';
 import {
   aTimeout,
@@ -264,10 +268,31 @@ describe('<lion-form>', () => {
     button.click();
     expect(dispatchSpy.args[0][0].type).to.equal('submit');
     const fieldset = el.formElements[0];
-    // @ts-ignore [allow-protected] in test
     expect(document.activeElement).to.equal(fieldset.formElements[0]._inputNode);
   });
 
+  it('sets focus on submit to the first form element within a erroneous fieldset within another fieldset', async () => {
+    const el = await fixture(html`
+      <lion-form>
+        <form>
+          <lion-fieldset name="parentFieldset">
+            <lion-fieldset name="childFieldset" .validators="${[new Required()]}">
+              <${childTag} name="firstName"></${childTag}>
+            </lion-fieldset>
+          </lion-fieldset>
+
+          <button type="submit">submit</button>
+        </form>
+      </lion-form>
+    `);
+    const button = /** @type {HTMLButtonElement} */ (el.querySelector('button'));
+    const parentFieldSetEl = el.formElements[0];
+    const childFieldsetEl = parentFieldSetEl.formElements[0];
+    const inputEl = childFieldsetEl.formElements[0];
+    button.click();
+    expect(document.activeElement).to.equal(inputEl._focusableNode);
+  });
+
   it('sets focus on submit to the first form element within a erroneous listbox', async () => {
     const el = await fixture(html`
       <lion-form>
@@ -285,4 +310,66 @@ describe('<lion-form>', () => {
     const listboxEl = el.formElements[0];
     expect(document.activeElement).to.equal(listboxEl._inputNode);
   });
+
+  it('sets focus on submit to the first form element within a erroneous listbox within a fieldset', async () => {
+    const el = await fixture(html`
+      <lion-form>
+        <form>
+          <lion-fieldset name="fieldset">
+            <lion-listbox name="name" .validators="${[new Required()]}">
+              <lion-option value="a">a</lion-option>
+              <lion-option value="b">b</lion-option>
+            </lion-listbox>
+          </lion-fieldset>
+          <button type="submit">submit</button>
+        </form>
+      </lion-form>
+    `);
+    const button = /** @type {HTMLButtonElement} */ (el.querySelector('button'));
+    button.click();
+    const fieldsetEl = el.formElements[0];
+    const listboxEl = fieldsetEl.formElements[0];
+    expect(document.activeElement).to.equal(listboxEl._inputNode);
+  });
+
+  it('sets focus on submit to the first form element within a erroneous checkbox-group', async () => {
+    const el = await fixture(html`
+      <lion-form>
+        <form>
+          <lion-checkbox-group name="name" .validators="${[new Required()]}">
+            <lion-checkbox .choiceValue=${'a'} label="a"></lion-checkbox>
+            <lion-checkbox .choiceValue=${'b'} label="b"></lion-checkbox>
+          </lion-checkbox-group>
+          <button type="submit">submit</button>
+        </form>
+      </lion-form>
+    `);
+    const button = /** @type {HTMLButtonElement} */ (el.querySelector('button'));
+    const checkboxGroupEl = el.formElements[0];
+    const checkboxEl = checkboxGroupEl.formElements[0];
+    button.click();
+    expect(document.activeElement).to.equal(checkboxEl._focusableNode);
+  });
+
+  it('sets focus on submit to the first form element within a erroneous radio-group', async () => {
+    const el = await fixture(html`
+      <lion-form>
+        <form>
+            <lion-radio-group name="name" .validators="${[new Required()]}">
+              <lion-radio .choiceValue=${'a'} label="a"></lion-radio>
+              <lion-radio .choiceValue=${'b'} label="b"></lion-radio>
+            </lion-radio-group>
+          </lion-fieldset>
+
+          <button type="submit">submit</button>
+        </form>
+      </lion-form>
+    `);
+    const button = /** @type {HTMLButtonElement} */ (el.querySelector('button'));
+
+    const radioGroupEl = el.formElements[0];
+    const radioEl = radioGroupEl.formElements[0];
+    button.click();
+    expect(document.activeElement).to.equal(radioEl._focusableNode);
+  });
 });

package/components/form-core/src/registration/FormRegisteringMixin.js

@@ -40,7 +40,7 @@ const FormRegisteringMixinImplementation = superclass =>
        * To encourage accessibility best practices, `form-element-register` events
        * do not pierce through shadow roots. This forces the developer to create form groups and fieldsets that automatically allow the creation of accessible relationships in the same dom tree.
       Use this option if you know what you're doing. It will then be possible to nest FormControls
-      inside shadow dom. See https://lion-web.netlify.app/fundamentals/rationales/accessibility/#shadow-roots-and-accessibility
+      inside shadow dom. See https://lion.js.org/fundamentals/rationales/accessibility/#shadow-roots-and-accessibility
       */
       this.allowCrossRootRegistration = false;
     }

package/components/form-core/test-suites/NativeTextFieldMixin.suite.js

@@ -4,11 +4,7 @@ import { defineCE, expect, fixture, html, triggerFocusFor, unsafeStatic } from '
 import { sendKeys } from '@web/test-runner-commands';
 import { spy } from 'sinon';
 import { NativeTextFieldMixin } from '@lion/ui/form-core.js';
-
-const isSafari = (() => {
-  const ua = navigator.userAgent.toLowerCase();
-  return ua.indexOf('safari') !== -1 && ua.indexOf('chrome') === -1;
-})();
+import { browserDetection } from '@lion/ui/core.js';
 
 /**
  * @typedef {import('../types/FormControlMixinTypes.js').FormControlHost} FormControlHost
@@ -54,10 +50,6 @@ export function runNativeTextFieldMixinSuite(customConfig) {
     });
 
     it('move focus to a next focusable element after writing some text', async () => {
-      if (isSafari) {
-        // TODO: This test is broken on Safari, to be fixed later
-        return;
-      }
       const el = /** @type {NativeTextFieldClass} */ (await fixture(html`<${tag}></${tag}>`));
       // @ts-ignore [allow-protected] in test
       const setValueAndPreserveCaretSpy = spy(el, '_setValueAndPreserveCaret');
@@ -71,8 +63,15 @@ export function runNativeTextFieldMixinSuite(customConfig) {
       await sendKeys({
         press: 'Tab',
       });
-      expect(document.activeElement).to.not.equal(_inputNode);
+
       expect(setValueAndPreserveCaretSpy.calledOnce).to.be.false;
+
+      // TODO: This seems to work in practice, but not in the test. Investigate.
+      if (browserDetection.isMacSafari || browserDetection.isFirefox) {
+        return;
+      }
+
+      expect(document.activeElement).to.not.equal(_inputNode);
     });
   });
 }

package/components/form-core/types/registration/FormRegisteringMixinTypes.ts

@@ -16,7 +16,7 @@ export declare class FormRegisteringHost {
    * do not pierce through shadow roots. This forces the developer to create form groups and fieldsets that
    * automatically allow the creation of accessible relationships in the same dom tree.
    * Use this option if you know what you're doing. It will then be possible to nest FormControls
-   * inside shadow dom. See https://lion-web.netlify.app/fundamentals/rationales/accessibility#shadow-roots-and-accessibility
+   * inside shadow dom. See https://lion.js.org/fundamentals/rationales/accessibility#shadow-roots-and-accessibility
    */
   allowCrossRootRegistration: boolean;
 

package/components/listbox/test-suites/ListboxMixin.suite.js

@@ -400,7 +400,7 @@ export function runListboxMixinSuite(customConfig = {}) {
         `);
         await el.updateComplete;
         await el.updateComplete; // need 2 awaits as overlay.show is an async function
-        // for more info about why we need the ignoreRules, see: https://lion-web.netlify.app/fundamentals/systems/overlays/rationale/#considerations
+        // for more info about why we need the ignoreRules, see: https://lion.js.org/fundamentals/systems/overlays/rationale/#considerations
         await expect(el).to.be.accessible({ ignoredRules: ['aria-allowed-role'] });
       });
 
@@ -412,7 +412,7 @@ export function runListboxMixinSuite(customConfig = {}) {
             <${optionTag} .choiceValue=${20}>Item 2</${optionTag}>
           </${tag}>
         `);
-        // for more info about why we need the ignoreRules, see: https://lion-web.netlify.app/fundamentals/systems/overlays/rationale/#considerations
+        // for more info about why we need the ignoreRules, see: https://lion.js.org/fundamentals/systems/overlays/rationale/#considerations
         await expect(el).to.be.accessible({ ignoredRules: ['aria-allowed-role'] });
       });
 

package/components/localize/src/LocalizeManager.js

@@ -12,7 +12,7 @@ import isLocalizeESModule from './isLocalizeESModule.js';
 /**
  * `LocalizeManager` manages your translations (includes loading)
  */
-export class LocalizeManager {
+export class LocalizeManager extends EventTarget {
   // eslint-disable-line no-unused-vars
   constructor({
     autoLoadOnLocaleChange = false,
@@ -20,8 +20,8 @@ export class LocalizeManager {
     showKeyAsFallback = false,
     allowOverridesForExistingNamespaces = false,
   } = {}) {
-    /** @private */
-    this.__delegationTarget = document.createDocumentFragment();
+    super();
+
     /** @protected */
     this._autoLoadOnLocaleChange = !!autoLoadOnLocaleChange;
     /** @protected */
@@ -480,31 +480,6 @@ export class LocalizeManager {
     return locale.substring(0, 2);
   }
 
-  /**
-   * @param {string} type
-   * @param {EventListener} listener
-   * @param {...Object} options
-   */
-  addEventListener(type, listener, ...options) {
-    this.__delegationTarget.addEventListener(type, listener, ...options);
-  }
-
-  /**
-   * @param {string} type
-   * @param {EventListener} listener
-   * @param {...Object} options
-   */
-  removeEventListener(type, listener, ...options) {
-    this.__delegationTarget.removeEventListener(type, listener, ...options);
-  }
-
-  /**
-   *  @param {CustomEvent} event
-   */
-  dispatchEvent(event) {
-    this.__delegationTarget.dispatchEvent(event);
-  }
-
   /**
    * @param {string} newLocale
    * @param {string} oldLocale

package/components/overlays/src/OverlayController.js

@@ -578,7 +578,7 @@ export class OverlayController extends EventTarget {
     // The role="dialog" is set on the contentNode (or another role), so role="none"
     // is valid here, although AXE complains about this setup.
     // For now we need to add `ignoredRules: ['aria-allowed-role']` in your AXE tests.
-    // see: https://lion-web.netlify.app/fundamentals/systems/overlays/rationale/#considerations
+    // see: https://lion.js.org/fundamentals/systems/overlays/rationale/#considerations
     wrappingDialogElement.setAttribute('role', 'none');
     wrappingDialogElement.setAttribute('data-overlay-outer-wrapper', '');
     // N.B. position: fixed is needed to escape out of 'overflow: hidden'