feat(slider): add localised label for slider thumb

packages/elements/src/slider/__snapshots__/Slider.md

@@ -23,7 +23,7 @@
       </div>
     </div>
     <div
-      aria-label="value"
+      aria-label="Value"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="0"

packages/elements/src/slider/index.ts

@@ -11,11 +11,12 @@ import {
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
 import { query } from '@refinitiv-ui/core/decorators/query.js';
-import { queryAll } from '@refinitiv-ui/core/decorators/query-all.js';
 import { state } from '@refinitiv-ui/core/decorators/state.js';
 import { ifDefined } from '@refinitiv-ui/core/directives/if-defined.js';
 import { createRef, ref, Ref } from '@refinitiv-ui/core/directives/ref.js';
 import { styleMap } from '@refinitiv-ui/core/directives/style-map.js';
+import { translate, TranslateDirective } from '@refinitiv-ui/translate';
+import '@refinitiv-ui/phrasebook/locale/en/slider.js';
 import { VERSION } from '../version.js';
 import '../number-field/index.js';
 import type { NumberField } from '../number-field';
@@ -198,6 +199,12 @@ export class Slider extends ControlElement {
   @property({ type: String, attribute: 'min-range' })
   public minRange = '0';
 
+  /**
+   * Slider internal translation strings
+   */
+  @translate({ scope: 'ef-slider' })
+  protected t!: TranslateDirective;
+
   /**
    * Converts value from string to number for calculations
    * @returns value of input as a number
@@ -1316,7 +1323,7 @@ export class Slider extends ControlElement {
         active=${ifDefined(isActive || undefined)}
         name="${name}"
         role="slider"
-        aria-label="${name}"
+        aria-label="${this.t(name.toUpperCase())}"
         tabindex="1"
         aria-valuemin=${valueMin}
         aria-valuemax=${valueMax}

packages/phrasebook/package.json

@@ -37,6 +37,7 @@
     "./locale/de/tree-select.js": "./lib/locale/de/tree-select.js",
     "./locale/de/notification.js": "./lib/locale/de/notification.js",
     "./locale/de/card.js": "./lib/locale/de/card.js",
+    "./locale/de/slider.js": "./lib/locale/de/slider.js",
     "./locale/en/appstate-bar.js": "./lib/locale/en/appstate-bar.js",
     "./locale/en/autosuggest.js": "./lib/locale/en/autosuggest.js",
     "./locale/en/calendar.js": "./lib/locale/en/calendar.js",
@@ -53,6 +54,7 @@
     "./locale/en/tree-select.js": "./lib/locale/en/tree-select.js",
     "./locale/en/notification.js": "./lib/locale/en/notification.js",
     "./locale/en/card.js": "./lib/locale/en/card.js",
+    "./locale/en/slider.js": "./lib/locale/en/slider.js",
     "./locale/ja/appstate-bar.js": "./lib/locale/ja/appstate-bar.js",
     "./locale/ja/autosuggest.js": "./lib/locale/ja/autosuggest.js",
     "./locale/ja/calendar.js": "./lib/locale/ja/calendar.js",
@@ -69,6 +71,7 @@
     "./locale/ja/tree-select.js": "./lib/locale/ja/tree-select.js",
     "./locale/ja/notification.js": "./lib/locale/ja/notification.js",
     "./locale/ja/card.js": "./lib/locale/ja/card.js",
+    "./locale/ja/slider.js": "./lib/locale/ja/slider.js",
     "./locale/zh/appstate-bar.js": "./lib/locale/zh/appstate-bar.js",
     "./locale/zh/autosuggest.js": "./lib/locale/zh/autosuggest.js",
     "./locale/zh/calendar.js": "./lib/locale/zh/calendar.js",
@@ -85,6 +88,7 @@
     "./locale/zh/tree-select.js": "./lib/locale/zh/tree-select.js",
     "./locale/zh/notification.js": "./lib/locale/zh/notification.js",
     "./locale/zh/card.js": "./lib/locale/zh/card.js",
+    "./locale/zh/slider.js": "./lib/locale/zh/slider.js",
     "./locale/zh-hant/appstate-bar.js": "./lib/locale/zh-hant/appstate-bar.js",
     "./locale/zh-hant/autosuggest.js": "./lib/locale/zh-hant/autosuggest.js",
     "./locale/zh-hant/calendar.js": "./lib/locale/zh-hant/calendar.js",
@@ -100,7 +104,8 @@
     "./locale/zh-hant/time-picker.js": "./lib/locale/zh-hant/time-picker.js",
     "./locale/zh-hant/tree-select.js": "./lib/locale/zh-hant/tree-select.js",
     "./locale/zh-hant/notification.js": "./lib/locale/zh-hant/notification.js",
-    "./locale/zh-hant/card.js": "./lib/locale/zh-hant/card.js"
+    "./locale/zh-hant/card.js": "./lib/locale/zh-hant/card.js",
+    "./locale/zh-hant/slider.js": "./lib/locale/zh-hant/slider.js"
   },
   "scripts": {
     "build": "tsc --sourceMap --declarationMap",

packages/phrasebook/src/locale/de/slider.ts

@@ -0,0 +1,11 @@
+import { Phrasebook } from '../../translation.js';
+
+const translations = {
+  FROM: 'From',
+  TO: 'To',
+  VALUE: 'Value'
+};
+
+Phrasebook.define('de', 'ef-slider', translations);
+
+export default translations;

packages/phrasebook/src/locale/en/slider.ts

@@ -0,0 +1,11 @@
+import { Phrasebook } from '../../translation.js';
+
+const translations = {
+  FROM: 'From',
+  TO: 'To',
+  VALUE: 'Value'
+};
+
+Phrasebook.define('en', 'ef-slider', translations);
+
+export default translations;

packages/phrasebook/src/locale/ja/slider.ts

@@ -0,0 +1,11 @@
+import { Phrasebook } from '../../translation.js';
+
+const translations = {
+  FROM: 'From',
+  TO: 'To',
+  VALUE: 'Value'
+};
+
+Phrasebook.define('ja', 'ef-slider', translations);
+
+export default translations;

packages/phrasebook/src/locale/zh-hant/slider.ts

@@ -0,0 +1,11 @@
+import { Phrasebook } from '../../translation.js';
+
+const translations = {
+  FROM: 'From',
+  TO: 'To',
+  VALUE: 'Value'
+};
+
+Phrasebook.define('zh-Hant', 'ef-slider', translations);
+
+export default translations;

packages/phrasebook/src/locale/zh/slider.ts

@@ -0,0 +1,11 @@
+import { Phrasebook } from '../../translation.js';
+
+const translations = {
+  FROM: 'From',
+  TO: 'To',
+  VALUE: 'Value'
+};
+
+Phrasebook.define('zh', 'ef-slider', translations);
+
+export default translations;