Add aria-labels for accessibility

src/components/alphaPicker/alphaPicker.js

@@ -8,6 +8,7 @@
 import focusManager from '../focusManager';
 import layoutManager from '../layoutManager';
 import dom from '../../scripts/dom';
+import globalize from '../../scripts/globalize';
 import './style.scss';
 import '../../elements/emby-button/paper-icon-button-light';
 import 'material-design-icons-iconfont';
@@ -75,7 +76,7 @@ import 'material-design-icons-iconfont';
 
         html += `<div class="${rowClassName}">`;
         if (options.mode === 'keyboard') {
-            html += `<button data-value=" " is="paper-icon-button-light" class="${alphaPickerButtonClassName}"><span class="material-icons alphaPickerButtonIcon space_bar" aria-hidden="true"></span></button>`;
+            html += `<button data-value=" " is="paper-icon-button-light" class="${alphaPickerButtonClassName}" aria-label="${globalize.translate('ButtonSpace')}"><span class="material-icons alphaPickerButtonIcon space_bar" aria-hidden="true"></span></button>`;
         } else {
             letters = ['#'];
             html += mapLetters(letters, vertical).join('');
@@ -85,7 +86,7 @@ import 'material-design-icons-iconfont';
         html += mapLetters(letters, vertical).join('');
 
         if (options.mode === 'keyboard') {
-            html += `<button data-value="backspace" is="paper-icon-button-light" class="${alphaPickerButtonClassName}"><span class="material-icons alphaPickerButtonIcon backspace" aria-hidden="true"></span></button>`;
+            html += `<button data-value="backspace" is="paper-icon-button-light" class="${alphaPickerButtonClassName}" aria-label="${globalize.translate('ButtonBackspace')}"><span class="material-icons alphaPickerButtonIcon backspace" aria-hidden="true"></span></button>`;
             html += '</div>';
 
             letters = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];

src/components/cardbuilder/cardBuilder.js

@@ -1344,8 +1344,10 @@ import ServerConnections from '../ServerConnections';
 
                 cardImageContainerClose = '</div>';
             } else {
+                const cardImageContainerAriaLabelAttribute = ` aria-label="${item.Name}"`;
+
                 // Don't use the IMG tag with safari because it puts a white border around it
-                cardImageContainerOpen = imgUrl ? ('<button data-action="' + action + '" class="' + cardImageContainerClass + ' ' + cardContentClass + ' itemAction lazy" data-src="' + imgUrl + '" ' + blurhashAttrib + '>') : ('<button data-action="' + action + '" class="' + cardImageContainerClass + ' ' + cardContentClass + ' itemAction">');
+                cardImageContainerOpen = imgUrl ? ('<button data-action="' + action + '" class="' + cardImageContainerClass + ' ' + cardContentClass + ' itemAction lazy" data-src="' + imgUrl + '" ' + blurhashAttrib + cardImageContainerAriaLabelAttribute + '>') : ('<button data-action="' + action + '" class="' + cardImageContainerClass + ' ' + cardContentClass + ' itemAction"' + cardImageContainerAriaLabelAttribute + '>');
 
                 cardImageContainerClose = '</button>';
             }
@@ -1420,10 +1422,12 @@ import ServerConnections from '../ServerConnections';
             }
 
             let actionAttribute;
+            let ariaLabelAttribute = '';
 
             if (tagName === 'button') {
                 className += ' itemAction';
                 actionAttribute = ' data-action="' + action + '"';
+                ariaLabelAttribute = ` aria-label="${item.Name}"`;
             } else {
                 actionAttribute = '';
             }
@@ -1450,7 +1454,7 @@ import ServerConnections from '../ServerConnections';
                 additionalCardContent += getHoverMenuHtml(item, action);
             }
 
