@lion/ui 0.8.8 → 0.9.1

package/components/input-tel-dropdown/test/LionInputTelDropdown.test.js

@@ -1,20 +1,24 @@
+import { mimicUserChangingDropdown } from '@lion/ui/input-tel-dropdown-test-helpers.js';
+import { runInputTelDropdownSuite } from '@lion/ui/input-tel-dropdown-test-suites.js';
+import { LionInputTelDropdown } from '@lion/ui/input-tel-dropdown.js';
 import { runInputTelSuite } from '@lion/ui/input-tel-test-suites.js';
+import { aTimeout, expect, fixture } from '@open-wc/testing';
+import { LionSelectRich } from '@lion/ui/select-rich.js';
 import { repeat } from 'lit/directives/repeat.js';
+import { LionOption } from '@lion/ui/listbox.js';
 import { ref } from 'lit/directives/ref.js';
 import { html } from 'lit';
-import { aTimeout, expect, fixture } from '@open-wc/testing';
-import { LionInputTelDropdown } from '@lion/ui/input-tel-dropdown.js';
-import { LionOption } from '@lion/ui/listbox.js';
-import { LionSelectRich } from '@lion/ui/select-rich.js';
-import { runInputTelDropdownSuite } from '@lion/ui/input-tel-dropdown-test-suites.js';
-import { mimicUserChangingDropdown } from '@lion/ui/input-tel-dropdown-test-helpers.js';
+
+import { mockPhoneUtilManager, restorePhoneUtilManager } from '@lion/ui/input-tel-test-helpers.js';
+import { isActiveElement } from '../../core/test-helpers/isActiveElement.js';
 import { ScopedElementsMixin } from '../../core/src/ScopedElementsMixin.js';
