@lion/ui 0.8.0 → 0.8.1

package/README.md

@@ -26,15 +26,15 @@
 </p>
 
 <p align="center">
-  <a href="https://lion-web.netlify.app">Website</a>
+  <a href="https://lion.js.org">Website</a>
   ·
-  <a href="https://lion-web.netlify.app/fundamentals/">Fundamentals</a>
+  <a href="https://lion.js.org/fundamentals/">Fundamentals</a>
   ·
-  <a href="https://lion-web.netlify.app/guides/">Guides</a>
+  <a href="https://lion.js.org/guides/">Guides</a>
   ·
-  <a href="https://lion-web.netlify.app/components/">Components</a>
+  <a href="https://lion.js.org/components/">Components</a>
   ·
-  <a href="https://lion-web.netlify.app/blog/">Blog</a>
+  <a href="https://lion.js.org/blog/">Blog</a>
 </p>
 
 **Lion is a set of highly performant, accessible and flexible Web Components.!**
@@ -50,7 +50,7 @@ They provide an unopinionated, white-label layer that can be extended to your ow
 > Note: Our demo examples might look simple and not very stylish. This is on purpose. They are designed to be basic so you can easily add your own styles to them to match your intended design, without dealing with styles that are already there.
 
 <p align="center">
-  <a href="https://lion-web.netlify.app/guides/"><strong>Explore the Lion Guides&nbsp;&nbsp;▶</strong></a>
+  <a href="https://lion.js.org/guides/"><strong>Explore the Lion Guides&nbsp;&nbsp;▶</strong></a>
 </p>
 
 ## How to install
@@ -158,7 +158,7 @@ This means you only have to apply your own Design System: by delivering styles,
 
 ## Coding guidelines
 
-Check out our [coding guidelines](https://lion-web.netlify.app/guides/principles/definitions-and-terms/) for more detailed information.
+Check out our [coding guidelines](https://lion.js.org/guides/principles/definitions-and-terms/) for more detailed information.
 
 ## How to contribute
 

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/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'