ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

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

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

* add changeset
This commit is contained in:
Vladimir Skorokhod 2025-11-13 14:35:44 +01:00 committed by GitHub
parent 9105f50ef3
commit b64f520680
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 24 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/strange-rabbits-provide.md Normal file
View file

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

4
packages/ui/components/input-stepper/src/LionInputStepper.js
View file

@ -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>

17
packages/ui/components/input-stepper/test/lion-input-stepper.test.js
View file

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