@lion/ui 0.20.0 → 0.21.0

package/components/form-core/src/FormatMixin.js

@@ -73,7 +73,7 @@ const FormatMixinImplementation = superclass =>
     /**
      * During format/parse, we sometimes need to know how the current viewValue the user
      * interacts with "came to be". Was it already formatted before for instance?
-     * If so, in case of an amount input, we might want to stick to the curent interpretation of separators.
+     * If so, in case of an amount input, we might want to stick to the current interpretation of separators.
      */
     #viewValueState = {
       didFormatterOutputSyncToView: false,
@@ -124,13 +124,19 @@ const FormatMixinImplementation = superclass =>
       }
     }
 
+    get _isEditingTextField() {
+      // For backward compatibility. Ideally we check whether the input is focused,
+      // like we do in "hybrid" (picker + textbox) components like datepicker
+      return this._isHandlingUserInput;
+    }
+
     /**
      * Preprocessors could be considered 'live formatters'. Their result is shown to the user
      * on keyup instead of after blurring the field. The biggest difference between preprocessors
      * and formatters is their moment of execution: preprocessors are run before modelValue is
      * computed (and work based on view value), whereas formatters are run after the parser (and
      * are based on modelValue)
-     * Automatically formats code while typing. It depends on a preprocessro that smartly
+     * Automatically formats code while typing. It depends on a preprocessor that smartly
      * updates the viewValue and caret position for best UX.
      * @example
      * ```js
@@ -283,15 +289,14 @@ const FormatMixinImplementation = superclass =>
       // - Why check for this.hasError?
       // We only want to format values that are considered valid. For best UX,
       // we only 'reward' valid inputs.
-      // - Why check for _isHandlingUserInput?
+      // - Why check for _isEditingTextField?
       // Downwards sync is prevented whenever we are in an `@user-input-changed` flow, [2].
       // If we are in a 'imperatively set `.modelValue`' flow, [1], we want to reflect back
       // the value, no matter what.
       // This means, whenever we are in hasError and modelValue is set
       // imperatively, we DO want to format a value (it is the only way to get meaningful
       // input into `._inputNode` with modelValue as input)
-
-      if (this._isHandlingUserInput && this.hasFeedbackFor?.includes('error') && this._inputNode) {
+      if (this._isEditingTextField && this.hasFeedbackFor?.includes('error') && this._inputNode) {
         return this.value;
       }
 

package/components/form-core/test-helpers/mimicUserInput.js

@@ -12,5 +12,6 @@ export function mimicUserInput(formControl, newViewValue, { caretIndex } = {}) {
     // eslint-disable-next-line no-param-reassign
     formControl._inputNode.selectionEnd = caretIndex;
   }
+  formControl._inputNode.focus();
   formControl._inputNode.dispatchEvent(new Event('input', { bubbles: true }));
 }

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

@@ -44,6 +44,8 @@ class FormatClass extends FormatMixin(LitElement) {
  * @property {(el: FormatClass) => any} [getExpectedInitialModelValue] - Optional. Expected initial modelValue state when element is created without a value. If not provided, defaults will be generated based on modelValueType.
  * @property {(el: FormatClass) => any} [getExpectedInitialFormattedValue] - Optional. Expected initial formattedValue state when element is created without a value. If not provided, defaults will be generated based on modelValueType.
  * @property {(el: FormatClass) => any} [getExpectedInitialSerializedValue] - Optional. Expected initial serializedValue state when element is created without a value. If not provided, defaults will be generated based on modelValueType.
+ * @property {(el: FormatClass) => any} [getExpectedModelValueForEmptyInputNode] - Optional. Expected modelValue after user clears the input node value. Defaults to empty string.
+ * @property {(value: string, opts?: any) => any} [parser] - Optional. Parser override used by tests. When provided, it is applied before connectedCallback so fallback init sync uses it.
  * @property {number} [valueChangeCounterOffset] - Optional. Offset for model-value-changed event counter. Use 0 for most types, 1 for Date types where parseDate() creates new objects. If not provided, defaults will be generated based on modelValueType.
  */
 
