chore: add a11y labels to player controls

locales/de-de.js

@@ -55,6 +55,12 @@ module.exports = {
     PLAYER_CHAPTER_CURRENT: 'Zum Anfang des aktiven Kapitels springen: {index} - {title}',
     PLAYER_STEPPER_BACK: '{seconds} Sekunden zurückspringen',
     PLAYER_STEPPER_FORWARD: '{seconds} Sekunden vorspringen',
-    PROGRESSBAR_INPUT: 'Spielzeit in Prozent ändern'
+    PROGRESSBAR_INPUT: 'Spielzeit in Prozent ändern',
+    PLAYER_PLAY: 'Episode abspielen',
+    PLAYER_START: 'Starte Episode - Dauer: {hours} Stunden {minutes} Minuten {seconds} Sekunden',
+    PLAYER_RESTART: 'Episode neustarten',
+    PLAYER_ERROR: 'Nochmals versuchen Episode abzuspielen',
+    PLAYER_PAUSE: 'Episode pausieren',
+    PLAYER_LOADING: 'Episode lädt'
   }
 }

src/features/playbar/PlayBar.vue

@@ -74,6 +74,7 @@
                 class="mx-2 rounded-full shadow-none hover:shadow-md"
                 :type="buttonType"
                 @click="store.dispatch"
+                :title="playButtonA11y"
               />
               <stepper-button
                 type="forward"
@@ -211,7 +212,12 @@ export default {
         a11yChapterPrevious: selectors.a11y.chapterPrevious,
         a11yProgressBar: selectors.a11y.progressBar,
         a11yStepperBackwards: selectors.a11y.stepperBackwards,
-        a11yStepperForward: selectors.a11y.stepperForward
+        a11yStepperForward: selectors.a11y.stepperForward,
+        a11yPlayButtonPause: selectors.a11y.playButtonPause,
+        a11yPlayButtonDuration: selectors.a11y.playButtonDuration,
+        a11yPlayButtonReplay: selectors.a11y.playButtonReplay,
+        a11yPlayButtonPlay: selectors.a11y.playButtonPlay,
+        a11yPlayButtonError: selectors.a11y.playButtonError,
       })
     }
   },
@@ -259,6 +265,18 @@ export default {
     },
     progressColor() {
       return colors.primary[100]
+    },
+    playButtonA11y() {
+      switch(this.buttonType) {
+        case 'play':
+          return this.$t(this.a11yPlayButtonPlay.key, this.a11yPlayButtonPlay.attr);
+        case 'pause':
+          return this.$t(this.a11yPlayButtonPause.key, this.a11yPlayButtonPause.attr);
+        case 'restart':
+          return this.$t(this.a11yPlayButtonReplay.key, this.a11yPlayButtonReplay.attr);
+        default:
+          return ''
+      }
     }
   },
   mounted() {

src/store/reducers/selectors.js

@@ -1,4 +1,5 @@
 import { compose, either, propOr } from 'ramda'
+import { calcHours, calcMinutes, calcSeconds } from '@podlove/utils/time'
 import { selectors as driver } from '@podlove/player-state/driver'
 import { selectors as show } from '@podlove/player-state/show'
 import { selectors as media } from '@podlove/player-state/media'
@@ -13,7 +14,7 @@ import { selectors as quantiles } from '@podlove/player-state/quantiles'
 import { currentChapterByPlaytime } from '@podlove/utils/chapters'
 
 import { selectors as episodes } from './episodes'
-import { selectors as player, selectors } from './player'
+import { selectors as player } from './player'
 import { selectors as playbar } from './playbar'
 import { selectors as subscribeButton } from './subscribe-button'
 import { selectors as router } from './router'
@@ -208,5 +209,29 @@ export default {
     stepperForward: () => {
       return translation('A11Y.PLAYER_STEPPER_FORWARD', { seconds: 30 })
     },
+    playButtonPause: (state) => {
+      return translation('A11Y.PLAYER_PAUSE', chapters.current(state))
+    },
+    playButtonDuration: (state) => {
+      const time = {
+        duration: duration(state),
+        playtime: playtime(state)
+      }
+
+      return translation('A11Y.PLAYER_START', {
+        hours: calcHours(time.playtime > 0 ? time.playtime : time.duration),
+        minutes: calcMinutes(time.playtime > 0 ? time.playtime : time.duration),
+        seconds: calcSeconds(time.playtime > 0 ? playtime : time.duration)
+      })
+    },
+    playButtonReplay: () => {
+      return translation('A11Y.PLAYER_LOADING')
+    },
+    playButtonPlay: () => {
+      return translation('A11Y.PLAYER_PLAY')
+    },
+    playButtonError: () => {
+      return translation('A11Y.PLAYER_ERROR')
+    },
   }
 }