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

fix(input-range): add screen-reader labels for minimum and maximum value

Browse source
This commit is contained in:
gerjanvangeest 2024-02-08 11:34:09 +01:00 committed by Thijs Louisse
parent 659cbff18c
commit 059b018793
42 changed files with 325 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/sour-students-invent.md Normal file
View file

@ -0,0 +1,5 @@
---
'@lion/ui': patch
---
[input-range] add screen-reader labels for minimum and maximum value

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

@ -7,10 +7,8 @@ import { html } from '@mdjs/mdjs-preview';
import '@lion/ui/define/lion-input-range.js';
```
```js preview-story
export const main = () => html`
<lion-input-range min="200" max="500" .modelValue="${300}" label="Input range"></lion-input-range>
`;
```html preview-story
<lion-input-range min="200" max="500" .modelValue="${300}" label="Input range"></lion-input-range>
```
## Features

88
docs/components/input-range/use-cases.md
View file

@ -7,66 +7,58 @@ import '@lion/ui/define/lion-input-range.js';
## Units
```js preview-story
export const units = () => html`
<style>
lion-input-range {
max-width: 400px;
}
</style>
<lion-input-range
min="0"
max="100"
.modelValue="${50}"
unit="%"
label="Percentage"
></lion-input-range>
`;
```html preview-story
<style>
lion-input-range {
max-width: 400px;
}
</style>
<lion-input-range
min="0"
max="100"
.modelValue="${50}"
unit="%"
label="Percentage"
></lion-input-range>
```
## Steps
```js preview-story
export const steps = () => html`
<lion-input-range
style="max-width: 400px;"
min="200"
max="500"
step="50"
.modelValue="${300}"
label="Input range"
help-text="This slider uses increments of 50"
></lion-input-range>
`;
```html preview-story
<lion-input-range
style="max-width: 400px;"
min="200"
max="500"
step="50"
.modelValue="${300}"
label="Input range"
help-text="This slider uses increments of 50"
></lion-input-range>
```
## Without Min Max Labels
```js preview-story
export const noMinMaxLabels = () => html`
<lion-input-range
style="max-width: 400px;"
no-min-max-labels
min="0"
max="100"
label="Input range"
></lion-input-range>
`;
```html preview-story
<lion-input-range
style="max-width: 400px;"
no-min-max-labels
min="0"
max="100"
label="Input range"
></lion-input-range>
```
## Disabled
```js preview-story
export const disabled = () => html`
<lion-input-range
style="max-width: 400px;"
disabled
min="200"
max="500"
.modelValue="${300}"
label="Input range"
></lion-input-range>
`;
```html preview-story
<lion-input-range
style="max-width: 400px;"
disabled
min="200"
max="500"
.modelValue="${300}"
label="Input range"
></lion-input-range>
```
## Range Styles

40
packages/ui/components/input-range/src/LionInputRange.js
View file