@@ -180,6 +182,10 @@ export function runFormatMixinSuite(customConfig) {
   const getExpectedInitialSerializedValue =
     cfg.getExpectedInitialSerializedValue ||
     createDefaultGetExpectedInitialSerializedValue(cfg.modelValueType);
+  const getExpectedModelValueForEmptyInputNode =
+    cfg.getExpectedModelValueForEmptyInputNode || (() => '');
+  const defaultParser = (/** @type {string} */ value) => value.replace('foo: ', '');
+  const parser = cfg.parser || defaultParser;
   const valueChangeCounterOffset =
     cfg.valueChangeCounterOffset !== undefined
       ? cfg.valueChangeCounterOffset
@@ -225,6 +231,13 @@ export function runFormatMixinSuite(customConfig) {
     return getExpectedInitialSerializedValue(el);
   }
 
+  /**
+   * @param {FormatClass} el
+   */
+  function generateExpectedModelValueForEmptyInputNode(el) {
+    return getExpectedModelValueForEmptyInputNode(el);
+  }
+
   /**
    * @param {any} actual
    * @param {any} expected
@@ -253,7 +266,7 @@ export function runFormatMixinSuite(customConfig) {
       fooFormat = await fixture(html`
         <${tag}
           .formatter="${/** @param {string} value */ value => `foo: ${value}`}"
-          .parser="${/** @param {string} value */ value => value.replace('foo: ', '')}"
+          .parser="${parser}"
           .serializer="${/** @param {string} value */ value => `[foo] ${value}`}"
           .deserializer="${/** @param {string} value */ value => value.replace('[foo] ', '')}"
         >
@@ -368,7 +381,7 @@ export function runFormatMixinSuite(customConfig) {
           <${tag}
             value="string"
             .formatter=${/** @param {string} value */ value => `foo: ${value}`}
-            .parser=${/** @param {string} value */ value => value.replace('foo: ', '')}
+            .parser=${parser}
             .serializer=${/** @param {string} value */ value => `[foo] ${value}`}
             .deserializer=${/** @param {string} value */ value => value.replace('[foo] ', '')}
           >
@@ -378,12 +391,14 @@ export function runFormatMixinSuite(customConfig) {
         );
         // Now check if the format/parse/serialize loop has been triggered
         await formatElem.updateComplete;
-        expect(formatElem.formattedValue).to.equal('foo: string');
+        const expectedFormattedValue = `foo: ${formatElem.modelValue}`;
+        const expectedSerializedValue = `[foo] ${formatElem.modelValue}`;
+
+        expect(formatElem.formattedValue).to.equal(expectedFormattedValue);
 
-        expect(formatElem._inputNode.value).to.equal('foo: string');
+        expect(formatElem._inputNode.value).to.equal(expectedFormattedValue);
 
-        expect(formatElem.serializedValue).to.equal('[foo] string');
-        expect(formatElem.modelValue).to.equal('string');
+        expect(formatElem.serializedValue).to.equal(expectedSerializedValue);
       });
 
       describe('Unparseable values', () => {
@@ -445,9 +460,11 @@ export function runFormatMixinSuite(customConfig) {
           );
           // This could happen when the user erases the input value
           mimicUserInput(el, '');
-          // For backwards compatibility, we keep the modelValue an empty string here.
-          // Undefined would be more appropriate 'conceptually', however
-          expect(el.modelValue).to.equal('');
+          expectValue(
+            el.modelValue,
+            generateExpectedModelValueForEmptyInputNode(el),
+            'modelValue after clearing input node value',
+          );
         });
       });
     });
