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

feat(input-stepper): a11y enhancement & added translations (#2173)

Browse source
This commit is contained in:
gerjanvangeest 2024-02-19 17:01:32 +01:00 committed by GitHub
parent 19256d31bf
commit 87005afbd2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
40 changed files with 382 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/pink-islands-return.md Normal file
View file

@ -0,0 +1,5 @@
---
'@lion/ui': minor
---
[input-stepper] a11y enhancement & added translations

6
docs/components/input-stepper/overview.md
View file

@ -4,16 +4,16 @@ A web component that enables the user to increase and decrease a numeric value b
```js script
import { html } from '@mdjs/mdjs-preview';
import { loadDefaultFeedbackMessages } from '@lion/ui/validate-messages.js';
import '@lion/ui/define/lion-input-stepper.js';
loadDefaultFeedbackMessages();
```
```js preview-story
export const main = () => html`
```html preview-story
<lion-input-stepper max="5" min="0" name="count">
<label slot="label">RSVP</label>
<div slot="help-text">Max. 5 guests</div>
</lion-input-stepper>
`;
```
## Features

47
docs/components/input-stepper/use-cases.md
View file

@ -2,40 +2,49 @@
```js script
import { html } from '@mdjs/mdjs-preview';
import { loadDefaultFeedbackMessages } from '@lion/ui/validate-messages.js';
import '@lion/ui/define/lion-input-stepper.js';
loadDefaultFeedbackMessages();
```
## Default with no specification
## Default
When no range or step is defined, it can go infinite with default step value as `1`. You can also specify prefix content using `after` slot.
```js preview-story
export const defaultMode = () => html`
<label>How old is the existence?</label>
```html preview-story
<lion-input-stepper name="year">
<div slot="after">In Billion Years</div>
<label slot="label">How old is the existence?</label>
<div slot="after" data-description>In Billion Years</div>
</lion-input-stepper>
`;
```
## Step and Value
## Attributes & Properties
### Step and Value
Use `step` attribute to specify the incrementor or decrementor difference and `value` to set the default value.
```js preview-story
export const steps = () => html`
<p><strong>Min:</strong> 100, <strong>Value:</strong> 200, <strong>Step:</strong> 100</p>
<lion-input-stepper min="100" step="100" name="value" value="200"></lion-input-stepper>
`;
```html preview-story
<lion-input-stepper
label="Amount of oranges"
min="100"
step="100"
name="value"
value="200"
></lion-input-stepper>
```
## Range
### Range
Use `min` and `max` attribute to specify range.
Use `min` and `max` attribute to specify a range.
```js preview-story
export const range = () => html`
<p><strong>Min:</strong> 200, <strong>Max:</strong> 500, <strong>Step:</strong> 100</p>
<lion-input-stepper min="200" max="500" name="value" step="100" value="200"></lion-input-stepper>
`;
```html preview-story
<lion-input-stepper
label="Amount of oranges"
min="200"
max="500"
name="value"
step="100"
value="200"
></lion-input-stepper>
```

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

@ -1,6 +1,8 @@
import { html, css, render } from 'lit';
import { LocalizeMixin } from '@lion/ui/localize-no-side-effects.js';
import { LionInput } from '@lion/ui/input.js';
import { IsNumber, MinNumber, MaxNumber } from '@lion/ui/form-core.js';
import { localizeNamespaceLoader } from './localizeNamespaceLoader.js';
/**
* @typedef {import('lit').RenderOptions} RenderOptions
@ -11,7 +13,7 @@ import { IsNumber, MinNumber, MaxNumber } from '@lion/ui/form-core.js';
*
* @customElement lion-input-stepper
*/
export class LionInputStepper extends LionInput {
export class LionInputStepper extends LocalizeMixin(LionInput) {
static get styles() {
return [
...super.styles,
@ -41,6 +43,11 @@ export class LionInputStepper extends LionInput {
};
}
static localizeNamespaces = [
{ 'lion-input-stepper': localizeNamespaceLoader },
...super.localizeNamespaces,
];
/**
* @returns {number}
*/
@ -82,9 +89,7 @@ export class LionInputStepper extends LionInput {
this.addEventListener('keydown', this.__keyDownHandler);
this._inputNode.setAttribute('inputmode', 'decimal');
this._inputNode.setAttribute('autocomplete', 'off');
this.setAttribute('aria-label', this.label);
this.step = this.hasAttribute('step') ? this.step : 1;
this.__setAriaLabelsAndValidator();
this.__setDefaultValidators();
this.__toggleSpinnerButtonsState();
}
@ -117,6 +122,14 @@ export class LionInputStepper extends 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() {
@ -127,42 +140,48 @@ export class LionInputStepper extends 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
*/
__setAriaLabelsAndValidator() {
const ariaAttributes = {
'aria-valuemax': this.values.max,
'aria-valuemin': this.values.min,
};
const minMaxValidators = /** @type {(MaxNumber | MinNumber)[]} */ (
Object.entries(ariaAttributes)
.map(([key, val]) => {
if (val !== Infinity) {
this.setAttribute(key, `${val}`);
return key === 'aria-valuemax' ? new MaxNumber(val) : new MinNumber(val);
}
return null;
})
.filter(validator => validator !== null)
__setDefaultValidators() {
const validators = /** @type {(IsNumber| MaxNumber | MinNumber)[]} */ (
[
new IsNumber(),
this.min !== Infinity ? new MinNumber(this.min) : null,
this.max !== Infinity ? new MaxNumber(this.max) : null,
].filter(validator => validator !== null)
);
const validators = [new IsNumber(), ...minMaxValidators];
this.defaultValidators.push(...validators);
}
/**
* Update values on keyboard arrow up and down event
* @param {KeyboardEvent} e - keyboard event
* @param {KeyboardEvent} ev - keyboard event
* @private
*/
__keyDownHandler(e) {
if (e.key === 'ArrowUp') {
__keyDownHandler(ev) {
if (ev.key === 'ArrowUp') {
this.__increment();
}
if (e.key === 'ArrowDown') {
if (ev.key === 'ArrowDown') {
this.__decrement();
}
}
@ -177,6 +196,9 @@ export class LionInputStepper extends LionInput {
const incrementButton = this.__getSlot('suffix');
const disableIncrementor = this.currentValue >= max && max !== Infinity;
const disableDecrementor = this.currentValue <= min && min !== Infinity;
if (disableDecrementor || disableIncrementor) {
this._inputNode.focus();
}
decrementButton[disableDecrementor ? 'setAttribute' : 'removeAttribute']('disabled', 'true');
incrementButton[disableIncrementor ? 'setAttribute' : 'removeAttribute']('disabled', 'true');
this.setAttribute('aria-valuenow', `${this.currentValue}`);
@ -201,10 +223,10 @@ export class LionInputStepper extends LionInput {
* @private
*/
__increment() {
const { step, max } = this.values;
const { step, min, max } = this.values;
const newValue = this.currentValue + step;
if (newValue <= max || max === Infinity) {
this.value = `${newValue}`;
this.value = newValue < min && min !== Infinity ? `${min}` : `${newValue}`;
this.__toggleSpinnerButtonsState();
this._proxyInputEvent();
}
@ -215,10 +237,10 @@ export class LionInputStepper extends LionInput {
* @private
*/
__decrement() {
const { step, min } = this.values;
const { step, min, max } = this.values;
const newValue = this.currentValue - step;
if (newValue >= min || min === Infinity) {
this.value = `${newValue}`;
this.value = newValue > max && max !== Infinity ? `${max}` : `${newValue}`;
this.__toggleSpinnerButtonsState();
this._proxyInputEvent();
}
@ -301,9 +323,8 @@ export class LionInputStepper extends LionInput {
?disabled=${this.disabled || this.readOnly}
@click=${this.__decrement}
@blur=${this.__boundOnLeaveButton}
tabindex="-1"
type="button"
aria-label="decrement"
aria-label="${this.msgLit('lion-input-stepper:decrease')}"
>
${this._decrementorSignTemplate()}
</button>
@ -321,9 +342,8 @@ export class LionInputStepper extends LionInput {
?disabled=${this.disabled || this.readOnly}
@click=${this.__increment}
@blur=${this.__boundOnLeaveButton}
tabindex="-1"
type="button"
aria-label="increment"
aria-label="${this.msgLit('lion-input-stepper:increase')}"
>
${this._incrementorSignTemplate()}
</button>

75
packages/ui/components/input-stepper/src/localizeNamespaceLoader.js Normal file
View file

@ -0,0 +1,75 @@
/* eslint-disable import/no-extraneous-dependencies */
export const localizeNamespaceLoader = /** @param {string} locale */ locale => {
switch (locale) {
case 'bg-BG':
return import('@lion/ui/input-stepper-translations/bg-BG.js');
case 'bg':
return import('@lion/ui/input-stepper-translations/bg.js');
case 'cs-CZ':
return import('@lion/ui/input-stepper-translations/cs-CZ.js');
case 'cs':
return import('@lion/ui/input-stepper-translations/cs.js');
case 'de-DE':
return import('@lion/ui/input-stepper-translations/de-DE.js');
case 'de':
return import('@lion/ui/input-stepper-translations/de.js');
case 'en-AU':
return import('@lion/ui/input-stepper-translations/en-AU.js');
case 'en-GB':
return import('@lion/ui/input-stepper-translations/en-GB.js');
case 'en-US':
return import('@lion/ui/input-stepper-translations/en-US.js');
case 'en-PH':
case 'en':
return import('@lion/ui/input-stepper-translations/en.js');
case 'es-ES':
return import('@lion/ui/input-stepper-translations/es-ES.js');
case 'es':
return import('@lion/ui/input-stepper-translations/es.js');
case 'fr-FR':
return import('@lion/ui/input-stepper-translations/fr-FR.js');
case 'fr-BE':
return import('@lion/ui/input-stepper-translations/fr-BE.js');
case 'fr':
return import('@lion/ui/input-stepper-translations/fr.js');
case 'hu-HU':
return import('@lion/ui/input-stepper-translations/hu-HU.js');
case 'hu':
return import('@lion/ui/input-stepper-translations/hu.js');
case 'it-IT':
return import('@lion/ui/input-stepper-translations/it-IT.js');
case 'it':
return import('@lion/ui/input-stepper-translations/it.js');
case 'nl-BE':
return import('@lion/ui/input-stepper-translations/nl-BE.js');
case 'nl-NL':
return import('@lion/ui/input-stepper-translations/nl-NL.js');
case 'nl':
return import('@lion/ui/input-stepper-translations/nl.js');
case 'pl-PL':
return import('@lion/ui/input-stepper-translations/pl-PL.js');
case 'pl':
return import('@lion/ui/input-stepper-translations/pl.js');
case 'ro-RO':
return import('@lion/ui/input-stepper-translations/ro-RO.js');
case 'ro':
return import('@lion/ui/input-stepper-translations/ro.js');
case 'ru-RU':
return import('@lion/ui/input-stepper-translations/ru-RU.js');
case 'ru':
return import('@lion/ui/input-stepper-translations/ru.js');
case 'sk-SK':
return import('@lion/ui/input-stepper-translations/sk-SK.js');
case 'sk':
return import('@lion/ui/input-stepper-translations/sk.js');
case 'uk-UA':
return import('@lion/ui/input-stepper-translations/uk-UA.js');
case 'uk':
return import('@lion/ui/input-stepper-translations/uk.js');
case 'zh-CN':
case 'zh':
return import('@lion/ui/input-stepper-translations/zh.js');
default:
return import('@lion/ui/input-stepper-translations/en.js');
}
};

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

@ -12,7 +12,11 @@ const fixture = /** @type {(arg: TemplateResult|string) => Promise<LionInputStep
const defaultInputStepper = html`
<lion-input-stepper name="year" label="Years"></lion-input-stepper>
`;
const inputStepperWithAttrs = html`<lion-input-stepper min="100" max="200"></lion-input-stepper>`;
const inputStepperWithAttrs = html`<lion-input-stepper
step="10"
min="100"
max="200"
></lion-input-stepper>`;
describe('<lion-input-stepper>', () => {
describe('Stepper', () => {
@ -20,9 +24,64 @@ describe('<lion-input-stepper>', () => {
const el = await fixture(defaultInputStepper);
expect(el._inputNode.type).to.equal('text');
});
it('has a default min and max of Infinity', async () => {
const el = await fixture(defaultInputStepper);
expect(el.getAttribute('min')).to.equal('Infinity');
expect(el.getAttribute('max')).to.equal('Infinity');
});
it('has a default step of 1', async () => {
const el = await fixture(defaultInputStepper);
expect(el.getAttribute('step')).to.equal('1');
});
it('can set a step with which the value increases', async () => {
const el = await fixture(defaultInputStepper);
el.step = 10;
await el.updateComplete;
expect(el.value).to.equal('');
expect(el.getAttribute('step')).to.equal('10');
const incrementButton = el.querySelector('[slot=suffix]');
incrementButton?.dispatchEvent(new Event('click'));
expect(el.value).to.equal('10');
});
});
describe('User interaction', () => {
it('should increment the value to 1 on [ArrowUp]', async () => {
const el = await fixture(defaultInputStepper);
expect(el.value).to.equal('');
el.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }));
await el.updateComplete;
expect(el.value).to.equal('1');
});
it('should increment the value to minValue on [ArrowUp] if value is below min', async () => {
const el = await fixture(inputStepperWithAttrs);
expect(el.value).to.equal('');
el.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }));
await el.updateComplete;
expect(el.value).to.equal('100');
});
it('should decrement the value to -1 on [ArrowDown]', async () => {
const el = await fixture(defaultInputStepper);
expect(el.value).to.equal('');
el.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }));
await el.updateComplete;
expect(el.value).to.equal('-1');
});
it('should increment the value to minValue on [ArrowDown] if value is below min', async () => {
const el = await fixture(inputStepperWithAttrs);
el.modelValue = 600;
el.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }));
await el.updateComplete;
expect(el.value).to.equal('200');
});
it('should increment the value to 1 on + button click', async () => {
const el = await fixture(defaultInputStepper);
expect(el.value).to.equal('');
@ -174,14 +233,8 @@ describe('<lion-input-stepper>', () => {
await expect(el).to.be.accessible();
});
it('adds aria-valuemax and aria-valuemin when min and max are provided', async () => {
const el = await fixture(inputStepperWithAttrs);
expect(el).to.have.attribute('aria-valuemax', '200');
expect(el).to.have.attribute('aria-valuemin', '100');
});
it('updates aria-valuenow when stepper is changed', async () => {
const el = await fixture(inputStepperWithAttrs);
const el = await fixture(defaultInputStepper);
const incrementButton = el.querySelector('[slot=suffix]');
incrementButton?.dispatchEvent(new Event('click'));
expect(el).to.have.attribute('aria-valuenow', '1');

5
packages/ui/components/input-stepper/translations/bg-BG.js Normal file
View file

@ -0,0 +1,5 @@
import bg from './bg.js';
export default {
...bg,
};

4
packages/ui/components/input-stepper/translations/bg.js Normal file
View file

@ -0,0 +1,4 @@
export default {
decrease: 'Намаляване',
increase: 'Увеличаване',
};

5
packages/ui/components/input-stepper/translations/cs-CZ.js Normal file
View file

@ -0,0 +1,5 @@
import cs from './cs.js';
export default {
...cs,
};

4
packages/ui/components/input-stepper/translations/cs.js Normal file
View file

@ -0,0 +1,4 @@
export default {
decrease: 'Snížit',
increase: 'Zvýšit',
};

5
packages/ui/components/input-stepper/translations/de-DE.js Normal file
View file

@ -0,0 +1,5 @@
import de from './de.js';
export default {
...de,
};

4
packages/ui/components/input-stepper/translations/de.js Normal file
View file

@ -0,0 +1,4 @@
export default {
decrease: 'Verringern',
increase: 'Erhöhen',
};

5
packages/ui/components/input-stepper/translations/en-AU.js Normal file
View file

@ -0,0 +1,5 @@
import en from './en.js';
export default {
...en,
};

5
packages/ui/components/input-stepper/translations/en-GB.js Normal file
View file

@ -0,0 +1,5 @@
import en from './en.js';
export default {
...en,
};

5
packages/ui/components/input-stepper/translations/en-US.js Normal file
View file

@ -0,0 +1,5 @@
import en from './en.js';
export default {
...en,
};

4
packages/ui/components/input-stepper/translations/en.js Normal file
View file

@ -0,0 +1,4 @@
export default {
decrease: 'Decrease',
increase: 'Increase',
};

5
packages/ui/components/input-stepper/translations/es-ES.js Normal file
View file

@ -0,0 +1,5 @@
import es from './es.js';
export default {
...es,
};

4
packages/ui/components/input-stepper/translations/es.js Normal file
View file

@ -0,0 +1,4 @@
export default {
decrease: 'Disminuir',
increase: 'Aumentar',
};

5
packages/ui/components/input-stepper/translations/fr-BE.js Normal file
View file

@ -0,0 +1,5 @@
import fr from './fr.js';
export default {
...fr,
};

5
packages/ui/components/input-stepper/translations/fr-FR.js Normal file
View file

@ -0,0 +1,5 @@
import fr from './fr.js';
export default {
...fr,
};

4
packages/ui/components/input-stepper/translations/fr.js Normal file
View file

@ -0,0 +1,4 @@
export default {
decrease: 'Diminuer',
increase: 'Augmenter',
};

5
packages/ui/components/input-stepper/translations/hu-HU.js Normal file
View file

@ -0,0 +1,5 @@
import hu from './hu.js';
export default {
...hu,
};

4
packages/ui/components/input-stepper/translations/hu.js Normal file
View file

@ -0,0 +1,4 @@
export default {
decrease: 'Csökkentés',
increase: 'Növelés',
};

5
packages/ui/components/input-stepper/translations/it-IT.js Normal file
View file

@ -0,0 +1,5 @@
import it from './it.js';
export default {
...it,
};

4
packages/ui/components/input-stepper/translations/it.js Normal file
View file

@ -0,0 +1,4 @@
export default {
decrease: 'Diminuisci',
increase: 'Aumenta',
};

5
packages/ui/components/input-stepper/translations/nl-BE.js Normal file
View file

@ -0,0 +1,5 @@
import nl from './nl.js';
export default {
...nl,
};

5
packages/ui/components/input-stepper/translations/nl-NL.js Normal file
View file

@ -0,0 +1,5 @@
import nl from './nl.js';
export default {
...nl,
};

4
packages/ui/components/input-stepper/translations/nl.js Normal file
View file

@ -0,0 +1,4 @@
export default {
decrease: 'Verlagen',
increase: 'Verhogen',
};

5
packages/ui/components/input-stepper/translations/pl-PL.js Normal file
View file

@ -0,0 +1,5 @@
import pl from './pl.js';
export default {
...pl,
};

4
packages/ui/components/input-stepper/translations/pl.js Normal file
View file

@ -0,0 +1,4 @@
export default {
decrease: 'Zmniejsz',
increase: 'Zwiększ',
};

5
packages/ui/components/input-stepper/translations/ro-RO.js Normal file
View file

@ -0,0 +1,5 @@
import ro from './ro.js';
export default {
...ro,
};

4
packages/ui/components/input-stepper/translations/ro.js Normal file
View file

@ -0,0 +1,4 @@
export default {
decrease: 'Scădere',
increase: 'Creștere',
};

5
packages/ui/components/input-stepper/translations/ru-RU.js Normal file
View file

@ -0,0 +1,5 @@
import ru from './ru.js';
export default {
...ru,
};

4
packages/ui/components/input-stepper/translations/ru.js Normal file
View file

@ -0,0 +1,4 @@
export default {
decrease: 'Уменьшить',
increase: 'Увеличить',
};

5
packages/ui/components/input-stepper/translations/sk-SK.js Normal file
View file

@ -0,0 +1,5 @@
import sk from './sk.js';
export default {
...sk,
};

4
packages/ui/components/input-stepper/translations/sk.js Normal file
View file

@ -0,0 +1,4 @@
export default {
decrease: 'Znížiť',
increase: 'Zvýšiť',
};

5
packages/ui/components/input-stepper/translations/uk-UA.js Normal file
View file

@ -0,0 +1,5 @@
import uk from './uk.js';
export default {
...uk,
};

4
packages/ui/components/input-stepper/translations/uk.js Normal file
View file

@ -0,0 +1,4 @@
export default {
decrease: 'Зменшити',
increase: 'Збільшити',
};

4
packages/ui/components/input-stepper/translations/zh.js Normal file
View file

@ -0,0 +1,4 @@
export default {
decrease: '减少',
increase: '增加',
};

1
packages/ui/package.json
View file

@ -24,6 +24,7 @@
"./input-file-translations/*": "./components/input-file/translations/*",
"./input-iban-translations/*": "./components/input-iban/translations/*",
"./input-range-translations/*": "./components/input-range/translations/*",
"./input-stepper-translations/*": "./components/input-stepper/translations/*",
"./input-tel-translations/*": "./components/input-tel/translations/*",
"./overlays-translations/*": "./components/overlays/translations/*",
"./validate-messages-translations/*": "./components/validate-messages/translations/*",