diff --git a/.changeset/strange-rabbits-provide.md b/.changeset/strange-rabbits-provide.md
new file mode 100644
index 000000000..49de65409
--- /dev/null
+++ b/.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
diff --git a/packages/ui/components/input-stepper/src/LionInputStepper.js b/packages/ui/components/input-stepper/src/LionInputStepper.js
index aeab9712a..a04936a38 100644
--- a/packages/ui/components/input-stepper/src/LionInputStepper.js
+++ b/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()}
@@ -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()}
diff --git a/packages/ui/components/input-stepper/test/lion-input-stepper.test.js b/packages/ui/components/input-stepper/test/lion-input-stepper.test.js
index 88d72f3ba..5479d8350 100644
--- a/packages/ui/components/input-stepper/test/lion-input-stepper.test.js
+++ b/packages/ui/components/input-stepper/test/lion-input-stepper.test.js
@@ -17,6 +17,7 @@ const inputStepperWithAttrs = html``;
describe('', () => {
@@ -473,5 +474,21 @@ describe('', () => {
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');
+ });
});
});