@@ -794,13 +811,13 @@ export function runFormatMixinSuite(customConfig) {
         `)
           );
 
-          expect(parserSpy.callCount).to.equal(1);
+          const initialParserCallCount = parserSpy.callCount;
           // This could happen for instance in a reset
           el.modelValue = undefined;
-          expect(parserSpy.callCount).to.equal(1);
+          expect(parserSpy.callCount).to.equal(initialParserCallCount);
           // This could happen when the user erases the input value
           mimicUserInput(el, '');
-          expect(parserSpy.callCount).to.equal(1);
+          expect(parserSpy.callCount).to.equal(initialParserCallCount);
         });
       });
 
@@ -824,12 +841,12 @@ export function runFormatMixinSuite(customConfig) {
 
           const { _inputNode } = getFormControlMembers(el);
 
-          expect(preprocessorSpy.callCount).to.equal(1);
+          const initialPreprocessorCallCount = preprocessorSpy.callCount;
 
           const parserSpy = sinon.spy(el, 'parser');
           mimicUserInput(el, toBeCorrectedVal);
 
-          expect(preprocessorSpy.callCount).to.equal(2);
+          expect(preprocessorSpy.callCount).to.equal(initialPreprocessorCallCount + 1);
           expect(parserSpy.lastCall.args[0]).to.equal(val);
           expect(_inputNode.value).to.equal(val);
         });

package/components/input-amount-dropdown/src/LionInputAmountDropdown.js

@@ -73,12 +73,48 @@ export class LionInputAmountDropdown extends LionInputAmount {
    * @configure LitElement
    * @type {any}
    */
-  static properties = {
-    modelValue: { type: Object, hasChanged: hasChangedAmountDropdownModelValue },
-    preferredCurrencies: { type: Array },
-    allowedCurrencies: { type: Array },
-    __dropdownSlot: { type: String },
-  };
+  static get properties() {
+    return {
+      modelValue: {
+        type: Object,
+        attribute: false,
+        hasChanged: hasChangedAmountDropdownModelValue,
+      },
+      preferredCurrencies: { type: Array },
+      allowedCurrencies: { type: Array },
+      __dropdownSlot: { type: String },
+    };
+  }
+
+  /**
+   * The internal modelValue is a combination of the amount and the currency code. The amount is a number, the currency code is a string.
+   * @private
+   * @type {import('../types/index.js').AmountDropdownModelValue}
+   */
+  __modelValue;
+
+  /**
+   * For a FormControl to function properly, its modelValue, serializedValue and  viewValue/formattedValue
+   * should always translate in two directions. This is expected by `_callParser` method. It guards for empty
+   * viewValues. As the viewValue (`.value`) only concerns the amount part and not the currency part in
+   * InputAmountDropdown, this contract is broken.
+   * Below, we compensate for this.
+   */
+  // @ts-expect-error - modelValue is overridden as an accessor but is defined as a property in parent class
+  set modelValue(value) {
+    if (value) {
+      this.__modelValue = /** @type {import('../types/index.js').AmountDropdownModelValue} */ (
+        value
+      );
+      // Below is needed because A1 and A2 in _callParser (FormatMixin) return values that are the wrong type.
+    } else {
+      this.__modelValue = { currency: this.currency, amount: '' };
+    }
+  }
+
+  get modelValue() {
+    return /** @type {import('../types/index.js').AmountDropdownModelValue} */ (this.__modelValue);
+  }
 
   static localizeNamespaces = [
     { 'lion-input-amount-dropdown': localizeNamespaceLoader },
@@ -292,6 +328,9 @@ export class LionInputAmountDropdown extends LionInputAmount {
 
     this.parser = parseAmount;
 
+    /** @type {import('../types/index.js').AmountDropdownModelValue} */
+    this.__modelValue = { currency: this.currency, amount: '' };
+
     /**
      * @param {import("../types/index.js").AmountDropdownModelValue} modelValue
      * @param {import('../../localize/types/LocalizeMixinTypes.js').FormatNumberOptions} [givenOptions] Locale Options
@@ -406,7 +445,8 @@ export class LionInputAmountDropdown extends LionInputAmount {
    * @protected
    */
   _initModelValueBasedOnDropdown() {
-    if (!this._initialModelValue && !this.dirty) {
+    const { currency, amount } = this._initialModelValue || {};
+    if (!currency && !amount && !this.dirty) {
       this.__initializedCurrencyCode = this.currency;
       this._initialModelValue = { currency: this.currency };
       this.modelValue = this._initialModelValue;
@@ -533,7 +573,10 @@ export class LionInputAmountDropdown extends LionInputAmount {
     }
 
     // 2. Try to get the currency from user input
-    if (this.modelValue?.currency && this.allowedCurrencies?.includes(this.modelValue?.currency)) {
+    if (
+      this.modelValue?.currency &&
+      this.allowedCurrencies?.includes(/** @type {CurrencyCode} */ (this.modelValue?.currency))
+    ) {
       this.currency = this.modelValue.currency;
       return;
     }

package/components/input-amount-dropdown/test/lion-input-amount-dropdown-integrations.test.js

@@ -8,6 +8,7 @@ describe('<lion-input-amount-dropdown> integrations', () => {
   runFormatMixinSuite({
     tagString,
     modelValueType: Object,
+    parser: value => value.replace('foo: ', ''),
     valueToggler: ({ toggleValue, viewValue }) => {
       if (viewValue) {
         return !toggleValue ? '123' : '456';
@@ -17,6 +18,10 @@ describe('<lion-input-amount-dropdown> integrations', () => {
     getExpectedInitialModelValue: el => ({ currency: /** @type {any} */ (el).currency }),
     getExpectedInitialFormattedValue: el => ({ currency: /** @type {any} */ (el).currency }),
     getExpectedInitialSerializedValue: el => ({ currency: /** @type {any} */ (el).currency }),
+    getExpectedModelValueForEmptyInputNode: el => ({
+      currency: /** @type {any} */ (el).currency,
+      amount: '',
+    }),
     valueChangeCounterOffset: 0,
   });
 });

package/components/input-amount-dropdown/test-suites/LionInputAmountDropdown.suite.js

@@ -392,6 +392,7 @@ export function runInputAmountDropdownSuite({ klass } = { klass: LionInputAmount
       // @ts-ignore
       expect(el._isEmpty(), 'missing amount property').to.be.true;
 
+      // @ts-ignore
       el.modelValue = null;
       await el.updateComplete;
       // @ts-ignore

package/components/input-datepicker/src/LionInputDatepicker.js

@@ -130,6 +130,10 @@ export class LionInputDatepicker extends ScopedElementsMixin(
     );
   }
 
+  get _isEditingTextField() {
+    return this.focused && this._isHandlingUserInput;
+  }
+
   constructor() {
     super();
     /** @private */

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

@@ -3,8 +3,10 @@ import { html, LitElement } from 'lit';
 import { IsDateDisabled, MaxDate, MinDate, MinMaxDate } from '@lion/ui/form-core.js';
 import { aTimeout, defineCE, expect, fixture as _fixture, nextFrame } from '@open-wc/testing';
 import { mimicClick } from '@lion/ui/overlays-test-helpers.js';
+import { parseDate } from '@lion/ui/localize.js';
 import sinon from 'sinon';
 import { sendKeys, setViewport } from '@web/test-runner-commands';
+import { AlwaysInvalid } from '@lion/ui/form-core-test-helpers.js';
 import { DatepickerInputObject } from '@lion/ui/input-datepicker-test-helpers.js';
 import { LionInputDatepicker } from '@lion/ui/input-datepicker.js';
 
@@ -455,6 +457,59 @@ describe('<lion-input-datepicker>', () => {
         expect(el.validationStates.error).to.have.property('IsDate');
       });
 
+      it('syncs view value from calendar if custom validator is in error state', async () => {
+        const el = await fixture(html`
+          <lion-input-datepicker .validators=${[new AlwaysInvalid()]}></lion-input-datepicker>
+        `);
+
+        const elObj = new DatepickerInputObject(el);
+        await elObj.openCalendar();
+        await elObj.selectMonthDay(12);
+        await el.updateComplete; // safari take a little longer
+
+        expect(el.hasFeedbackFor).to.include('error');
+        expect(el.validationStates).to.have.property('error');
+        expect(el.validationStates.error).to.have.property('AlwaysInvalid');
+        expect(isSameDate(/** @type {Date} */ (parseDate(el.value)), elObj.calendarEl.selectedDate))
+          .to.be.true;
+        expect(
+          isSameDate(
+            // @ts-ignore [allow-protected] in test
+            /** @type {Date} */ (parseDate(el._inputNode.value)),
+            elObj.calendarEl.selectedDate,
+          ),
+        ).to.be.true;
+      });
+
+      it('syncs view value from calendar if custom validator is in error state, when there was a previous modelValue', async () => {
+        const modelValue = new Date('2022/12/30');
+        const el = await fixture(html`
+          <lion-input-datepicker
+            .modelValue="${modelValue}"
+            .validators=${[new AlwaysInvalid()]}
+          ></lion-input-datepicker>
+        `);
+        expect(isSameDate(/** @type {Date} */ (parseDate(el.value)), modelValue)).to.be.true;
+
+        const elObj = new DatepickerInputObject(el);
+        await elObj.openCalendar();
+        await elObj.selectMonthDay(12);
+        await el.updateComplete; // safari take a little longer
+
+        expect(el.hasFeedbackFor).to.include('error');
+        expect(el.validationStates).to.have.property('error');
+        expect(el.validationStates.error).to.have.property('AlwaysInvalid');
+        expect(isSameDate(/** @type {Date} */ (parseDate(el.value)), elObj.calendarEl.selectedDate))
+          .to.be.true;
+        expect(
+          isSameDate(
+            // @ts-ignore [allow-protected] in test
+            /** @type {Date} */ (parseDate(el._inputNode.value)),
+            elObj.calendarEl.selectedDate,
+          ),
+        ).to.be.true;
+      });
+
       /**
        * Not in scope:
        * - min/max attr (like platform has): could be added in future if observers needed

package/components/input-range/src/LionInputRange.js

@@ -38,6 +38,14 @@ export class LionInputRange extends LocalizeMixin(LionInput) {
         type: Boolean,
         attribute: 'no-min-max-labels',
       },
+      minLabel: {
+        type: String,
+        attribute: 'min-label',
+      },
+      maxLabel: {
+        type: String,
+        attribute: 'max-label',
+      },
     };
   }
 
@@ -84,6 +92,25 @@ export class LionInputRange extends LocalizeMixin(LionInput) {
     return /** @type {HTMLInputElement} */ (super._inputNode);
   }
 
+  /**
+   * Get the display info for the current value
+   * @protected
+   * @returns {{ text: string, showUnit: boolean }}
+   */
+  get _valueDisplay() {
+    const currentValue = parseFloat(/** @type {string} */ (this.formattedValue));
+
+    if (this.minLabel && currentValue === this.min) {
+      return { text: this.minLabel, showUnit: false };
+    }
+
+    if (this.maxLabel && currentValue === this.max) {
+      return { text: this.maxLabel, showUnit: false };
+    }
+
+    return { text: formatNumber(currentValue), showUnit: true };
+  }
+
   constructor() {
     super();
     /** @type {ScopedStylesController} */
@@ -94,6 +121,8 @@ export class LionInputRange extends LocalizeMixin(LionInput) {
     this.unit = '';
     this.type = 'range';
     this.noMinMaxLabels = false;
+    this.minLabel = '';
+    this.maxLabel = '';
     /**
      * @param {string} modelValue
      */
@@ -115,6 +144,16 @@ export class LionInputRange extends LocalizeMixin(LionInput) {
     if (changedProperties.has('step')) {
       this._inputNode.step = `${this.step}`;
     }
+
+    if (changedProperties.has('modelValue')) {
+      if (this.minLabel && this.modelValue === this.min) {
+        this._inputNode.setAttribute('aria-valuetext', `${this.minLabel}`);
+      } else if (this.maxLabel && this.modelValue === this.max) {
+        this._inputNode.setAttribute('aria-valuetext', `${this.maxLabel}`);
+      } else {
+        this._inputNode.removeAttribute('aria-valuetext');
+      }
+    }
   }
 
   /** @param {import('lit').PropertyValues } changedProperties */
@@ -130,12 +169,12 @@ export class LionInputRange extends LocalizeMixin(LionInput) {
 
   /** @protected */
   _inputGroupTemplate() {
+    const display = this._valueDisplay;
+
     return html`
       <div>
-        <span class="input-range__value"
-          >${formatNumber(parseFloat(/** @type {string} */ (this.formattedValue)))}</span
-        >
-        <span class="input-range__unit">${this.unit}</span>
+        <span class="input-range__value">${display.text}</span>
+        ${display.showUnit ? html`<span class="input-range__unit">${this.unit}</span>` : ''}
       </div>
       <div class="input-group">
         ${this._inputGroupBeforeTemplate()}
@@ -157,12 +196,16 @@ export class LionInputRange extends LocalizeMixin(LionInput) {
           ? html`
               <div class="input-range__limits">
                 <div>
-                  <span class="sr-only">${this.msgLit('lion-input-range:minimum')} </span
-                  >${formatNumber(this.min)}
+                  <span class="sr-only">${this.msgLit('lion-input-range:minimum')} </span>${this
+                    .minLabel
+                    ? this.minLabel
+                    : formatNumber(this.min)}
                 </div>
                 <div>
-                  <span class="sr-only">${this.msgLit('lion-input-range:maximum')} </span
-                  >${formatNumber(this.max)}
+                  <span class="sr-only">${this.msgLit('lion-input-range:maximum')} </span>${this
+                    .maxLabel
+                    ? this.maxLabel
+                    : formatNumber(this.max)}
                 </div>
               </div>
             `

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

@@ -84,4 +84,118 @@ describe('<lion-input-range>', () => {
     const el = await fixture(`<lion-input-range label="range" disabled></lion-input-range>`);
     await expect(el).to.be.accessible();
   });
+
+  describe('Custom min/max labels', () => {
+    it('displays custom minLabel in the limits when provided', async () => {
+      const el = await fixture(html`
+        <lion-input-range min="0" max="100" min-label="Low" .modelValue=${50}></lion-input-range>
+      `);
+      const minDiv = /** @type {HTMLElement} */ (
+        /** @type {ShadowRoot} */ (el.shadowRoot).querySelectorAll('.input-range__limits > div')[0]
+      );
+      expect(minDiv.textContent?.trim()).to.equal('Minimum Low');
+    });
+
+    it('displays custom maxLabel in the limits when provided', async () => {
+      const el = await fixture(html`
+        <lion-input-range min="0" max="100" max-label="High" .modelValue=${50}></lion-input-range>
+      `);
+      const maxDiv = /** @type {HTMLElement} */ (
+        /** @type {ShadowRoot} */ (el.shadowRoot).querySelectorAll('.input-range__limits > div')[1]
+      );
+      expect(maxDiv.textContent?.trim()).to.equal('Maximum High');
+    });
+
+    it('displays custom minLabel as value display when value equals min', async () => {
+      const el = await fixture(html`
+        <lion-input-range min="0" max="100" min-label="Low" .modelValue=${0}></lion-input-range>
+      `);
+      const valueSpan = /** @type {HTMLElement} */ (
+        /** @type {ShadowRoot} */ (el.shadowRoot).querySelector('.input-range__value')
+      );
+      expect(valueSpan.innerText).to.equal('Low');
+    });
+
+    it('displays custom maxLabel as value display when value equals max', async () => {
+      const el = await fixture(html`
+        <lion-input-range min="0" max="100" max-label="High" .modelValue=${100}></lion-input-range>
+      `);
+      const valueSpan = /** @type {HTMLElement} */ (
+        /** @type {ShadowRoot} */ (el.shadowRoot).querySelector('.input-range__value')
+      );
+      expect(valueSpan.innerText).to.equal('High');
+    });
+
+    it('displays formatted number when value is between min and max', async () => {
+      const el = await fixture(html`
+        <lion-input-range
+          min="0"
+          max="100"
+          min-label="Low"
+          max-label="High"
+          .modelValue=${50}
+        ></lion-input-range>
+      `);
+      const valueSpan = /** @type {HTMLElement} */ (
+        /** @type {ShadowRoot} */ (el.shadowRoot).querySelector('.input-range__value')
+      );
+      expect(valueSpan.innerText).to.equal('50');
+    });
+
+    it('maintains numeric modelValue even when displaying custom label', async () => {
+      const el = await fixture(html`
+        <lion-input-range min="0" max="100" min-label="Low" .modelValue=${0}></lion-input-range>
+      `);
+      const valueSpan = /** @type {HTMLElement} */ (
+        /** @type {ShadowRoot} */ (el.shadowRoot).querySelector('.input-range__value')
+      );
+      // Display shows custom label
+      expect(valueSpan.innerText).to.equal('Low');
+      // But modelValue is still the number
+      expect(el.modelValue).to.equal(0);
+      expect(typeof el.modelValue).to.equal('number');
+    });
+
+    it('sets aria-valuetext to minLabel when modelValue equals min', async () => {
+      const el = await fixture(html`
+        <lion-input-range min="0" max="100" min-label="Low" .modelValue=${50}></lion-input-range>
+      `);
+
+      el.modelValue = 0;
+      await nextFrame();
+
+      expect(el._inputNode.getAttribute('aria-valuetext')).to.equal('Low');
+    });
+
+    it('sets aria-valuetext to maxLabel when modelValue equals max', async () => {
+      const el = await fixture(html`
+        <lion-input-range min="0" max="100" max-label="High" .modelValue=${50}></lion-input-range>
+      `);
+
+      el.modelValue = 100;
+      await nextFrame();
+
+      expect(el._inputNode.getAttribute('aria-valuetext')).to.equal('High');
+    });
+
+    it('removes aria-valuetext when modelValue is between min and max', async () => {
+      const el = await fixture(html`
+        <lion-input-range
+          min="0"
+          max="100"
+          min-label="Low"
+          max-label="High"
+          .modelValue=${0}
+        ></lion-input-range>
+      `);
+
+      await nextFrame();
+      expect(el._inputNode.getAttribute('aria-valuetext')).to.equal('Low');
+
+      el.modelValue = 50;
+      await nextFrame();
+
+      expect(el._inputNode.hasAttribute('aria-valuetext')).to.equal(false);
+    });
+  });
 });