+import '@lion/ui/define/lion-input-tel-dropdown.js';
 
 /**
- * @typedef {import('lit').TemplateResult} TemplateResult
- * @typedef {HTMLSelectElement|HTMLElement & {modelValue:string}} DropdownElement
  * @typedef {import('../types/index.js').TemplateDataForDropdownInputTel} TemplateDataForDropdownInputTel
+ * @typedef {HTMLSelectElement|HTMLElement & {modelValue:string}} DropdownElement
  * @typedef {import('../types/index.js').RegionMeta} RegionMeta
+ * @typedef {import('lit').TemplateResult} TemplateResult
  */
 
 class WithFormControlInputTelDropdown extends ScopedElementsMixin(LionInputTelDropdown) {
@@ -65,6 +69,18 @@ describe('WithFormControlInputTelDropdown', () => {
   // Runs it for LionSelectRich, which uses .modelValue/@model-value-changed instead of .value/@change
   runInputTelDropdownSuite({ klass: WithFormControlInputTelDropdown });
 
+  it("it doesn't set the country as modelValue, only as viewValue", async () => {
+    const el = /** @type {LionInputTelDropdown} */ (
+      await fixture(html`
+        <lion-input-tel-dropdown .allowedRegions="${['NL']}"></lion-input-tel-dropdown>
+      `)
+    );
+
+    // @ts-expect-error [allow-protected-in-tests]
+    expect(el._inputNode.value).to.equal('+31');
+    expect(el.modelValue).to.equal('');
+  });
+
   it('focuses the textbox right after selection if selected via opened dropdown if interaction-mode is mac', async () => {
     class InputTelDropdownMac extends LionInputTelDropdown {
       static templates = {
@@ -114,7 +130,7 @@ describe('WithFormControlInputTelDropdown', () => {
       await el.updateComplete;
       await aTimeout(0);
       // @ts-expect-error [allow-protected-in-tests]
-      expect(el._inputNode).to.equal(document.activeElement);
+      expect(isActiveElement(el._inputNode)).to.be.true;
     }
   });
 
@@ -167,7 +183,43 @@ describe('WithFormControlInputTelDropdown', () => {
       await el.updateComplete;
       await aTimeout(0);
       // @ts-expect-error [allow-protected-in-tests]
-      expect(el._inputNode).to.not.equal(document.activeElement);
+      expect(isActiveElement(el._inputNode)).to.be.false;
     }
   });
+
+  describe('defaultValidators', () => {
+    /** @type {(value:any) => void} */
+    let resolveLoaded;
+    beforeEach(() => {
+      ({ resolveLoaded } = mockPhoneUtilManager());
+    });
+
+    afterEach(() => {
+      restorePhoneUtilManager();
+    });
+
+    it('without interaction are not called', async () => {
+      const el = /** @type {LionInputTelDropdown} */ (
+        await fixture(html`
+          <lion-input-tel-dropdown .allowedRegions="${['NL']}"></lion-input-tel-dropdown>
+        `)
+      );
+      resolveLoaded(undefined);
+      await aTimeout(0);
+      expect(el.hasFeedbackFor).to.deep.equal([]);
+    });
+
+    it('with interaction are called', async () => {
+      const el = /** @type {LionInputTelDropdown} */ (
+        await fixture(html`
+          <lion-input-tel-dropdown .allowedRegions="${['NL']}"></lion-input-tel-dropdown>
+        `)
+      );
+      el.modelValue = '+31 6';
+
+      resolveLoaded(undefined);
+      await aTimeout(0);
+      expect(el.hasFeedbackFor).to.deep.equal(['error']);
+    });
+  });
 });

package/components/input-tel-dropdown/test-suites/LionInputTelDropdown.suite.js

@@ -1,22 +1,24 @@
-import { PhoneUtilManager } from '@lion/ui/input-tel.js';
 import { mockPhoneUtilManager, restorePhoneUtilManager } from '@lion/ui/input-tel-test-helpers.js';
+import { mimicUserChangingDropdown } from '@lion/ui/input-tel-dropdown-test-helpers.js';
+import { LionInputTelDropdown } from '@lion/ui/input-tel-dropdown.js';
+import { PhoneUtilManager } from '@lion/ui/input-tel.js';
+import sinon from 'sinon';
 import {
+  fixtureSync as _fixtureSync,
+  fixture as _fixture,
+  unsafeStatic,
   aTimeout,
   defineCE,
   expect,
-  fixture as _fixture,
-  fixtureSync as _fixtureSync,
   html,
-  unsafeStatic,
 } from '@open-wc/testing';
-import sinon from 'sinon';
-import { LionInputTelDropdown } from '@lion/ui/input-tel-dropdown.js';
-import { mimicUserChangingDropdown } from '@lion/ui/input-tel-dropdown-test-helpers.js';
+
+import { isActiveElement } from '../../core/test-helpers/isActiveElement.js';
 
 /**
- * @typedef {import('lit').TemplateResult} TemplateResult
- * @typedef {HTMLSelectElement|HTMLElement & {modelValue:string}} DropdownElement
  * @typedef {import('../types/index.js').TemplateDataForDropdownInputTel} TemplateDataForDropdownInputTel
+ * @typedef {HTMLSelectElement|HTMLElement & {modelValue:string}} DropdownElement
+ * @typedef {import('lit').TemplateResult} TemplateResult
  */
 
 const fixture = /** @type {(arg: string | TemplateResult) => Promise<LionInputTelDropdown>} */ (
@@ -206,12 +208,14 @@ export function runInputTelDropdownSuite({ klass } = { klass: LionInputTelDropdo
 
       it('syncs disabled attribute to dropdown', async () => {
         const el = await fixture(html` <${tag} disabled></${tag}> `);
-        expect(el.refs.dropdown.value?.hasAttribute('disabled')).to.be.true;
+        expect(/** @type {HTMLElement} */ (el.refs.dropdown.value)?.hasAttribute('disabled')).to.be
+          .true;
       });
 
       it('disables dropdown on readonly', async () => {
         const el = await fixture(html` <${tag} readonly></${tag}> `);
-        expect(el.refs.dropdown.value?.hasAttribute('disabled')).to.be.true;
+        expect(/** @type {HTMLElement} */ (el.refs.dropdown.value)?.hasAttribute('disabled')).to.be
+          .true;
       });
 
       it('renders to prefix slot in light dom', async () => {
@@ -332,7 +336,7 @@ export function runInputTelDropdownSuite({ klass } = { klass: LionInputTelDropdo
         mimicUserChangingDropdown(dropdownElement, 'BE');
         await el.updateComplete;
         // @ts-expect-error [allow-protected-in-tests]
-        expect(el._inputNode).to.not.equal(document.activeElement);
+        expect(isActiveElement(el._inputNode)).to.be.false;
       });
     });
 

package/components/overlays/src/OverlayController.js

@@ -1121,6 +1121,15 @@ export class OverlayController extends EventTarget {
     if (this.manager) {
       this.manager.disableTrapsKeyboardFocusForAll();
     }
+
+    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',
+      );
+    }
+
     this._containFocusHandler = containFocus(this.contentNode);
     this.__hasActiveTrapsKeyboardFocus = true;
     if (this.manager) {

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

@@ -603,8 +603,8 @@ describe('OverlayController', () => {
         event.keyCode = keyCodes.tab;
         window.dispatchEvent(event);
 
-        expect(elOutside).to.not.equal(document.activeElement);
-        expect(input1).to.equal(document.activeElement);
+        expect(isActiveElement(elOutside)).to.be.false;
+        expect(isActiveElement(input1)).to.be.true;
       });
 
       it('allows to move the focus outside of the overlay if trapsKeyboardFocus is disabled', async () => {
@@ -625,7 +625,7 @@ describe('OverlayController', () => {
         input.focus();
         simulateTab();
 
-        expect(elOutside).to.equal(document.activeElement);
+        expect(isActiveElement(elOutside)).to.be.true;
       });
 
       it('keeps focus within overlay with multiple overlays with all traps on true', async () => {
@@ -648,6 +648,30 @@ describe('OverlayController', () => {
         expect(ctrl0.hasActiveTrapsKeyboardFocus).to.be.true;
         expect(ctrl1.hasActiveTrapsKeyboardFocus).to.be.false;
       });
+
+      it('warns when contentNode is a host for a shadowRoot', async () => {
+        const warnSpy = sinon.spy(console, 'warn');
+
+        const contentNode = /** @type {HTMLDivElement} */ (await fixture(html` <div></div> `));
+        contentNode.attachShadow({ mode: 'open' });
+        const shadowRootContentNode = /** @type {HTMLElement} */ (
+          await fixture(html` <div><input id="input1" /><input id="input2" /></div> `)
+        );
+        contentNode.shadowRoot?.appendChild(shadowRootContentNode);
+
+        const ctrl = new OverlayController({
+          ...withGlobalTestConfig(),
+          trapsKeyboardFocus: true,
+          contentNode,
+        });
+        await ctrl.show();
+
+        // @ts-expect-error
+        expect(console.warn.args[0][0]).to.equal(
+          '[overlays]: For best accessibility (compatibility with Safari + VoiceOver), provide a contentNode that is not a host for a shadow root',
+        );
+        warnSpy.restore();
+      });
     });
 
     describe('hidesOnEsc', () => {

package/components/select-rich/test/lion-select-rich.test.js

@@ -31,10 +31,11 @@ const fixture = /** @type {(arg: TemplateResult) => Promise<LionSelectRich>} */
 describe('lion-select-rich', () => {
   it('clicking the label should focus the invoker', async () => {
     const el = await fixture(html` <lion-select-rich label="foo"> </lion-select-rich> `);
-    expect(document.activeElement === document.body).to.be.true;
+    expect(isActiveElement(document.body)).to.be.true;
+
     const { _labelNode, _invokerNode } = getSelectRichMembers(el);
     _labelNode.click();
-    expect(document.activeElement === _invokerNode).to.be.true;
+    expect(isActiveElement(_invokerNode)).to.be.true;
   });
 
   it('has an attribute focused when focused', async () => {
@@ -276,14 +277,14 @@ describe('lion-select-rich', () => {
 
       await _overlayCtrl.show();
       await el.updateComplete;
-      expect(document.activeElement === _listboxNode).to.be.true;
-      expect(document.activeElement === _invokerNode).to.be.false;
+      expect(isActiveElement(_listboxNode)).to.be.true;
+      expect(isActiveElement(_invokerNode)).to.be.false;
 
       el.opened = false;
       await el.updateComplete;
       await el.updateComplete; // safari takes a little longer
-      expect(document.activeElement === _listboxNode).to.be.false;
-      expect(document.activeElement === _invokerNode).to.be.true;
+      expect(isActiveElement(_listboxNode)).to.be.false;
+      expect(isActiveElement(_invokerNode)).to.be.true;
     });
 
     it('opens the listbox with checked option as active', async () => {
@@ -472,7 +473,7 @@ describe('lion-select-rich', () => {
         <lion-select-rich .config=${{ trapsKeyboardFocus: true }}></lion-select-rich>
       `);
       const { _listboxNode } = getSelectRichMembers(el);
-      expect(document.activeElement).to.not.equal(_listboxNode);
+      expect(isActiveElement(_listboxNode)).to.be.false;
 
       el.opened = true;
       await el.updateComplete;
@@ -481,7 +482,7 @@ describe('lion-select-rich', () => {
       el.opened = false;
       await el.updateComplete;
       await el.updateComplete; // safari takes a little longer
-      expect(document.activeElement).to.not.equal(_listboxNode);
+      expect(isActiveElement(_listboxNode)).to.be.false;
     });
   });
 

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

@@ -69,7 +69,7 @@ describe('lion-switch', () => {
     const { _inputNode, _labelNode } = getSwitchMembers(el);
 
     _labelNode.click();
-    expect(document.activeElement).to.not.equal(_inputNode);
+    expect(isActiveElement(_inputNode)).to.be.false;
   });
 
   it('should sync its "disabled" state to child button', async () => {

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

@@ -2,6 +2,8 @@ import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 import sinon from 'sinon';
 
+import { isActiveElement } from '../../core/test-helpers/isActiveElement.js';
+
 /**
  * @typedef {import('../src/LionTabs.js').LionTabs} LionTabs
  */
@@ -397,9 +399,11 @@ describe('<lion-tabs>', () => {
         `)
       );
 
+      const secondTab = /** @type {HTMLElement} */ (
+        el.querySelector('[slot="tab"]:nth-of-type(2)')
+      );
       el.selectedIndex = 1;
-      expect(el.querySelector('[slot="tab"]:nth-of-type(2)') === document.activeElement).to.be
-        .false;
+      expect(isActiveElement(secondTab)).to.be.false;
     });
 
     it('does not focus a tab on firstUpdate', async () => {
@@ -414,7 +418,7 @@ describe('<lion-tabs>', () => {
         `)
       );
       const tabs = Array.from(el.children).filter(child => child.slot === 'tab');
-      expect(tabs.some(tab => tab === document.activeElement)).to.be.false;
+      expect(tabs.some(tab => isActiveElement(tab))).to.be.false;
     });
 
     it('focuses on a tab when setting with _setSelectedIndexWithFocus method', async () => {
@@ -429,9 +433,12 @@ describe('<lion-tabs>', () => {
         `)
       );
 
+      const secondTab = /** @type {HTMLElement} */ (
+        el.querySelector('[slot="tab"]:nth-of-type(2)')
+      );
       // @ts-ignore : this el is LionTabs
       el._setSelectedIndexWithFocus(1);
-      expect(el.querySelector('[slot="tab"]:nth-of-type(2)') === document.activeElement).to.be.true;
+      expect(isActiveElement(secondTab)).to.be.true;
     });
   });
 
@@ -448,7 +455,7 @@ describe('<lion-tabs>', () => {
     );
     const secondTab = /** @type {Element} */ (el.querySelector('[slot="tab"]:nth-of-type(2)'));
     secondTab.dispatchEvent(new MouseEvent('click'));
-    expect(secondTab === document.activeElement).to.be.true;
+    expect(isActiveElement(secondTab)).to.be.true;
   });
 
   describe('Accessibility', () => {