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

.changeset/sour-students-invent.md

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

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
+```html preview-story
-export const main = () => html`
+<lion-input-range min="200" max="500" .modelValue="${300}" label="Input range"></lion-input-range>
-  <lion-input-range min="200" max="500" .modelValue="${300}" label="Input range"></lion-input-range>
-`;
 ```
 
 ## Features

docs/components/input-range/use-cases.md

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

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`
               <div class="input-range__limits">
-                <span>${formatNumber(this.min)}</span>
+                <div>
-                <span>${formatNumber(this.max)}</span>
+                  <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>
             `
           : ''}

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

packages/ui/components/input-range/test/lion-input-range.test.js

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

packages/ui/components/input-range/translations/bg-BG.js

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

packages/ui/components/input-range/translations/bg.js

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

packages/ui/components/input-range/translations/cs-CZ.js

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

packages/ui/components/input-range/translations/cs.js

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

packages/ui/components/input-range/translations/de-DE.js

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

packages/ui/components/input-range/translations/de.js

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

packages/ui/components/input-range/translations/en-AU.js

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

packages/ui/components/input-range/translations/en-GB.js

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

packages/ui/components/input-range/translations/en-PH.js

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

packages/ui/components/input-range/translations/en-US.js

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

packages/ui/components/input-range/translations/en.js

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

packages/ui/components/input-range/translations/es-ES.js

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

packages/ui/components/input-range/translations/es.js

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

packages/ui/components/input-range/translations/fr-BE.js

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

packages/ui/components/input-range/translations/fr-FR.js

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

packages/ui/components/input-range/translations/fr.js

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

packages/ui/components/input-range/translations/hu-HU.js

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

packages/ui/components/input-range/translations/hu.js

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

packages/ui/components/input-range/translations/it-IT.js

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

packages/ui/components/input-range/translations/it.js

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

packages/ui/components/input-range/translations/nl-BE.js

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

packages/ui/components/input-range/translations/nl-NL.js

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

packages/ui/components/input-range/translations/nl.js

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

packages/ui/components/input-range/translations/pl-PL.js

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

packages/ui/components/input-range/translations/pl.js

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

packages/ui/components/input-range/translations/ro-RO.js

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

packages/ui/components/input-range/translations/ro.js

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

packages/ui/components/input-range/translations/ru-RU.js

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

packages/ui/components/input-range/translations/ru.js

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

packages/ui/components/input-range/translations/sk-SK.js

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

packages/ui/components/input-range/translations/sk.js

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

packages/ui/components/input-range/translations/uk-UA.js

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

packages/ui/components/input-range/translations/uk.js

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

packages/ui/components/input-range/translations/zh-CN.js

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

packages/ui/components/input-range/translations/zh.js

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

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/*",