Merge pull request #133 from WordPress/track-ally

src/components/AudioTrack/AudioTrack.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="audio-track">
+  <div
+    class="audio-track"
+    aria-label="$t('audio-track.aria-label')"
+    role="region"
+  >
     <!-- Only visible in compact player -->
     <div v-if="isCompact" class="info-section flex justify-between">
       <i18n path="audio-track.title" tag="p">
@@ -13,28 +17,34 @@
       {{ audio.category }}
     </div>
 
-    <div class="waveform-section flex flex-row gap-2">
+    <div class="interactive-section flex flex-row gap-2">
       <PlayPause
         v-if="isCompact"
         class="flex-shrink-0"
         :is-playing="isPlaying"
         :disabled="!isReady"
         @toggle="setPlayerState"
       />
-      <Waveform
-        :class="isCompact ? 'h-20' : 'h-30'"
-        :is-ready="isReady"
-        :current-time="currentTime"
-        :duration="duration"
-        :peaks="audio.peaks"
-        :show-duration="isCompact"
-        @seeked="setPosition"
-      />
+      <div
+        @keypress.enter="setPlayerState(!isPlaying)"
+        @keypress.space="setPlayerState(!isPlaying)"
+      >
+        <Waveform
+          :class="isCompact ? 'h-20' : 'h-30'"
+          :is-ready="isReady"
+          :current-time="currentTime"
+          :duration="duration"
+          :peaks="audio.peaks"
+          :show-duration="isCompact"
+          @seeked="setPosition"
+        />
+      </div>
     </div>
 
     <!-- Only visible in expanded player -->
     <div v-if="!isCompact" class="info-section flex flex-row gap-6">
       <PlayPause
+        :aria-controls="audio.id"
         class="self-start flex-shrink-0"
         :is-playing="isPlaying"
         :disabled="!isReady"
@@ -62,6 +72,7 @@
     <!-- eslint-disable vuejs-accessibility/media-has-caption -->
     <audio
       v-show="false"
+      :id="audio.id"
       ref="audio"
       controls
       :src="audio.url"
@@ -109,7 +120,6 @@ export default {
     player: null, // HTMLAudioElement
     currentTime: 0,
     duration: 0,
-
     isReady: false,
     isPlaying: false,
   }),

src/components/AudioTrack/PlayPause.vue

@@ -1,12 +1,16 @@
 <template>
   <button
+    type="button"
     class="bg-dark-charcoal h-20 w-20 flex items-center justify-center disabled:opacity-70"
     @click="toggle"
   >
+    <span class="sr-only">{{ label }}</span>
     <svg
       class="text-white h-8 w-8"
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 24 24"
+      aria-hidden="true"
+      focusable="false"
     >
       <use v-if="isPlaying" :href="`${icons.pause}#icon`" />
       <use v-else :href="`${icons.play}#icon`" />
@@ -38,6 +42,11 @@ export default {
       pause: pauseIcon,
     },
   }),
+  computed: {
+    label() {
+      return this.$t(this.isPlaying ? 'play-pause.pause' : 'play-pause.play')
+    },
+  },
   methods: {
     toggle() {
       this.$emit('toggle', !this.isPlaying)

src/components/AudioTrack/Waveform.vue

@@ -2,15 +2,25 @@
   <div
     ref="waveform"
     class="waveform relative bg-dark-charcoal-04 overflow-x-hidden"
+    tabIndex="0"
+    role="slider"
+    :aria-label="$t('waveform.label')"
+    aria-orientation="horizontal"
+    aria-valuemin="0"
+    :aria-valuemax="duration"
+    :aria-valuenow="currentTime"
+    :aria-valuetext="currentTimeText"
+    @keydown.arrow-left="seekJump"
+    @keydown.arrow-right="seekJump"
+    @mousemove="setSeekProgress"
+    @mouseleave="clearSeekProgress"
+    @click="seek"
   >
     <svg
       class="w-full h-full"
       xmlns="http://www.w3.org/2000/svg"
       :viewBox="viewBox"
       preserveAspectRatio="none"
-      @mousemove="setSeekProgress"
-      @mouseleave="clearSeekProgress"
-      @click="seek"
     >
       <rect
         class="fill-yellow"
@@ -123,6 +133,12 @@ export default {
      */
     seekPercentage: null,
 
+    /**
+     * the length in seconds to seek jump
+     */
+    seekJumpLength: 1,
+    modifiedSeekJumpLength: 15,
+
     waveformWidth: 100, // dummy start value
     observer: null, // ResizeObserver
   }),
@@ -131,6 +147,20 @@ export default {
       return this.isReady ? this.currentTime / this.duration : 0
     },
 
+    // The waveform current time as a text string
+    currentTimeText() {
+      const time = this.timeFmt(this.currentTime)
+      return this.$t('waveform.current-time', { time })
+    },
+
+    // The seekJump length as a % of the track
+    seekJumpPercentage() {
+      return this.isReady ? this.seekJumpLength / this.duration : 0
+    },
+    modifiedSeekJumpPercentage() {
+      return this.isReady ? this.modifiedSeekJumpLength / this.duration : 0
+    },
+
     peakCount() {
       return Math.floor(
         (this.waveformWidth - this.barGap) / (this.barWidth + this.barGap)
@@ -203,6 +233,16 @@ export default {
     seek(event) {
       this.$emit('seeked', this.getPositionPercentage(event))
     },
+    seekJump(event) {
+      this.clearSeekProgress()
+      const { key, shiftKey } = event
+      const amount = shiftKey
+        ? this.modifiedSeekJumpPercentage
+        : this.seekJumpPercentage
+      const seekPercentage =
+        this.percentage + (key.includes('Left') ? -amount : amount)
+      this.$emit('seeked', seekPercentage)
+    },
   },
 }
 </script>

src/components/AudioTrack/meta/AudioTrack.stories.mdx

@@ -20,6 +20,7 @@ export const Template = (args, { argTypes }) => ({
 
 export const defaultArgs = {
   audio: {
+    id: 196543567,
     title: 'Eine kleine Nachtmusik',
     url:
       'https://upload.wikimedia.org/wikipedia/commons/2/24/Mozart_-_Eine_kleine_Nachtmusik_-_1._Allegro.ogg',

src/locales/en.json

@@ -570,9 +570,16 @@
     "edge": "Edge"
   },
   "waveform": {
-    "loading": "Loading..."
+    "label": "Audio seek bar",
+    "loading": "Loading...",
+    "current-time": "{time} seconds"
   },
   "audio-track": {
-    "title": "{title} by {creator}"
+    "title": "{title} by {creator}",
+    "aria-label": "Audio Player"
+  },
+  "play-pause": {
+    "play": "Play",
+    "pause": "Pause"
   }
 }