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'); + }); }); });