@lion/ui 0.8.8 → 0.9.1

package/components/combobox/src/LionCombobox.js

@@ -663,7 +663,11 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
     ) {
       return false;
     }
-    if (this.filled || this.showAllOnEmpty) {
+    if (
+      this.filled ||
+      this.showAllOnEmpty ||
+      (!this.filled && this.multipleChoice && this.__prevCboxValueNonSelected)
+    ) {
       return true;
     }
     // when no keyboard action involved (on focused change), return current opened state
@@ -705,7 +709,7 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
   // eslint-disable-next-line no-unused-vars
   _textboxOnInput(ev) {
     this.__shouldAutocompleteNextUpdate = true;
-    this.opened = true;
+    this.opened = this._showOverlayCondition({});
   }
 
   /**

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

@@ -931,6 +931,50 @@ describe('lion-combobox', () => {
       expect(el.opened).to.equal(false);
     });
 
+    it('does not flash the menu when _showOverlayCondition returns "false"', async () => {
+      class ComplexCombobox extends LionCombobox {
+        _showOverlayCondition() {
+          return false;
+        }
+      }
+
+      const tagName = defineCE(ComplexCombobox);
+      const tag = unsafeStatic(tagName);
+
+      const el = /** @type {LionCombobox} */ (
+        await fixture(html` 
+          <${tag} name="combo" label="Display only the label once selected">
+            <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
+            <lion-option .choiceValue="${'Chard'}">Chard</lion-option>
+            <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
+            <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
+          </${tag}>
+        `)
+      );
+
+      const dialog = el.shadowRoot?.querySelector('dialog');
+      /**
+       * hasDropdownFlashed is `true` if the menu was shown for a short period of time and then got closed
+       */
+      let hasDropdownFlashed = false;
+      const observer = new MutationObserver(mutationList => {
+        // eslint-disable-next-line no-unused-vars
+        for (const mutation of mutationList) {
+          if (dialog?.style.display === '') {
+            hasDropdownFlashed = true;
+          }
+        }
+      });
+      observer.observe(/** @type {Node} */ (dialog), { attributeFilter: ['style'] });
+
+      const { _inputNode } = getComboboxMembers(el);
+      _inputNode.focus();
+      await sendKeys({
+        type: 'art',
+      });
+      expect(hasDropdownFlashed).to.be.false;
+    });
+
     it('shows overlay on click when filled', async () => {
       const el = /** @type {LionCombobox} */ (
         await fixture(html`
@@ -1157,7 +1201,10 @@ describe('lion-combobox', () => {
         class ShowOverlayConditionCombobox extends LionCombobox {
           /** @param {{ currentValue: string, lastKey:string }} options */
           _showOverlayCondition(options) {
-            return options.currentValue.length > 3 && super._showOverlayCondition(options);
+            return (
+              // @ts-ignore
+              this.__prevCboxValueNonSelected.length > 3 && super._showOverlayCondition(options)
+            );
           }
         }
         const tagName = defineCE(ShowOverlayConditionCombobox);
@@ -1182,7 +1229,10 @@ describe('lion-combobox', () => {
         class ShowOverlayConditionCombobox extends LionCombobox {
           /** @param {{ currentValue: string, lastKey:string }} options */
           _showOverlayCondition(options) {
-            return options.currentValue.length > 3 && super._showOverlayCondition(options);
+            return (
+              // @ts-ignore
+              this.__prevCboxValueNonSelected.length > 3 && super._showOverlayCondition(options)
+            );
           }
         }
         const tagName = defineCE(ShowOverlayConditionCombobox);
@@ -1207,7 +1257,10 @@ describe('lion-combobox', () => {
         class ShowOverlayConditionCombobox extends LionCombobox {
           /** @param {{ currentValue: string, lastKey:string }} options */
           _showOverlayCondition(options) {
-            return options.currentValue.length > 3 && super._showOverlayCondition(options);
+            return (
+              // @ts-ignore
+              this.__prevCboxValueNonSelected.length > 3 && super._showOverlayCondition(options)
+            );
           }
         }
         const tagName = defineCE(ShowOverlayConditionCombobox);

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/form-integrations/test/form-integrations.test.js

@@ -48,7 +48,7 @@ describe('Form Integrations', () => {
       notifications: { value: '', checked: false },
       rsvp: '',
       tel: '',
-      'tel-dropdown': '+44',
+      'tel-dropdown': '',
       comments: '',
     });
   });
@@ -82,7 +82,7 @@ describe('Form Integrations', () => {
       notifications: '',
       rsvp: '',
       tel: '',
-      'tel-dropdown': '+44',
+      'tel-dropdown': '',
       comments: '',
     });
   });

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

@@ -1,3 +1,3 @@
 export default {
-  openDatepickerLabel: 'Selector de fecha abierta',
+  openDatepickerLabel: 'Abrir selector de fecha',
 };

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

@@ -21,6 +21,19 @@ export class LionInputStepper extends LocalizeMixin(LionInput) {
         .input-group__container > .input-group__input ::slotted(.form-control) {
           text-align: center;
         }
+
+        .input-stepper__value {
+          position: absolute;
+          width: 1px;
+          height: 1px;
+          overflow: hidden;
+          clip-path: inset(100%);
+          clip: rect(1px, 1px, 1px, 1px);
+          white-space: nowrap;
+          border: 0;
+          margin: 0;
+          padding: 0;
+        }
       `,
     ];
   }
@@ -36,6 +49,9 @@ export class LionInputStepper extends LocalizeMixin(LionInput) {
         type: Number,
         reflect: true,
       },
+      valueTextMapping: {
+        type: Object,
+      },
       step: {
         type: Number,
         reflect: true,
@@ -66,6 +82,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,
@@ -75,7 +96,8 @@ export class LionInputStepper extends LocalizeMixin(LionInput) {
 
     this.__increment = this.__increment.bind(this);
     this.__decrement = this.__decrement.bind(this);
-    this.__boundOnLeaveButton = this._onLeaveButton.bind(this);
+    this._onEnterButton = this._onEnterButton.bind(this);
+    this._onLeaveButton = this._onLeaveButton.bind(this);
   }
 
   connectedCallback() {
@@ -85,11 +107,12 @@ export class LionInputStepper extends LocalizeMixin(LionInput) {
       min: this.min,
       step: this.step,
     };
-
-    this.role = 'spinbutton';
+    if (this._inputNode) {
+      this._inputNode.role = 'spinbutton';
+      this._inputNode.setAttribute('inputmode', 'decimal');
+      this._inputNode.setAttribute('autocomplete', 'off');
+    }
     this.addEventListener('keydown', this.__keyDownHandler);
-    this._inputNode.setAttribute('inputmode', 'decimal');
-    this._inputNode.setAttribute('autocomplete', 'off');
     this.__setDefaultValidators();
     this.__toggleSpinnerButtonsState();
   }
@@ -110,27 +133,33 @@ 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._inputNode.setAttribute('aria-valuemin', `${this.min}`);
+      } else {
+        this._inputNode.removeAttribute('aria-valuemin');
+      }
       this.__toggleSpinnerButtonsState();
     }
 
     if (changedProperties.has('max')) {
       this._inputNode.max = `${this.max}`;
       this.values.max = this.max;
+      if (this.max !== Infinity) {
+        this._inputNode.setAttribute('aria-valuemax', `${this.max}`);
+      } else {
+        this._inputNode.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;
     }
-
-    if (changedProperties.has('_ariaLabelledNodes')) {
-      this.__reflectAriaAttrToSpinButton('aria-labelledby', this._ariaLabelledNodes);
-    }
-
-    if (changedProperties.has('_ariaDescribedNodes')) {
-      this.__reflectAriaAttrToSpinButton('aria-describedby', this._ariaDescribedNodes);
-    }
   }
 
   get slots() {
@@ -141,22 +170,6 @@ export class LionInputStepper extends LocalizeMixin(LionInput) {
     };
   }
 
-  /**
-   * Based on FormControlMixin __reflectAriaAttr()
-   *
-   * Will handle help text, validation feedback and character counter,
-   * prefix/suffix/before/after (if they contain data-description flag attr).
-   * Also, contents of id references that will be put in the <lion-field>._ariaDescribedby property
-   * from an external context, will be read by a screen reader.
-   * @param {string} attrName
-   * @param {Element[]} nodes
-   * @private
-   */
-  __reflectAriaAttrToSpinButton(attrName, nodes) {
-    const string = nodes.map(n => n.id).join(' ');
-    this.setAttribute(attrName, string);
-  }
-
   /**
    * Set aria labels and apply validators
    * @private
@@ -193,8 +206,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 +218,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._inputNode.setAttribute('aria-valuenow', `${displayValue}`);
+      if (
+        Object.keys(this.valueTextMapping).length !== 0 &&
+        Object.keys(this.valueTextMapping).find(key => Number(key) === this.currentValue)
+      ) {
+        this.__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.__valueText = displayValue;
+      }
+      this._inputNode.setAttribute('aria-valuetext', `${this.__valueText}`);
+    } else {
+      this._inputNode.removeAttribute('aria-valuenow');
+      this._inputNode.removeAttribute('aria-valuetext');
+    }
   }
 
   /**
@@ -326,7 +364,8 @@ export class LionInputStepper extends LocalizeMixin(LionInput) {
       <button
         ?disabled=${this.disabled || this.readOnly}
         @click=${this.__decrement}
-        @blur=${this.__boundOnLeaveButton}
+        @focus=${this._onEnterButton}
+        @blur=${this._onLeaveButton}
         type="button"
         aria-label="${this.msgLit('lion-input-stepper:decrease')}"
       >
@@ -345,7 +384,8 @@ export class LionInputStepper extends LocalizeMixin(LionInput) {
       <button
         ?disabled=${this.disabled || this.readOnly}
         @click=${this.__increment}
-        @blur=${this.__boundOnLeaveButton}
+        @focus=${this._onEnterButton}
+        @blur=${this._onLeaveButton}
         type="button"
         aria-label="${this.msgLit('lion-input-stepper:increase')}"
       >
@@ -354,6 +394,33 @@ export class LionInputStepper extends LocalizeMixin(LionInput) {
     `;
   }
 
+  /** @protected */
+  _inputGroupTemplate() {
+    return html`
+      <div class="input-stepper__value">${this.__valueText}</div>
+      <div class="input-group">
+        ${this._inputGroupBeforeTemplate()}
+        <div class="input-group__container">
+          ${this._inputGroupPrefixTemplate()} ${this._inputGroupInputTemplate()}
+          ${this._inputGroupSuffixTemplate()}
+        </div>
+        ${this._inputGroupAfterTemplate()}
+      </div>
+    `;
+  }
+
+  /**
+   * @protected
+   * @param {Event} ev
+   */
+  // eslint-disable-next-line no-unused-vars
+  _onEnterButton(ev) {
+    const valueNode = /** @type {HTMLElement} */ (
+      this.shadowRoot?.querySelector('.input-stepper__value')
+    );
+    valueNode.setAttribute('aria-live', 'assertive');
+  }
+
   /**
    * Redispatch leave event on host when catching leave event
    * on the incrementor and decrementor button.
@@ -363,8 +430,16 @@ export class LionInputStepper extends LocalizeMixin(LionInput) {
    *
    * Interacting with the buttons is "user interactions"
    * the same way as focusing + blurring the field (native input)
+   *
+   * @protected
+   * @param {Event} ev
    */
-  _onLeaveButton() {
+  // eslint-disable-next-line no-unused-vars
+  _onLeaveButton(ev) {
+    const valueNode = /** @type {HTMLElement} */ (
+      this.shadowRoot?.querySelector('.input-stepper__value')
+    );
+    valueNode.removeAttribute('aria-live');
     this.dispatchEvent(new Event(this._leaveEvent));
   }
 }

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

@@ -278,11 +278,106 @@ describe('<lion-input-stepper>', () => {
       await expect(el).to.be.accessible();
     });
 
+    it('has role="spinbutton"', async () => {
+      const el = await fixture(defaultInputStepper);
+      expect(el._inputNode.hasAttribute('role')).to.be.true;
+      expect(el._inputNode.getAttribute('role')).to.equal('spinbutton');
+    });
+
     it('updates aria-valuenow when stepper is changed', async () => {
       const el = await fixture(defaultInputStepper);
+      el.modelValue = 1;
+
+      await el.updateComplete;
+      expect(el._inputNode.hasAttribute('aria-valuenow')).to.be.true;
+      expect(el._inputNode.getAttribute('aria-valuenow')).to.equal('1');
+
+      el.modelValue = '';
+      await el.updateComplete;
+      expect(el._inputNode.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._inputNode.hasAttribute('aria-valuetext')).to.be.true;
+      expect(el._inputNode.getAttribute('aria-valuetext')).to.equal('1');
+
+      el.modelValue = '';
+      await el.updateComplete;
+      expect(el._inputNode.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._inputNode.hasAttribute('aria-valuetext')).to.be.true;
+      expect(el._inputNode.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-valuenow', '1');
+      expect(el._inputNode.hasAttribute('aria-valuemin')).to.be.true;
+      expect(el._inputNode.getAttribute('aria-valuemin')).to.equal('100');
+
+      el.min = 0;
+      await el.updateComplete;
+      expect(el._inputNode.hasAttribute('aria-valuemin')).to.be.true;
+      expect(el._inputNode.getAttribute('aria-valuemin')).to.equal('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._inputNode.hasAttribute('aria-valuemax')).to.be.true;
+      expect(el._inputNode.getAttribute('aria-valuemax')).to.equal('200');
+
+      el.max = 1000;
+      await el.updateComplete;
+      expect(el._inputNode.hasAttribute('aria-valuemax')).to.be.true;
+      expect(el._inputNode.getAttribute('aria-valuemax')).to.equal('1000');
+    });
+
+    it('when decrease button gets focus, it sets aria-live to input-stepper__value', async () => {
+      const el = await fixture(inputStepperWithAttrs);
+      const stepperValue = el.shadowRoot?.querySelector('.input-stepper__value');
+      const decrementButton = el.querySelector('[slot=prefix]');
+
+      decrementButton?.dispatchEvent(new Event('focus'));
+      expect(stepperValue?.hasAttribute('aria-live')).to.be.true;
+      expect(stepperValue?.getAttribute('aria-live')).to.equal('assertive');
+
+      decrementButton?.dispatchEvent(new Event('blur'));
+      expect(stepperValue?.hasAttribute('aria-live')).to.be.false;
+    });
+
+    it('when increase button gets focus, it sets aria-live to input-stepper__value', async () => {
+      const el = await fixture(inputStepperWithAttrs);
+      const stepperValue = el.shadowRoot?.querySelector('.input-stepper__value');
+      const incrementButton = el.querySelector('[slot=suffix]');
+
+      incrementButton?.dispatchEvent(new Event('focus'));
+      expect(stepperValue?.hasAttribute('aria-live')).to.be.true;
+      expect(stepperValue?.getAttribute('aria-live')).to.equal('assertive');
+
+      incrementButton?.dispatchEvent(new Event('blur'));
+      expect(stepperValue?.hasAttribute('aria-live')).to.be.false;
     });
   });
 });

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

@@ -158,11 +158,11 @@ export class LionInputTelDropdown extends LionInputTel {
     super.styles,
     css`
       /**
-           * We need to align the height of the dropdown with the height of the text field.
-           * We target the HTMLDivElement (render wrapper from SlotMixin) here. Its child,
-           * [data-ref=dropdown], recieves a 100% height as well via inline styles (since we
-           * can't target from shadow styles).
-           */
+       * We need to align the height of the dropdown with the height of the text field.
+       * We target the HTMLDivElement (render wrapper from SlotMixin) here. Its child,
+       * [data-ref=dropdown], receives a 100% height as well via inline styles (since we
+       * can't target from shadow styles).
+       */
       ::slotted([slot='prefix']) {
         height: 100%;
       }
@@ -301,7 +301,8 @@ export class LionInputTelDropdown extends LionInputTel {
       } else {
         this.__initializedRegionCode = `+${countryCode}`;
       }
-      this.modelValue = this.__initializedRegionCode;
+      // on init we set the value to the _inputNode and not the modelValue to prevent validation
+      this._inputNode.value = this.__initializedRegionCode;
       this._initialModelValue = this.__initializedRegionCode;
       this.initInteractionState();
     }