diff --git a/.changeset/sour-students-invent.md b/.changeset/sour-students-invent.md
new file mode 100644
index 0000000000..3984233f9a
--- /dev/null
+++ b/.changeset/sour-students-invent.md
@@ -0,0 +1,5 @@
+---
+'@lion/ui': patch
+---
+
+[input-range] add screen-reader labels for minimum and maximum value
diff --git a/docs/components/input-range/overview.md b/docs/components/input-range/overview.md
index fc6a4f0e65..9ba5f47199 100644
--- a/docs/components/input-range/overview.md
+++ b/docs/components/input-range/overview.md
@@ -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`
-
-`;
+```html preview-story
+
```
## Features
diff --git a/docs/components/input-range/use-cases.md b/docs/components/input-range/use-cases.md
index 4bd92f2337..67cfa9585d 100644
--- a/docs/components/input-range/use-cases.md
+++ b/docs/components/input-range/use-cases.md
@@ -7,66 +7,58 @@ import '@lion/ui/define/lion-input-range.js';
## Units
-```js preview-story
-export const units = () => html`
-
-
-`;
+```html preview-story
+
+
```
## Steps
-```js preview-story
-export const steps = () => html`
-
-`;
+```html preview-story
+
```
## Without Min Max Labels
-```js preview-story
-export const noMinMaxLabels = () => html`
-
-`;
+```html preview-story
+
```
## Disabled
-```js preview-story
-export const disabled = () => html`
-
-`;
+```html preview-story
+
```
## Range Styles
diff --git a/packages/ui/components/input-range/src/LionInputRange.js b/packages/ui/components/input-range/src/LionInputRange.js
index 93de10ff94..359581a468 100644
--- a/packages/ui/components/input-range/src/LionInputRange.js
+++ b/packages/ui/components/input-range/src/LionInputRange.js
@@ -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`
`
: ''}
diff --git a/packages/ui/components/input-range/src/localizeNamespaceLoader.js b/packages/ui/components/input-range/src/localizeNamespaceLoader.js
new file mode 100644
index 0000000000..18846429fb
--- /dev/null
+++ b/packages/ui/components/input-range/src/localizeNamespaceLoader.js
@@ -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');
+ }
+};
diff --git a/packages/ui/components/input-range/test/lion-input-range.test.js b/packages/ui/components/input-range/test/lion-input-range.test.js
index 4768f558b6..2d7e54f5b8 100644
--- a/packages/ui/components/input-range/test/lion-input-range.test.js
+++ b/packages/ui/components/input-range/test/lion-input-range.test.js
@@ -35,14 +35,14 @@ describe('', () => {
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 () => {
diff --git a/packages/ui/components/input-range/translations/bg-BG.js b/packages/ui/components/input-range/translations/bg-BG.js
new file mode 100644
index 0000000000..00f5e5f613
--- /dev/null
+++ b/packages/ui/components/input-range/translations/bg-BG.js
@@ -0,0 +1,5 @@
+import bg from './bg.js';
+
+export default {
+ ...bg,
+};
diff --git a/packages/ui/components/input-range/translations/bg.js b/packages/ui/components/input-range/translations/bg.js
new file mode 100644
index 0000000000..81817fa4ce
--- /dev/null
+++ b/packages/ui/components/input-range/translations/bg.js
@@ -0,0 +1,4 @@
+export default {
+ minimum: 'Минимум',
+ maximum: 'Максимум',
+};
diff --git a/packages/ui/components/input-range/translations/cs-CZ.js b/packages/ui/components/input-range/translations/cs-CZ.js
new file mode 100644
index 0000000000..2cac51aa8e
--- /dev/null
+++ b/packages/ui/components/input-range/translations/cs-CZ.js
@@ -0,0 +1,5 @@
+import cs from './cs.js';
+
+export default {
+ ...cs,
+};
diff --git a/packages/ui/components/input-range/translations/cs.js b/packages/ui/components/input-range/translations/cs.js
new file mode 100644
index 0000000000..36616d47d8
--- /dev/null
+++ b/packages/ui/components/input-range/translations/cs.js
@@ -0,0 +1,4 @@
+export default {
+ minimum: 'Minimální',
+ maximum: 'Maximálně',
+};
diff --git a/packages/ui/components/input-range/translations/de-DE.js b/packages/ui/components/input-range/translations/de-DE.js
new file mode 100644
index 0000000000..8e3fb7c867
--- /dev/null
+++ b/packages/ui/components/input-range/translations/de-DE.js
@@ -0,0 +1,5 @@
+import de from './de.js';
+
+export default {
+ ...de,
+};
diff --git a/packages/ui/components/input-range/translations/de.js b/packages/ui/components/input-range/translations/de.js
new file mode 100644
index 0000000000..a39fb5ee73
--- /dev/null
+++ b/packages/ui/components/input-range/translations/de.js
@@ -0,0 +1,4 @@
+export default {
+ minimum: 'Minimum',
+ maximum: 'Maximum',
+};
diff --git a/packages/ui/components/input-range/translations/en-AU.js b/packages/ui/components/input-range/translations/en-AU.js
new file mode 100644
index 0000000000..e164dab30c
--- /dev/null
+++ b/packages/ui/components/input-range/translations/en-AU.js
@@ -0,0 +1,5 @@
+import en from './en.js';
+
+export default {
+ ...en,
+};
diff --git a/packages/ui/components/input-range/translations/en-GB.js b/packages/ui/components/input-range/translations/en-GB.js
new file mode 100644
index 0000000000..e164dab30c
--- /dev/null
+++ b/packages/ui/components/input-range/translations/en-GB.js
@@ -0,0 +1,5 @@
+import en from './en.js';
+
+export default {
+ ...en,
+};
diff --git a/packages/ui/components/input-range/translations/en-PH.js b/packages/ui/components/input-range/translations/en-PH.js
new file mode 100644
index 0000000000..e164dab30c
--- /dev/null
+++ b/packages/ui/components/input-range/translations/en-PH.js
@@ -0,0 +1,5 @@
+import en from './en.js';
+
+export default {
+ ...en,
+};
diff --git a/packages/ui/components/input-range/translations/en-US.js b/packages/ui/components/input-range/translations/en-US.js
new file mode 100644
index 0000000000..e164dab30c
--- /dev/null
+++ b/packages/ui/components/input-range/translations/en-US.js
@@ -0,0 +1,5 @@
+import en from './en.js';
+
+export default {
+ ...en,
+};
diff --git a/packages/ui/components/input-range/translations/en.js b/packages/ui/components/input-range/translations/en.js
new file mode 100644
index 0000000000..a39fb5ee73
--- /dev/null
+++ b/packages/ui/components/input-range/translations/en.js
@@ -0,0 +1,4 @@
+export default {
+ minimum: 'Minimum',
+ maximum: 'Maximum',
+};
diff --git a/packages/ui/components/input-range/translations/es-ES.js b/packages/ui/components/input-range/translations/es-ES.js
new file mode 100644
index 0000000000..94a009944a
--- /dev/null
+++ b/packages/ui/components/input-range/translations/es-ES.js
@@ -0,0 +1,5 @@
+import es from './es.js';
+
+export default {
+ ...es,
+};
diff --git a/packages/ui/components/input-range/translations/es.js b/packages/ui/components/input-range/translations/es.js
new file mode 100644
index 0000000000..d601d34b9c
--- /dev/null
+++ b/packages/ui/components/input-range/translations/es.js
@@ -0,0 +1,4 @@
+export default {
+ minimum: 'Mínimo',
+ maximum: 'Máximo',
+};
diff --git a/packages/ui/components/input-range/translations/fr-BE.js b/packages/ui/components/input-range/translations/fr-BE.js
new file mode 100644
index 0000000000..da02615dea
--- /dev/null
+++ b/packages/ui/components/input-range/translations/fr-BE.js
@@ -0,0 +1,5 @@
+import fr from './fr.js';
+
+export default {
+ ...fr,
+};
diff --git a/packages/ui/components/input-range/translations/fr-FR.js b/packages/ui/components/input-range/translations/fr-FR.js
new file mode 100644
index 0000000000..da02615dea
--- /dev/null
+++ b/packages/ui/components/input-range/translations/fr-FR.js
@@ -0,0 +1,5 @@
+import fr from './fr.js';
+
+export default {
+ ...fr,
+};
diff --git a/packages/ui/components/input-range/translations/fr.js b/packages/ui/components/input-range/translations/fr.js
new file mode 100644
index 0000000000..a39fb5ee73
--- /dev/null
+++ b/packages/ui/components/input-range/translations/fr.js
@@ -0,0 +1,4 @@
+export default {
+ minimum: 'Minimum',
+ maximum: 'Maximum',
+};
diff --git a/packages/ui/components/input-range/translations/hu-HU.js b/packages/ui/components/input-range/translations/hu-HU.js
new file mode 100644
index 0000000000..130ba8f669
--- /dev/null
+++ b/packages/ui/components/input-range/translations/hu-HU.js
@@ -0,0 +1,5 @@
+import hu from './hu.js';
+
+export default {
+ ...hu,
+};
diff --git a/packages/ui/components/input-range/translations/hu.js b/packages/ui/components/input-range/translations/hu.js
new file mode 100644
index 0000000000..a39fb5ee73
--- /dev/null
+++ b/packages/ui/components/input-range/translations/hu.js
@@ -0,0 +1,4 @@
+export default {
+ minimum: 'Minimum',
+ maximum: 'Maximum',
+};
diff --git a/packages/ui/components/input-range/translations/it-IT.js b/packages/ui/components/input-range/translations/it-IT.js
new file mode 100644
index 0000000000..397b5a03bf
--- /dev/null
+++ b/packages/ui/components/input-range/translations/it-IT.js
@@ -0,0 +1,5 @@
+import it from './it.js';
+
+export default {
+ ...it,
+};
diff --git a/packages/ui/components/input-range/translations/it.js b/packages/ui/components/input-range/translations/it.js
new file mode 100644
index 0000000000..88eb5b0aaa
--- /dev/null
+++ b/packages/ui/components/input-range/translations/it.js
@@ -0,0 +1,4 @@
+export default {
+ minimum: 'Minimo',
+ maximum: 'Massimo',
+};
diff --git a/packages/ui/components/input-range/translations/nl-BE.js b/packages/ui/components/input-range/translations/nl-BE.js
new file mode 100644
index 0000000000..93467cea62
--- /dev/null
+++ b/packages/ui/components/input-range/translations/nl-BE.js
@@ -0,0 +1,5 @@
+import nl from './nl.js';
+
+export default {
+ ...nl,
+};
diff --git a/packages/ui/components/input-range/translations/nl-NL.js b/packages/ui/components/input-range/translations/nl-NL.js
new file mode 100644
index 0000000000..93467cea62
--- /dev/null
+++ b/packages/ui/components/input-range/translations/nl-NL.js
@@ -0,0 +1,5 @@
+import nl from './nl.js';
+
+export default {
+ ...nl,
+};
diff --git a/packages/ui/components/input-range/translations/nl.js b/packages/ui/components/input-range/translations/nl.js
new file mode 100644
index 0000000000..a39fb5ee73
--- /dev/null
+++ b/packages/ui/components/input-range/translations/nl.js
@@ -0,0 +1,4 @@
+export default {
+ minimum: 'Minimum',
+ maximum: 'Maximum',
+};
diff --git a/packages/ui/components/input-range/translations/pl-PL.js b/packages/ui/components/input-range/translations/pl-PL.js
new file mode 100644
index 0000000000..cb0d0b8b67
--- /dev/null
+++ b/packages/ui/components/input-range/translations/pl-PL.js
@@ -0,0 +1,5 @@
+import pl from './pl.js';
+
+export default {
+ ...pl,
+};
diff --git a/packages/ui/components/input-range/translations/pl.js b/packages/ui/components/input-range/translations/pl.js
new file mode 100644
index 0000000000..aa56512262
--- /dev/null
+++ b/packages/ui/components/input-range/translations/pl.js
@@ -0,0 +1,4 @@
+export default {
+ minimum: 'Minimum',
+ maximum: 'Maksymalnie',
+};
diff --git a/packages/ui/components/input-range/translations/ro-RO.js b/packages/ui/components/input-range/translations/ro-RO.js
new file mode 100644
index 0000000000..8acc92b29f
--- /dev/null
+++ b/packages/ui/components/input-range/translations/ro-RO.js
@@ -0,0 +1,5 @@
+import ro from './ro.js';
+
+export default {
+ ...ro,
+};
diff --git a/packages/ui/components/input-range/translations/ro.js b/packages/ui/components/input-range/translations/ro.js
new file mode 100644
index 0000000000..6e87095aae
--- /dev/null
+++ b/packages/ui/components/input-range/translations/ro.js
@@ -0,0 +1,4 @@
+export default {
+ minimum: 'Minim',
+ maximum: 'Maxim',
+};
diff --git a/packages/ui/components/input-range/translations/ru-RU.js b/packages/ui/components/input-range/translations/ru-RU.js
new file mode 100644
index 0000000000..e5f8f2aa1b
--- /dev/null
+++ b/packages/ui/components/input-range/translations/ru-RU.js
@@ -0,0 +1,5 @@
+import ru from './ru.js';
+
+export default {
+ ...ru,
+};
diff --git a/packages/ui/components/input-range/translations/ru.js b/packages/ui/components/input-range/translations/ru.js
new file mode 100644
index 0000000000..81817fa4ce
--- /dev/null
+++ b/packages/ui/components/input-range/translations/ru.js
@@ -0,0 +1,4 @@
+export default {
+ minimum: 'Минимум',
+ maximum: 'Максимум',
+};
diff --git a/packages/ui/components/input-range/translations/sk-SK.js b/packages/ui/components/input-range/translations/sk-SK.js
new file mode 100644
index 0000000000..3000b323f6
--- /dev/null
+++ b/packages/ui/components/input-range/translations/sk-SK.js
@@ -0,0 +1,5 @@
+import sk from './sk.js';
+
+export default {
+ ...sk,
+};
diff --git a/packages/ui/components/input-range/translations/sk.js b/packages/ui/components/input-range/translations/sk.js
new file mode 100644
index 0000000000..d4201f76dd
--- /dev/null
+++ b/packages/ui/components/input-range/translations/sk.js
@@ -0,0 +1,4 @@
+export default {
+ minimum: 'Minimálne',
+ maximum: 'Maximálne',
+};
diff --git a/packages/ui/components/input-range/translations/uk-UA.js b/packages/ui/components/input-range/translations/uk-UA.js
new file mode 100644
index 0000000000..e255cc021d
--- /dev/null
+++ b/packages/ui/components/input-range/translations/uk-UA.js
@@ -0,0 +1,5 @@
+import uk from './uk.js';
+
+export default {
+ ...uk,
+};
diff --git a/packages/ui/components/input-range/translations/uk.js b/packages/ui/components/input-range/translations/uk.js
new file mode 100644
index 0000000000..7194e73446
--- /dev/null
+++ b/packages/ui/components/input-range/translations/uk.js
@@ -0,0 +1,4 @@
+export default {
+ minimum: 'Мінімум',
+ maximum: 'Максимум',
+};
diff --git a/packages/ui/components/input-range/translations/zh-CN.js b/packages/ui/components/input-range/translations/zh-CN.js
new file mode 100644
index 0000000000..6702b7f7f7
--- /dev/null
+++ b/packages/ui/components/input-range/translations/zh-CN.js
@@ -0,0 +1,5 @@
+import zh from './zh.js';
+
+export default {
+ ...zh,
+};
diff --git a/packages/ui/components/input-range/translations/zh.js b/packages/ui/components/input-range/translations/zh.js
new file mode 100644
index 0000000000..ece04bb401
--- /dev/null
+++ b/packages/ui/components/input-range/translations/zh.js
@@ -0,0 +1,4 @@
+export default {
+ minimum: '最少',
+ maximum: '最多',
+};
diff --git a/packages/ui/package.json b/packages/ui/package.json
index f3aa8619e1..3b6693be20 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -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/*",