@lion/ui 0.8.7 → 0.9.0

package/components/core/src/DisabledMixin.js

@@ -74,6 +74,12 @@ const DisabledMixinImplementation = superclass =>
         }
       }
     }
+
+    click() {
+      if (this.disabled) return;
+
+      super.click();
+    }
   };
 
 export const DisabledMixin = dedupeMixin(DisabledMixinImplementation);

package/components/core/test/DisabledMixin.test.js

@@ -1,7 +1,8 @@
 import { expect, fixture } from '@open-wc/testing';
+import { DisabledMixin } from '@lion/ui/core.js';
 import { html } from 'lit/static-html.js';
 import { LitElement } from 'lit';
-import { DisabledMixin } from '@lion/ui/core.js';
+import sinon from 'sinon';
 
 describe('DisabledMixin', () => {
   class CanBeDisabled extends DisabledMixin(LitElement) {}
@@ -84,4 +85,24 @@ describe('DisabledMixin', () => {
     el.retractRequestToBeDisabled();
     expect(el.disabled).to.be.false;
   });
+
+  it('will not perform click when disabled', async () => {
+    const el = /** @type {CanBeDisabled} */ (
+      await fixture(html`<can-be-disabled></can-be-disabled>`)
+    );
+    const spy = sinon.spy();
+    el.addEventListener('click', spy);
+
+    el.click();
+
+    expect(spy.callCount).to.equal(1);
+
+    el.disabled = true;
+    el.click();
+    expect(spy.callCount).to.equal(1);
+
+    el.disabled = false;
+    el.click();
+    expect(spy.callCount).to.equal(2);
+  });
 });

package/components/core/test/SlotMixin.test.js

