Feat: ARIA support with added semantics to the player and its children.

- make player element focusable - player has a role of application with internal elements - internal elements: Play/Pause/Replay buttons, title and track length Part of #14
gorork · Oct 31, 2016 · 5292f6b · 5292f6b
1 parent bc27f85
commit 5292f6b
Showing 1 changed file with 29 additions and 7 deletions.
diff --git a/paper-audio-player.html b/paper-audio-player.html
@@ -216,14 +216,26 @@
            on-tap="playPause">
 
         <!-- Icon -->
-        <paper-icon-button id="play" icon="paper-audio-icons:play-arrow" class="fit" hidden$="{{ _hidePlayIcon(isPlaying, canBePlayed) }}"></paper-icon-button>
-        <paper-icon-button id="pause" icon="paper-audio-icons:pause" class="fit" hidden$="{{ !isPlaying }}"></paper-icon-button>
+        <paper-icon-button id="play"
+                           icon="paper-audio-icons:play-arrow"
+                           class="fit"
+                           hidden$="{{ _hidePlayIcon(isPlaying, canBePlayed) }}"
+                           role="button"
+                           aria-label="Play Audio"
+                           tabindex="-1"></paper-icon-button>
+        <paper-icon-button id="pause"
+                           icon="paper-audio-icons:pause"
+                           class="fit"
+                           hidden$="{{ !isPlaying }}"
+                           role="button"
+                           aria-label="Pause Audio"
+                           tabindex="-1"></paper-icon-button>
         <iron-icon id="error" icon="paper-audio-icons:error-outline" class="fit" hidden$="{{ !error }}"></iron-icon>
       </div>
 
       <div id="center" class="flex" on-down="_onDown">
         <!-- Title -->
-        <div id="title" class="fit">{{ title }}</div>
+        <div id="title" class="fit" role="alert">{{ title }}</div>
 
         <!-- Audio HTML5 element -->
         <audio id="audio" src="{{ src }}" preload="{{ _setPreload(autoPlay, preload) }}"></audio>
@@ -235,7 +247,7 @@
 
         <!-- Secondary white title -->
         <div id="progress2" class="fit">
-          <div id="title2">{{ title }}</div>
+          <div id="title2" aria-hidden="true">{{ title }}</div>
         </div>
       </div>
 
@@ -245,11 +257,16 @@
 
         <!-- Duration -->
         <div id="duration" class="fit" hidden$="{{ ended }}">
-          <span class="fit">{{ _convertSecToMin(timeLeft) }}</span>
+          <span class="fit" role="timer" aria-label="Audio Track Length">{{ _convertSecToMin(timeLeft) }}</span>
         </div>
 
         <!-- Icon -->
-        <paper-icon-button id="replay" class="fit" icon="paper-audio-icons:replay"></paper-icon-button>
+        <paper-icon-button id="replay"
+                           class="fit"
+                           icon="paper-audio-icons:replay"
+                           tabindex="-1"
+                           role="button"
+                           aria-label="Replay Audio"></paper-icon-button>
       </div>
     </div>
   </template>
@@ -265,7 +282,11 @@
       //
       // Define component default attributes
       hostAttributes: {
-        tabindex: 0
+        tabindex: 0,
+        role: 'application',
+        //'aria-activedescendant': 'play',
+        'aria-label': 'Audio Player',
+        'aria-describedby': 'title'
       },
 
       //
@@ -490,6 +511,7 @@
         player.classList.add('cantplay');
         player.title = 'Sorry, can\'t play track: ' + player.title;
         player.error = true;
+        player.setAttribute('aria-invalid', 'true');
       },