fix(ADA-1791): [ORS] - Player - Screen reader (NVDA) is interpreting …

…time values as clock times (#964)

Issue:
In non English languages the time is always time of time with no translation.

Fix:
Adding translations to "of" word

related to #955

Resolves ADA-1791

src/components/seekbar/seekbar.tsx

@@ -44,7 +44,8 @@ const COMPONENT_NAME = 'SeekBar';
 const KEYBOARD_DEFAULT_SEEK_JUMP: number = 5;
 
 const translates = {
-  sliderAriaLabel: <Text id="controls.seekBarSlider">Seek bar</Text>
+  sliderAriaLabel: <Text id="controls.seekBarSlider">Seek bar</Text>,
+  valuetextLabel: <Text id="controls.valuetextLabel">of</Text>
 };
 
 /**
@@ -580,11 +581,9 @@ class SeekBar extends Component<any, any> {
         aria-valuemin={0}
         aria-valuemax={Math.round(this.props.duration)}
         aria-valuenow={Math.round(this.props.currentTime)}
-        aria-valuetext={`${getDurationAsText(props.currentTime, props.player.config.ui.locale, true)} of ${getDurationAsText(
-          props.duration,
-          props.player.config.ui.locale,
-          true
-        )}`}
+        aria-valuetext={`${getDurationAsText(props.currentTime, props.player.config.ui.locale, true)} ${
+          this.props.valuetextLabel
+        } ${getDurationAsText(props.duration, props.player.config.ui.locale, true)}`}
         onMouseOver={this.onSeekbarMouseOver}
         onMouseLeave={this.onSeekbarMouseLeave}
         onMouseMove={this.onSeekbarMouseMove}

translations/de.i18n.json

@@ -25,7 +25,8 @@
       "logo": "Logo",
       "seekBarSlider": "Suchleiste",
       "readLess": "Weniger",
-      "readMore": "Mehr"
+      "readMore": "Mehr",
+      "valuetextLabel": "von"
     },
     "unmute": {
       "unmute": "Ton an"

translations/en.i18n.json

@@ -26,7 +26,8 @@
       "logo": "Logo",
       "seekBarSlider": "Seek bar",
       "readLess": "Less",
-      "readMore": "More"
+      "readMore": "More",
+      "valuetextLabel": "of"
     },
     "unmute": {
       "unmute": "Unmute"