@@ -273,13 +273,13 @@ describe('SlotMixin', () => {
 
       el._focusableNode._buttonNode.focus();
 
-      expect(el._focusableNode.shadowRoot.activeElement).to.equal(el._focusableNode._buttonNode);
+      expect(isActiveElement(el._focusableNode._buttonNode, { deep: true })).to.be.true;
 
       el.currentValue = 1;
       await el.updateComplete;
 
       expect(isActiveElement(el._focusableNode)).to.be.true;
-      expect(el._focusableNode.shadowRoot.activeElement).to.equal(el._focusableNode._buttonNode);
+      expect(isActiveElement(el._focusableNode._buttonNode, { deep: true })).to.be.true;
     });
 
     it('allows for rerendering complex shadow root into slot as a direct child', async () => {
@@ -342,7 +342,7 @@ describe('SlotMixin', () => {
       await el.updateComplete;
 
       expect(isActiveElement(el._focusableNode)).to.be.true;
-      expect(el._focusableNode.shadowRoot.activeElement).to.equal(el._focusableNode._buttonNode);
+      expect(isActiveElement(el._focusableNode._buttonNode, { deep: true })).to.be.true;
     });
 
     describe('firstRenderOnConnected (for backwards compatibility)', () => {

package/components/form-core/test/FocusMixin.test.js

@@ -1,7 +1,9 @@
-import { LitElement } from 'lit';
 import { defineCE, expect, fixture, html, oneEvent, unsafeStatic } from '@open-wc/testing';
-import sinon from 'sinon';
 import { FocusMixin } from '@lion/ui/form-core.js';
+import { LitElement } from 'lit';
+import sinon from 'sinon';
+
+import { isActiveElement } from '../../core/test-helpers/isActiveElement.js';
 
 const windowWithOptionalPolyfill =
   /** @type {Window & typeof globalThis & {applyFocusVisiblePolyfill?: function}} */ (window);
@@ -84,9 +86,9 @@ describe('FocusMixin', () => {
     const { _focusableNode } = el;
 
     el.focus();
-    expect(document.activeElement === _focusableNode).to.be.true;
+    expect(isActiveElement(_focusableNode)).to.be.true;
     el.blur();
-    expect(document.activeElement === _focusableNode).to.be.false;
+    expect(isActiveElement(_focusableNode)).to.be.false;
   });
 
   it('has an attribute focused when focused', async () => {

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

@@ -51,7 +51,7 @@ export function runNativeTextFieldMixinSuite(customConfig) {
       expect(_inputNode.selectionEnd).to.equal(2);
     });
 
-    it('move focus to a next focusable element after writing some text', async () => {
+    it('moves focus to a next focusable element after writing some text', async () => {
       const el = /** @type {NativeTextFieldClass} */ (await fixture(html`<${tag}></${tag}>`));
       // @ts-ignore [allow-protected] in test
       const setValueAndPreserveCaretSpy = spy(el, '_setValueAndPreserveCaret');
@@ -59,12 +59,8 @@ export function runNativeTextFieldMixinSuite(customConfig) {
       await triggerFocusFor(el);
       await el.updateComplete;
       expect(isActiveElement(_inputNode)).to.be.true;
-      await sendKeys({
-        press: 'h',
-      });
-      await sendKeys({
-        press: 'Tab',
-      });
+      await sendKeys({ press: 'h' });
+      await sendKeys({ press: 'Tab' });
 
       expect(setValueAndPreserveCaretSpy.calledOnce).to.be.false;
 
@@ -73,7 +69,7 @@ export function runNativeTextFieldMixinSuite(customConfig) {
         return;
       }
 
-      expect(document.activeElement).to.not.equal(_inputNode);
+      expect(isActiveElement(_inputNode)).to.be.false;
     });
   });
 }

package/components/input-stepper/src/LionInputStepper.js

@@ -36,6 +36,9 @@ export class LionInputStepper extends LocalizeMixin(LionInput) {
         type: Number,
         reflect: true,
       },
+      valueTextMapping: {
+        type: Object,
+      },
       step: {
         type: Number,
         reflect: true,
@@ -66,6 +69,11 @@ export class LionInputStepper extends LocalizeMixin(LionInput) {
     this.formatter = formatNumber;
     this.min = Infinity;
     this.max = Infinity;
+    /**
+     * The aria-valuetext attribute defines the human-readable text alternative of aria-valuenow.
+     * @type {{[key: number]: string}}
+     */
+    this.valueTextMapping = {};
     this.step = 1;
     this.values = {
       max: this.max,
@@ -110,15 +118,29 @@ export class LionInputStepper extends LocalizeMixin(LionInput) {
     if (changedProperties.has('min')) {
       this._inputNode.min = `${this.min}`;
       this.values.min = this.min;
+      if (this.min !== Infinity) {
+        this.setAttribute('aria-valuemin', `${this.min}`);
+      } else {
+        this.removeAttribute('aria-valuemin');
+      }
       this.__toggleSpinnerButtonsState();
     }
 
     if (changedProperties.has('max')) {
       this._inputNode.max = `${this.max}`;
       this.values.max = this.max;
+      if (this.max !== Infinity) {
+        this.setAttribute('aria-valuemax', `${this.max}`);
+      } else {
+        this.removeAttribute('aria-valuemax');
+      }
       this.__toggleSpinnerButtonsState();
     }
 
+    if (changedProperties.has('valueTextMapping')) {
+      this._updateAriaAttributes();
+    }
+
     if (changedProperties.has('step')) {
       this._inputNode.step = `${this.step}`;
       this.values.step = this.step;
@@ -193,8 +215,8 @@ export class LionInputStepper extends LocalizeMixin(LionInput) {
    */
   __toggleSpinnerButtonsState() {
     const { min, max } = this.values;
-    const decrementButton = this.__getSlot('prefix');
-    const incrementButton = this.__getSlot('suffix');
+    const decrementButton = /** @type {HTMLButtonElement} */ (this.__getSlot('prefix'));
+    const incrementButton = /** @type {HTMLButtonElement} */ (this.__getSlot('suffix'));
     const disableIncrementor = this.currentValue >= max && max !== Infinity;
     const disableDecrementor = this.currentValue <= min && min !== Infinity;
     if (
@@ -205,7 +227,32 @@ export class LionInputStepper extends LocalizeMixin(LionInput) {
     }
     decrementButton[disableDecrementor ? 'setAttribute' : 'removeAttribute']('disabled', 'true');
     incrementButton[disableIncrementor ? 'setAttribute' : 'removeAttribute']('disabled', 'true');
-    this.setAttribute('aria-valuenow', `${this.currentValue}`);
+
+    this._updateAriaAttributes();
+  }
+
+  /**
+   * @protected
+   */
+  _updateAriaAttributes() {
+    const displayValue = this._inputNode.value;
+    if (displayValue) {
+      this.setAttribute('aria-valuenow', `${displayValue}`);
+      if (
+        Object.keys(this.valueTextMapping).length !== 0 &&
+        Object.keys(this.valueTextMapping).find(key => Number(key) === this.currentValue)
+      ) {
+        this.setAttribute('aria-valuetext', `${this.valueTextMapping[this.currentValue]}`);
+      } else {
+        // VoiceOver announces percentages once the valuemin or valuemax are used.
+        // This can be fixed by setting valuetext to the same value as valuenow
+        // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuenow
+        this.setAttribute('aria-valuetext', `${displayValue}`);
+      }
+    } else {
+      this.removeAttribute('aria-valuenow');
+      this.removeAttribute('aria-valuetext');
+    }
   }
 
   /**

package/components/input-stepper/test/lion-input-stepper.test.js

@@ -280,9 +280,68 @@ describe('<lion-input-stepper>', () => {
 
     it('updates aria-valuenow when stepper is changed', async () => {
       const el = await fixture(defaultInputStepper);
+      el.modelValue = 1;
+
+      await el.updateComplete;
+      expect(el.hasAttribute('aria-valuenow')).to.be.true;
+      expect(el.getAttribute('aria-valuenow')).to.equal('1');
+
+      el.modelValue = '';
+      await el.updateComplete;
+      expect(el.hasAttribute('aria-valuenow')).to.be.false;
+    });
+
+    it('updates aria-valuetext when stepper is changed', async () => {
+      // VoiceOver announces percentages once the valuemin or valuemax are used.
+      // This can be fixed by setting valuetext to the same value as valuenow
+      // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuenow
+      const el = await fixture(defaultInputStepper);
+      el.modelValue = 1;
+      await el.updateComplete;
+
+      expect(el.hasAttribute('aria-valuetext')).to.be.true;
+      expect(el.getAttribute('aria-valuetext')).to.equal('1');
+
+      el.modelValue = '';
+      await el.updateComplete;
+      expect(el.hasAttribute('aria-valuetext')).to.be.false;
+    });
+
+    it('can give aria-valuetext to override default value as a human-readable text alternative', async () => {
+      const values = {
+        1: 'first',
+        2: 'second',
+        3: 'third',
+      };
+      const el = await fixture(html`
+        <lion-input-stepper min="1" max="3" .valueTextMapping="${values}"></lion-input-stepper>
+      `);
+      el.modelValue = 1;
+      await el.updateComplete;
+      expect(el.hasAttribute('aria-valuetext')).to.be.true;
+      expect(el.getAttribute('aria-valuetext')).to.equal('first');
+    });
+
+    it('updates aria-valuemin when stepper is changed', async () => {
+      const el = await fixture(inputStepperWithAttrs);
+      const incrementButton = el.querySelector('[slot=suffix]');
+      incrementButton?.dispatchEvent(new Event('click'));
+      expect(el).to.have.attribute('aria-valuemin', '100');
+
+      el.min = 0;
+      await el.updateComplete;
+      expect(el).to.have.attribute('aria-valuemin', '0');
+    });
+
+    it('updates aria-valuemax when stepper is changed', async () => {
+      const el = await fixture(inputStepperWithAttrs);
       const incrementButton = el.querySelector('[slot=suffix]');
       incrementButton?.dispatchEvent(new Event('click'));
-      expect(el).to.have.attribute('aria-valuenow', '1');
+      expect(el).to.have.attribute('aria-valuemax', '200');
+
+      el.max = 1000;
+      await el.updateComplete;
+      expect(el).to.have.attribute('aria-valuemax', '1000');
     });
   });
 });

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

@@ -1,20 +1,22 @@
+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 { isActiveElement } from '../../core/test-helpers/isActiveElement.js';
 import { ScopedElementsMixin } from '../../core/src/ScopedElementsMixin.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) {
@@ -114,7 +116,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 +169,7 @@ 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;
     }
   });
 });

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/pagination/src/LionPagination.js

@@ -287,6 +287,7 @@ export class LionPagination extends LocalizeMixin(LitElement) {
               <button
                 aria-label="${this.msgLit('lion-pagination:page', { page })}"
                 aria-current=${page === this.current}
+                aria-live="${page === this.current ? 'polite' : 'off'}"
                 @click=${() => this.__fire(page)}
               >
                 ${page}

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

@@ -105,6 +105,22 @@ describe('Pagination', () => {
       expect(el.current).to.equal(2);
     });
 
+    it('should announce next and previous page using `next()` and `previous()`', async () => {
+      const el = await fixture(html` <lion-pagination count="6" current="2"></lion-pagination> `);
+      const buttons = Array.from(
+        /** @type {ShadowRoot} */ (el.shadowRoot).querySelectorAll('button'),
+      );
+      expect(buttons[2].getAttribute('aria-live')).to.equal('polite');
+      el.next();
+      await el.updateComplete;
+      expect(buttons[3].getAttribute('aria-live')).to.equal('polite');
+      expect(buttons[2].getAttribute('aria-live')).to.equal('off');
+      el.previous();
+      await el.updateComplete;
+      expect(buttons[3].getAttribute('aria-live')).to.equal('off');
+      expect(buttons[2].getAttribute('aria-live')).to.equal('polite');
+    });
+
     it('should goto next and previous page using `next()` and `previous()`', async () => {
       const el = await fixture(html` <lion-pagination count="6" current="2"></lion-pagination> `);
       el.next();

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', () => {