fix: aria-label i18n time range and seek buttons (#1253)

Co-authored-by: Emmanuel Pelletier <manu@habite.la>

Author: ronalduQualabs

src/js/media-seek-backward-button.ts

@@ -25,6 +25,10 @@ function getSlotTemplateHTML(_attrs: Record<string, string>, props: Record<strin
   `;
 }
 
+const updateAriaLabel = (el: MediaSeekBackwardButton, seekOffset: number): void => {
+  el.setAttribute('aria-label',  t('seek back {seekOffset} seconds', { seekOffset: seekOffset }));
+};
+
 function getTooltipContentHTML() {
   return t('Seek backward');
 }
@@ -66,6 +70,8 @@ class MediaSeekBackwardButton extends MediaChromeButton {
     newValue: string | null
   ): void {
     super.attributeChangedCallback(attrName, _oldValue, newValue);
+    updateAriaLabel(this, this.seekOffset);
+
 
     if (attrName === Attributes.SEEK_OFFSET) {
       this.seekOffset = getNumericAttr(

src/js/media-seek-forward-button.ts

@@ -25,6 +25,10 @@ function getSlotTemplateHTML(_attrs: Record<string, string>, props: Record<strin
   `;
 }
 
+const updateAriaLabel = (el: MediaSeekForwardButton, seekOffset: number): void => {
+  el.setAttribute('aria-label',  t('seek forward {seekOffset} seconds', { seekOffset: seekOffset }));
+};
+
 function getTooltipContentHTML() {
   return t('Seek forward');
 }
@@ -66,6 +70,7 @@ class MediaSeekForwardButton extends MediaChromeButton {
     newValue: string | null
   ): void {
     super.attributeChangedCallback(attrName, _oldValue, newValue);
+    updateAriaLabel(this, this.seekOffset);
 
     if (attrName === Attributes.SEEK_OFFSET) {
       this.seekOffset = getNumericAttr(

src/js/media-time-display.ts

@@ -51,8 +51,6 @@ const formatTimesLabel = (
   return `${timeLabel}${timesSep}${formatTime(endTime)}`;
 };
 
-const DEFAULT_MISSING_TIME_PHRASE = 'video not loaded, unknown time.';
-
 const updateAriaValueText = (el: MediaTimeDisplay): void => {
   const currentTime = el.mediaCurrentTime;
   const [, seekableEnd] = el.mediaSeekable ?? [];
@@ -63,7 +61,7 @@ const updateAriaValueText = (el: MediaTimeDisplay): void => {
     endTime = seekableEnd;
   }
   if (currentTime == null || endTime === null) {
-    el.setAttribute('aria-valuetext', t(DEFAULT_MISSING_TIME_PHRASE));
+    el.setAttribute('aria-valuetext', t('video not loaded, unknown time.'));
     return;
   }
 
@@ -89,6 +87,11 @@ function getSlotTemplateHTML(_attrs: Record<string, string>, props: Record<strin
   `;
 }
 
+const updateAriaLabel = (el: MediaTimeDisplay): void => {
+  el.setAttribute('aria-label',  t('playback time'));
+};
+
+
 /**
  * @attr {boolean} remaining - Toggle on to show the remaining time instead of elapsed time.
  * @attr {boolean} showduration - Toggle on to show the duration.
@@ -180,6 +183,7 @@ class MediaTimeDisplay extends MediaTextDisplay {
     oldValue: string | null,
     newValue: string | null
   ): void {
+    updateAriaLabel(this);
     if (CombinedAttributes.includes(attrName)) {
       this.update();
     } else if (attrName === 'disabled' && newValue !== oldValue) {

src/js/media-time-range.ts

@@ -28,14 +28,12 @@ type Rects = {
   bounds?: DOMRect;
 };
 
-const DEFAULT_MISSING_TIME_PHRASE = 'video not loaded, unknown time.';
-
 const updateAriaValueText = (el: any): void => {
   const range = el.range;
   const currentTimePhrase = formatAsTimePhrase(+calcTimeFromRangeValue(el));
   const totalTimePhrase = formatAsTimePhrase(+el.mediaSeekableEnd);
   const fullPhrase = !(currentTimePhrase && totalTimePhrase)
-    ? t(DEFAULT_MISSING_TIME_PHRASE)
+    ? t('video not loaded, unknown time.')
     : t('{currentTime} of {totalTime}', {
         currentTime: currentTimePhrase,
         totalTime: totalTimePhrase,