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

fix(input-stepper): move role=spinbutton to input node (#2426)

Browse source 
* fix(input-stepper): move role=spinbutton to input node

* chore: rename __boundOnEnterButton and __boundOnLeaveButton
This commit is contained in:
gerjanvangeest 2024-12-11 15:41:32 +01:00 committed by GitHub
parent fc1e66775f
commit 67f5735538
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 123 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/dirty-scissors-invent.md Normal file
View file

@ -0,0 +1,5 @@
---
'@lion/ui': patch
---
[input-stepper] move role="spinbutton" and relevant aria attributes to the inputNode

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

@ -21,6 +21,19 @@ export class LionInputStepper extends LocalizeMixin(LionInput) {
.input-group__container > .input-group__input ::slotted(.form-control) {
text-align: center;
}
.input-stepper__value {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(100%);
clip: rect(1px, 1px, 1px, 1px);
white-space: nowrap;
border: 0;
margin: 0;
padding: 0;
}
`,
];
}
@ -83,7 +96,8 @@ export class LionInputStepper extends LocalizeMixin(LionInput) {
this.__increment = this.__increment.bind(this);
this.__decrement = this.__decrement.bind(this);
this.__boundOnLeaveButton = this._onLeaveButton.bind(this);
this._onEnterButton = this._onEnterButton.bind(this);
this._onLeaveButton = this._onLeaveButton.bind(this);
}
connectedCallback() {
@ -93,11 +107,12 @@ export class LionInputStepper extends LocalizeMixin(LionInput) {
min: this.min,
step: this.step,
};
this.role = 'spinbutton';
if (this._inputNode) {
this._inputNode.role = 'spinbutton';
this._inputNode.setAttribute('inputmode', 'decimal');
this._inputNode.setAttribute('autocomplete', 'off');
}
this.addEventListener('keydown', this.__keyDownHandler);
this._inputNode.setAttribute('inputmode', 'decimal');
this._inputNode.setAttribute('autocomplete', 'off');
this.__setDefaultValidators();
this.__toggleSpinnerButtonsState();
}
@ -119,9 +134,9 @@ export class LionInputStepper extends LocalizeMixin(LionInput) {
this._inputNode.min = `${this.min}`;
this.values.min = this.min;
if (this.min !== Infinity) {
this.setAttribute('aria-valuemin', `${this.min}`);
this._inputNode.setAttribute('aria-valuemin', `${this.min}`);
} else {
this.removeAttribute('aria-valuemin');
this._inputNode.removeAttribute('aria-valuemin');
}
this.__toggleSpinnerButtonsState();
}
@ -130,9 +145,9 @@ export class LionInputStepper extends LocalizeMixin(LionInput) {
this._inputNode.max = `${this.max}`;
this.values.max = this.max;
if (this.max !== Infinity) {
this.setAttribute('aria-valuemax', `${this.max}`);
this._inputNode.setAttribute('aria-valuemax', `${this.max}`);
} else {
this.removeAttribute('aria-valuemax');
this._inputNode.removeAttribute('aria-valuemax');
}
this.__toggleSpinnerButtonsState();
}
@ -145,14 +160,6 @@ export class LionInputStepper extends LocalizeMixin(LionInput) {
this._inputNode.step = `${this.step}`;
this.values.step = this.step;
}
if (changedProperties.has('_ariaLabelledNodes')) {
this.__reflectAriaAttrToSpinButton('aria-labelledby', this._ariaLabelledNodes);
}
if (changedProperties.has('_ariaDescribedNodes')) {
this.__reflectAriaAttrToSpinButton('aria-describedby', this._ariaDescribedNodes);
}
}
get slots() {
@ -163,22 +170,6 @@ export class LionInputStepper extends LocalizeMixin(LionInput) {
};
}
/**
* Based on FormControlMixin __reflectAriaAttr()
*
* Will handle help text, validation feedback and character counter,
* prefix/suffix/before/after (if they contain data-description flag attr).
* Also, contents of id references that will be put in the <lion-field>._ariaDescribedby property
* from an external context, will be read by a screen reader.
* @param {string} attrName
* @param {Element[]} nodes
* @private
*/
__reflectAriaAttrToSpinButton(attrName, nodes) {
const string = nodes.map(n => n.id).join(' ');
this.setAttribute(attrName, string);
}
/**
* Set aria labels and apply validators
* @private
@ -227,7 +218,6 @@ export class LionInputStepper extends LocalizeMixin(LionInput) {
}
decrementButton[disableDecrementor ? 'setAttribute' : 'removeAttribute']('disabled', 'true');
incrementButton[disableIncrementor ? 'setAttribute' : 'removeAttribute']('disabled', 'true');
this._updateAriaAttributes();
}
@ -237,21 +227,22 @@ export class LionInputStepper extends LocalizeMixin(LionInput) {
_updateAriaAttributes() {
const displayValue = this._inputNode.value;
if (displayValue) {
this.setAttribute('aria-valuenow', `${displayValue}`);
this._inputNode.setAttribute('aria-valuenow', `${displayValue}`);
if (
Object.keys(this.valueTextMapping).length !== 0 &&
Object.keys(this.valueTextMapping).find(key => Number(key) === this.currentValue)
) {
this.setAttribute('aria-valuetext', `${this.valueTextMapping[this.currentValue]}`);
this.__valueText = this.valueTextMapping[this.currentValue];
} else {
// VoiceOver announces percentages once the valuemin or valuemax are used.
// This can be fixed by setting valuetext to the same value as valuenow
// https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuenow
this.setAttribute('aria-valuetext', `${displayValue}`);
this.__valueText = displayValue;
}
this._inputNode.setAttribute('aria-valuetext', `${this.__valueText}`);
} else {
this.removeAttribute('aria-valuenow');
this.removeAttribute('aria-valuetext');
this._inputNode.removeAttribute('aria-valuenow');
this._inputNode.removeAttribute('aria-valuetext');
}
}
@ -373,7 +364,8 @@ export class LionInputStepper extends LocalizeMixin(LionInput) {
<button
?disabled=${this.disabled || this.readOnly}
@click=${this.__decrement}
@blur=${this.__boundOnLeaveButton}
@focus=${this._onEnterButton}
@blur=${this._onLeaveButton}
type="button"
aria-label="${this.msgLit('lion-input-stepper:decrease')}"
>
@ -392,7 +384,8 @@ export class LionInputStepper extends LocalizeMixin(LionInput) {
<button
?disabled=${this.disabled || this.readOnly}
@click=${this.__increment}
@blur=${this.__boundOnLeaveButton}
@focus=${this._onEnterButton}
@blur=${this._onLeaveButton}
type="button"
aria-label="${this.msgLit('lion-input-stepper:increase')}"
>
@ -401,6 +394,33 @@ export class LionInputStepper extends LocalizeMixin(LionInput) {
`;
}
/** @protected */
_inputGroupTemplate() {
return html`
<div class="input-stepper__value">${this.__valueText}</div>
<div class="input-group">
${this._inputGroupBeforeTemplate()}
<div class="input-group__container">
${this._inputGroupPrefixTemplate()} ${this._inputGroupInputTemplate()}
${this._inputGroupSuffixTemplate()}
</div>
${this._inputGroupAfterTemplate()}
</div>
`;
}
/**
* @protected
* @param {Event} ev
*/
// eslint-disable-next-line no-unused-vars
_onEnterButton(ev) {
const valueNode = /** @type {HTMLElement} */ (
this.shadowRoot?.querySelector('.input-stepper__value')
);
valueNode.setAttribute('aria-live', 'assertive');
}
/**
* Redispatch leave event on host when catching leave event
* on the incrementor and decrementor button.
@ -410,8 +430,16 @@ export class LionInputStepper extends LocalizeMixin(LionInput) {
*
* Interacting with the buttons is "user interactions"
* the same way as focusing + blurring the field (native input)
*
* @protected
* @param {Event} ev
*/
_onLeaveButton() {
// eslint-disable-next-line no-unused-vars
_onLeaveButton(ev) {
const valueNode = /** @type {HTMLElement} */ (
this.shadowRoot?.querySelector('.input-stepper__value')
);
valueNode.removeAttribute('aria-live');
this.dispatchEvent(new Event(this._leaveEvent));
}
}

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

@ -278,17 +278,23 @@ describe('<lion-input-stepper>', () => {
await expect(el).to.be.accessible();
});
it('has role="spinbutton"', async () => {
const el = await fixture(defaultInputStepper);
expect(el._inputNode.hasAttribute('role')).to.be.true;
expect(el._inputNode.getAttribute('role')).to.equal('spinbutton');
});
it('updates aria-valuenow when stepper is changed', async () => {
const el = await fixture(defaultInputStepper);
el.modelValue = 1;
await el.updateComplete;
expect(el.hasAttribute('aria-valuenow')).to.be.true;
expect(el.getAttribute('aria-valuenow')).to.equal('1');
expect(el._inputNode.hasAttribute('aria-valuenow')).to.be.true;
expect(el._inputNode.getAttribute('aria-valuenow')).to.equal('1');
el.modelValue = '';
await el.updateComplete;
expect(el.hasAttribute('aria-valuenow')).to.be.false;
expect(el._inputNode.hasAttribute('aria-valuenow')).to.be.false;
});
it('updates aria-valuetext when stepper is changed', async () => {
@ -299,12 +305,12 @@ describe('<lion-input-stepper>', () => {
el.modelValue = 1;
await el.updateComplete;
expect(el.hasAttribute('aria-valuetext')).to.be.true;
expect(el.getAttribute('aria-valuetext')).to.equal('1');
expect(el._inputNode.hasAttribute('aria-valuetext')).to.be.true;
expect(el._inputNode.getAttribute('aria-valuetext')).to.equal('1');
el.modelValue = '';
await el.updateComplete;
expect(el.hasAttribute('aria-valuetext')).to.be.false;
expect(el._inputNode.hasAttribute('aria-valuetext')).to.be.false;
});
it('can give aria-valuetext to override default value as a human-readable text alternative', async () => {
@ -318,30 +324,60 @@ describe('<lion-input-stepper>', () => {
`);
el.modelValue = 1;
await el.updateComplete;
expect(el.hasAttribute('aria-valuetext')).to.be.true;
expect(el.getAttribute('aria-valuetext')).to.equal('first');
expect(el._inputNode.hasAttribute('aria-valuetext')).to.be.true;
expect(el._inputNode.getAttribute('aria-valuetext')).to.equal('first');
});
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');
expect(el._inputNode.hasAttribute('aria-valuemin')).to.be.true;
expect(el._inputNode.getAttribute('aria-valuemin')).to.equal('100');
el.min = 0;
await el.updateComplete;
expect(el).to.have.attribute('aria-valuemin', '0');
expect(el._inputNode.hasAttribute('aria-valuemin')).to.be.true;
expect(el._inputNode.getAttribute('aria-valuemin')).to.equal('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');
expect(el._inputNode.hasAttribute('aria-valuemax')).to.be.true;
expect(el._inputNode.getAttribute('aria-valuemax')).to.equal('200');
el.max = 1000;
await el.updateComplete;
expect(el).to.have.attribute('aria-valuemax', '1000');
expect(el._inputNode.hasAttribute('aria-valuemax')).to.be.true;
expect(el._inputNode.getAttribute('aria-valuemax')).to.equal('1000');
});
it('when decrease button gets focus, it sets aria-live to input-stepper__value', async () => {
const el = await fixture(inputStepperWithAttrs);
const stepperValue = el.shadowRoot?.querySelector('.input-stepper__value');
const decrementButton = el.querySelector('[slot=prefix]');
decrementButton?.dispatchEvent(new Event('focus'));
expect(stepperValue?.hasAttribute('aria-live')).to.be.true;
expect(stepperValue?.getAttribute('aria-live')).to.equal('assertive');
decrementButton?.dispatchEvent(new Event('blur'));
expect(stepperValue?.hasAttribute('aria-live')).to.be.false;
});
it('when increase button gets focus, it sets aria-live to input-stepper__value', async () => {
const el = await fixture(inputStepperWithAttrs);
const stepperValue = el.shadowRoot?.querySelector('.input-stepper__value');
const incrementButton = el.querySelector('[slot=suffix]');
incrementButton?.dispatchEvent(new Event('focus'));
expect(stepperValue?.hasAttribute('aria-live')).to.be.true;
expect(stepperValue?.getAttribute('aria-live')).to.equal('assertive');
incrementButton?.dispatchEvent(new Event('blur'));
expect(stepperValue?.hasAttribute('aria-live')).to.be.false;
});
});
});