-            return '<' + tagName + ' data-index="' + index + '"' + timerAttributes + actionAttribute + ' data-isfolder="' + (item.IsFolder || false) + '" data-serverid="' + (item.ServerId || options.serverId) + '" data-id="' + (item.Id || item.ItemId) + '" data-type="' + item.Type + '"' + mediaTypeData + collectionTypeData + channelIdData + pathData + positionTicksData + collectionIdData + playlistIdData + contextData + parentIdData + startDate + endDate + ' data-prefix="' + prefix + '" class="' + className + '">' + cardImageContainerOpen + innerCardFooter + cardImageContainerClose + overlayButtons + additionalCardContent + cardScalableClose + outerCardFooter + cardBoxClose + '</' + tagName + '>';
+            return '<' + tagName + ' data-index="' + index + '"' + timerAttributes + actionAttribute + ' data-isfolder="' + (item.IsFolder || false) + '" data-serverid="' + (item.ServerId || options.serverId) + '" data-id="' + (item.Id || item.ItemId) + '" data-type="' + item.Type + '"' + mediaTypeData + collectionTypeData + channelIdData + pathData + positionTicksData + collectionIdData + playlistIdData + contextData + parentIdData + startDate + endDate + ' data-prefix="' + prefix + '" class="' + className + '"' + ariaLabelAttribute + '>' + cardImageContainerOpen + innerCardFooter + cardImageContainerClose + overlayButtons + additionalCardContent + cardScalableClose + outerCardFooter + cardBoxClose + '</' + tagName + '>';
         }
 
         /**

src/controllers/playback/video/index.html

@@ -47,7 +47,7 @@
                     <span class="xlargePaperIconButton material-icons pause" aria-hidden="true"></span>
                 </button>
 
-                <button is="paper-icon-button-light" class="btnFastForward" title="${FastForward} (l)">
+                <button is="paper-icon-button-light" class="btnFastForward" title="${FastForward} (l)" aria-label="${FastForward}">
                     <span class="xlargePaperIconButton material-icons fast_forward" aria-hidden="true"></span>
                 </button>
 
@@ -70,7 +70,7 @@
                     <span class="xlargePaperIconButton material-icons audiotrack" aria-hidden="true"></span>
                 </button>
                 <div class="volumeButtons hide-mouse-idle-tv">
-                    <button is="paper-icon-button-light" class="buttonMute autoSize" title="${Mute} (m)">
+                    <button is="paper-icon-button-light" class="buttonMute autoSize" title="${Mute} (m)" aria-label="${Mute}">
                         <span class="xlargePaperIconButton material-icons volume_up" aria-hidden="true"></span>
                     </button>
                     <div class="sliderContainer osdVolumeSliderContainer">
@@ -86,7 +86,7 @@
                 <button is="paper-icon-button-light" class="btnPip hide autoSize" title="${PictureInPicture}">
                     <span class="xlargePaperIconButton material-icons picture_in_picture_alt" aria-hidden="true"></span>
                 </button>
-                <button is="paper-icon-button-light" class="btnFullscreen hide autoSize" title="${Fullscreen} (f)">
+                <button is="paper-icon-button-light" class="btnFullscreen hide autoSize" title="${Fullscreen} (f)" aria-label="${Fullscreen}">
                     <span class="xlargePaperIconButton material-icons fullscreen" aria-hidden="true"></span>
                 </button>
             </div>

src/controllers/playback/video/index.js

@@ -643,13 +643,19 @@ import { appRouter } from '../../../components/appRouter';
 
             btnPlayPauseIcon.classList.remove('play_arrow', 'pause');
 
+            let icon;
+            let title;
+
             if (isPaused) {
-                btnPlayPauseIcon.classList.add('play_arrow');
+                icon = 'play_arrow';
-                btnPlayPause.setAttribute('title', globalize.translate('Play') + ' (k)');
+                title = globalize.translate('Play');
             } else {
-                btnPlayPauseIcon.classList.add('pause');
+                icon = 'pause';
-                btnPlayPause.setAttribute('title', globalize.translate('ButtonPause') + ' (k)');
+                title = globalize.translate('ButtonPause');
             }
+
+            btnPlayPauseIcon.classList.add(icon);
+            dom.setElementTitle(btnPlayPause, title + ' (k)', title);
         }
 
         function updatePlayerStateInternal(event, player, state) {

src/scripts/dom.js

@@ -262,6 +262,17 @@
 
 /* eslint-enable indent */
 
+/**
+ * Sets title and ARIA-label of element.
+ * @param {HTMLElement} elem - Element to set the title and ARIA-label.
+ * @param {string} title - Title.
+ * @param {string?} [ariaLabel] - ARIA-label.
+ */
+export function setElementTitle(elem, title, ariaLabel) {
+    elem.setAttribute('title', title);
+    elem.setAttribute('aria-label', ariaLabel);
+}
+
 export default {
     parentWithAttribute: parentWithAttribute,
     parentWithClass: parentWithClass,
@@ -270,6 +281,7 @@ export default {
     removeEventListener: removeEventListener,
     getWindowSize: getWindowSize,
     getScreenWidth: getScreenWidth,
+    setElementTitle,
     whichTransitionEvent: whichTransitionEvent,
     whichAnimationEvent: whichAnimationEvent,
     whichAnimationCancelEvent: whichAnimationCancelEvent

src/strings/en-us.json

@@ -75,6 +75,7 @@
     "ButtonArrowRight": "Right",
     "ButtonAudioTracks": "Audio Tracks",
     "ButtonBack": "Back",
+    "ButtonBackspace": "Backspace",
     "ButtonCancel": "Cancel",
     "ButtonCast": "Cast to Device",
     "ButtonChangeServer": "Change Server",
@@ -109,6 +110,7 @@
     "ButtonSignIn": "Sign In",
     "ButtonSignOut": "Sign Out",
     "ButtonExitApp": "Exit Application",
+    "ButtonSpace": "Space",
     "ButtonSplit": "Split",
     "ButtonStart": "Start",
     "ButtonStop": "Stop",