Fix/input stepper a11y: add component label to aria-label of increase and decrease buttons (#2618)

* [lion-input-stepper]: add label to the aria-label of increment and decrement buttons

* [lion-input-stepper]: update unit tests

* add changeset

.changeset/strange-rabbits-provide.md

@@ -0,0 +1,5 @@
+---
+'@lion/ui': patch
+---
+
+[lion-input-stepper]: add component label to aria-label of increase and decrease buttons

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

@@ -383,7 +383,7 @@ export class LionInputStepper extends LocalizeMixin(LionInput) {
         @focus=${this._onEnterButton}
         @blur=${this._onLeaveButton}
         type="button"
-        aria-label="${this.msgLit('lion-input-stepper:decrease')}"
+        aria-label="${this.msgLit('lion-input-stepper:decrease')} ${this.fieldName}"
       >
         ${this._decrementorSignTemplate()}
       </button>
@@ -403,7 +403,7 @@ export class LionInputStepper extends LocalizeMixin(LionInput) {
         @focus=${this._onEnterButton}
         @blur=${this._onLeaveButton}
         type="button"
-        aria-label="${this.msgLit('lion-input-stepper:increase')}"
+        aria-label="${this.msgLit('lion-input-stepper:increase')} ${this.fieldName}"
       >
         ${this._incrementorSignTemplate()}
       </button>

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

@@ -17,6 +17,7 @@ const inputStepperWithAttrs = html`<lion-input-stepper
   step="10"
   min="100"
   max="200"
+  label="Label"
 ></lion-input-stepper>`;
 
 describe('<lion-input-stepper>', () => {
@@ -473,5 +474,21 @@ describe('<lion-input-stepper>', () => {
       incrementButton?.dispatchEvent(new Event('blur'));
       expect(stepperValue?.hasAttribute('aria-live')).to.be.false;
     });
+
+    it('decrease button should have aria-label with the component label', async () => {
+      const el = await fixture(inputStepperWithAttrs);
+      const decrementButton = el.querySelector('[slot=prefix]');
+
+      expect(decrementButton?.hasAttribute('aria-label')).to.be.true;
+      expect(decrementButton?.getAttribute('aria-label')).to.equal('Decrease Label');
+    });
+
+    it('increase button should have aria-label with the component label', async () => {
+      const el = await fixture(inputStepperWithAttrs);
+      const incrementButton = el.querySelector('[slot=suffix]');
+
+      expect(incrementButton?.hasAttribute('aria-label')).to.be.true;
+      expect(incrementButton?.getAttribute('aria-label')).to.equal('Increase Label');
+    });
   });
 });