feat(input-stepper): add aria-valuemin, aria-valuemax and an option t…

.changeset/sweet-cows-happen.md

@@ -0,0 +1,5 @@
+---
+'@lion/ui': minor
+---
+
+[input-stepper] add aria-valuemin, aria-valuemax and an option to set aria-valuetext

docs/components/input-stepper/use-cases.md

@@ -49,6 +49,41 @@ Use `min` and `max` attribute to specify a range.
 ></lion-input-stepper>
 ```
 
+### Value text
+
+Use the `.valueText` property to override the value with a text.
+
+```js preview-story
+export const valueText = () => {
+  const values = [
+    'first',
+    'second',
+    'third',
+    'fourth',
+    'fifth',
+    'sixth',
+    'seventh',
+    'eighth',
+    'ninth',
+    'tenth',
+  ];
+  function onModelValueChanged(ev) {
+    const inputStepper = ev.target;
+    inputStepper.valueText = values[inputStepper.modelValue - 1];
+  }
+  const format = { locale: 'nl-NL' };
+  return html`
+    <lion-input-stepper
+      label="Quality of oranges"
+      min="1"
+      max="10"
+      name="value"
+      @model-value-changed="${ev => onModelValueChanged(ev)}"
+    ></lion-input-stepper>
+  `;
+};
+```
+
 ### Formatting
 
 Just like with the `input-amount` you can add the `formatOptions` to format the numbers to your preferences, to a different locale or adjust the amount of fractions.

packages/ui/components/input-stepper/src/LionInputStepper.js

@@ -36,6 +36,11 @@ export class LionInputStepper extends LocalizeMixin(LionInput) {
         type: Number,
         reflect: true,
       },
+      valueText: {
+        type: Number,
+        reflect: true,
+        attribute: 'value-text',
+      },
       step: {
         type: Number,
         reflect: true,
@@ -66,6 +71,8 @@ export class LionInputStepper extends LocalizeMixin(LionInput) {
     this.formatter = formatNumber;
     this.min = Infinity;
     this.max = Infinity;
+    /** @type {string | undefined} */
+    this.valueText = undefined;
     this.step = 1;
     this.values = {
       max: this.max,
@@ -110,15 +117,36 @@ 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('valueText')) {
+      const displayValue = this._inputNode.value;
+      if (this.valueText) {
+        this.setAttribute('aria-valuetext', `${this.valueText}`);
+      } else if (displayValue) {
+        this.setAttribute('aria-valuetext', `${displayValue}`);
+      } else {
+        this.removeAttribute('aria-valuetext');
+      }
+    }
+
     if (changedProperties.has('step')) {
       this._inputNode.step = `${this.step}`;
       this.values.step = this.step;
@@ -193,8 +221,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 +233,19 @@ export class LionInputStepper extends LocalizeMixin(LionInput) {
     }
     decrementButton[disableDecrementor ? 'setAttribute' : 'removeAttribute']('disabled', 'true');
     incrementButton[disableIncrementor ? 'setAttribute' : 'removeAttribute']('disabled', 'true');
-    this.setAttribute('aria-valuenow', `${this.currentValue}`);
+
+    const displayValue = this._inputNode.value;
+    if (displayValue) {
+      this.setAttribute('aria-valuenow', `${displayValue}`);
+      if (!this.valueText) {
+        // VoiceOver announces percentages once the valuemin or valuemax are used.
+        // This can be fixed by setting valuetext to the same value as valuenow
+        this.setAttribute('aria-valuetext', `${displayValue}`);
+      }
+    } else {
+      this.removeAttribute('aria-valuenow');
+      this.removeAttribute('aria-valuetext');
+    }
   }
 
   /**

packages/ui/components/input-stepper/test/lion-input-stepper.test.js

@@ -283,6 +283,43 @@ describe('<lion-input-stepper>', () => {
       const incrementButton = el.querySelector('[slot=suffix]');
       incrementButton?.dispatchEvent(new Event('click'));
       expect(el).to.have.attribute('aria-valuenow', '1');
+
+      el._inputNode.value = '';
+      await el.updateComplete;
+      expect(el).to.not.have.attribute('aria-valuenow');
+    });
+
+    it('updates aria-valuetext when stepper is changed', async () => {
+      const el = await fixture(defaultInputStepper);
+      const incrementButton = el.querySelector('[slot=suffix]');
+      incrementButton?.dispatchEvent(new Event('click'));
+      expect(el).to.have.attribute('aria-valuetext', '1');
+
+      el._inputNode.value = '';
+      await el.updateComplete;
+      expect(el).to.not.have.attribute('aria-valuetext');
+    });
+
+    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-valuemax', '200');
+
+      el.max = 1000;
+      await el.updateComplete;
+      expect(el).to.have.attribute('aria-valuemax', '1000');
     });
   });
 });