@ -1,8 +1,9 @@
/* eslint-disable import/no-extraneous-dependencies */
import { css, html } from 'lit';
import { LocalizeMixin, formatNumber } from '@lion/ui/localize-no-side-effects.js';
import { ScopedStylesController } from '@lion/ui/core.js';
import { LionInput } from '@lion/ui/input.js';
import { formatNumber } from '@lion/ui/localize-no-side-effects.js';
import { localizeNamespaceLoader } from './localizeNamespaceLoader.js';
/**
* @typedef {import('lit').CSSResult} CSSResult
@ -13,7 +14,7 @@ import { formatNumber } from '@lion/ui/localize-no-side-effects.js';
*
* @customElement `lion-input-range`
*/
export class LionInputRange extends LionInput {
export class LionInputRange extends LocalizeMixin(LionInput) {
/** @type {any} */
static get properties() {
return {
@ -40,6 +41,11 @@ export class LionInputRange extends LionInput {
};
}
static localizeNamespaces = [
{ 'lion-input-range': localizeNamespaceLoader },
...super.localizeNamespaces,
];
/**
* @param {CSSResult} scope
*/
@ -54,6 +60,26 @@ export class LionInputRange extends LionInput {
`;
}
static get styles() {
return [
super.styles,
css`
.sr-only {
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;
}
`,
];
}
get _inputNode() {
return /** @type {HTMLInputElement} */ (super._inputNode);
}
@ -130,8 +156,14 @@ export class LionInputRange extends LionInput {
${!this.noMinMaxLabels
? html`
<div class="input-range__limits">
<span>${formatNumber(this.min)}</span>
<span>${formatNumber(this.max)}</span>
<div>
<span class="sr-only">${this.msgLit('lion-input-range:minimum')} </span
>${formatNumber(this.min)}
</div>
<div>
<span class="sr-only">${this.msgLit('lion-input-range:maximum')} </span
>${formatNumber(this.max)}
</div>
</div>
`
: ''}

75
packages/ui/components/input-range/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-range-translations/bg-BG.js');
case 'bg':
return import('@lion/ui/input-range-translations/bg.js');
case 'cs-CZ':
return import('@lion/ui/input-range-translations/cs-CZ.js');
case 'cs':
return import('@lion/ui/input-range-translations/cs.js');
case 'de-DE':
return import('@lion/ui/input-range-translations/de-DE.js');
case 'de':
return import('@lion/ui/input-range-translations/de.js');
case 'en-AU':
return import('@lion/ui/input-range-translations/en-AU.js');
case 'en-GB':
return import('@lion/ui/input-range-translations/en-GB.js');
case 'en-US':
return import('@lion/ui/input-range-translations/en-US.js');
case 'en-PH':
case 'en':
return import('@lion/ui/input-range-translations/en.js');
case 'es-ES':
return import('@lion/ui/input-range-translations/es-ES.js');
case 'es':
return import('@lion/ui/input-range-translations/es.js');
case 'fr-FR':
return import('@lion/ui/input-range-translations/fr-FR.js');
case 'fr-BE':
return import('@lion/ui/input-range-translations/fr-BE.js');
case 'fr':
return import('@lion/ui/input-range-translations/fr.js');
case 'hu-HU':
return import('@lion/ui/input-range-translations/hu-HU.js');
case 'hu':
return import('@lion/ui/input-range-translations/hu.js');
case 'it-IT':
return import('@lion/ui/input-range-translations/it-IT.js');
case 'it':
return import('@lion/ui/input-range-translations/it.js');
case 'nl-BE':
return import('@lion/ui/input-range-translations/nl-BE.js');
case 'nl-NL':
return import('@lion/ui/input-range-translations/nl-NL.js');
case 'nl':
return import('@lion/ui/input-range-translations/nl.js');
case 'pl-PL':
return import('@lion/ui/input-range-translations/pl-PL.js');
case 'pl':
return import('@lion/ui/input-range-translations/pl.js');
case 'ro-RO':
return import('@lion/ui/input-range-translations/ro-RO.js');
case 'ro':
return import('@lion/ui/input-range-translations/ro.js');
case 'ru-RU':
return import('@lion/ui/input-range-translations/ru-RU.js');
case 'ru':
return import('@lion/ui/input-range-translations/ru.js');
case 'sk-SK':
return import('@lion/ui/input-range-translations/sk-SK.js');
case 'sk':
return import('@lion/ui/input-range-translations/sk.js');
case 'uk-UA':
return import('@lion/ui/input-range-translations/uk-UA.js');
case 'uk':
return import('@lion/ui/input-range-translations/uk.js');
case 'zh-CN':
case 'zh':
return import('@lion/ui/input-range-translations/zh.js');
default:
return import('@lion/ui/input-range-translations/en.js');
}
};

12
packages/ui/components/input-range/test/lion-input-range.test.js
View file

@ -35,14 +35,14 @@ describe('<lion-input-range>', () => {
expect(el.shadowRoot?.querySelectorAll('.input-range__limits span').length).to.equal(2);
expect(
/** @type {HTMLElement} */ (
/** @type {ShadowRoot} */ (el.shadowRoot).querySelectorAll('.input-range__limits span')[0]
).innerText,
).to.equal(el.min.toString());
/** @type {ShadowRoot} */ (el.shadowRoot).querySelectorAll('.input-range__limits > div')[0]
).textContent?.trim(),
).to.equal(`Minimum ${el.min.toString()}`);
expect(
/** @type {HTMLElement} */ (
/** @type {ShadowRoot} */ (el.shadowRoot).querySelectorAll('.input-range__limits span')[1]
).innerText,
).to.equal(el.max.toString());
/** @type {ShadowRoot} */ (el.shadowRoot).querySelectorAll('.input-range__limits > div')[1]
).textContent?.trim(),
).to.equal(`Maximum ${el.max.toString()}`);
});
it('update min and max attributes when min and max property change', async () => {

5
packages/ui/components/input-range/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-range/translations/bg.js Normal file
View file

@ -0,0 +1,4 @@
export default {
minimum: 'Минимум',
maximum: 'Максимум',
};

5
packages/ui/components/input-range/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-range/translations/cs.js Normal file
View file

@ -0,0 +1,4 @@
export default {
minimum: 'Minimální',
maximum: 'Maximálně',
};

5
packages/ui/components/input-range/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-range/translations/de.js Normal file
View file

@ -0,0 +1,4 @@
export default {
minimum: 'Minimum',
maximum: 'Maximum',
};

5
packages/ui/components/input-range/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-range/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-range/translations/en-PH.js Normal file
View file

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

5
packages/ui/components/input-range/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-range/translations/en.js Normal file
View file

@ -0,0 +1,4 @@
export default {
minimum: 'Minimum',
maximum: 'Maximum',
};

5
packages/ui/components/input-range/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-range/translations/es.js Normal file
View file

@ -0,0 +1,4 @@
export default {
minimum: 'Mínimo',
maximum: 'Máximo',
};

5
packages/ui/components/input-range/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-range/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-range/translations/fr.js Normal file
View file

@ -0,0 +1,4 @@
export default {
minimum: 'Minimum',
maximum: 'Maximum',
};

5
packages/ui/components/input-range/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-range/translations/hu.js Normal file
View file

@ -0,0 +1,4 @@
export default {
minimum: 'Minimum',
maximum: 'Maximum',
};

5
packages/ui/components/input-range/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-range/translations/it.js Normal file
View file

@ -0,0 +1,4 @@
export default {
minimum: 'Minimo',
maximum: 'Massimo',
};

5
packages/ui/components/input-range/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-range/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-range/translations/nl.js Normal file
View file

@ -0,0 +1,4 @@
export default {
minimum: 'Minimum',
maximum: 'Maximum',
};

5
packages/ui/components/input-range/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-range/translations/pl.js Normal file
View file

@ -0,0 +1,4 @@
export default {
minimum: 'Minimum',
maximum: 'Maksymalnie',
};

5
packages/ui/components/input-range/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-range/translations/ro.js Normal file
View file

@ -0,0 +1,4 @@
export default {
minimum: 'Minim',
maximum: 'Maxim',
};

5
packages/ui/components/input-range/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-range/translations/ru.js Normal file
View file

@ -0,0 +1,4 @@
export default {
minimum: 'Минимум',
maximum: 'Максимум',
};

5
packages/ui/components/input-range/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-range/translations/sk.js Normal file
View file

@ -0,0 +1,4 @@
export default {
minimum: 'Minimálne',
maximum: 'Maximálne',
};

5
packages/ui/components/input-range/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-range/translations/uk.js Normal file
View file

@ -0,0 +1,4 @@
export default {
minimum: 'Мінімум',
maximum: 'Максимум',
};

5
packages/ui/components/input-range/translations/zh-CN.js Normal file
View file

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

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

@ -0,0 +1,4 @@
export default {
minimum: '最少',
maximum: '最多',
};

1
packages/ui/package.json
View file

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