From 5d1fe2eeaf7a244c679d8061da019811e38b7b5a Mon Sep 17 00:00:00 2001 From: Dmitry Lyzo Date: Tue, 18 Jan 2022 14:52:53 +0300 Subject: [PATCH] Add aria-labels for accessibility --- src/components/alphaPicker/alphaPicker.js | 5 +++-- src/components/cardbuilder/cardBuilder.js | 8 ++++++-- src/controllers/playback/video/index.html | 6 +++--- src/controllers/playback/video/index.js | 14 ++++++++++---- src/scripts/dom.js | 12 ++++++++++++ src/strings/en-us.json | 2 ++ 6 files changed, 36 insertions(+), 11 deletions(-) diff --git a/src/components/alphaPicker/alphaPicker.js b/src/components/alphaPicker/alphaPicker.js index 1579ef71cc..ac484bbf1c 100644 --- a/src/components/alphaPicker/alphaPicker.js +++ b/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 += `
`; if (options.mode === 'keyboard') { - html += ``; + html += ``; } 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 += ``; + html += ``; html += '
'; letters = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']; diff --git a/src/components/cardbuilder/cardBuilder.js b/src/components/cardbuilder/cardBuilder.js index 9d1b9d1205..c2300fb2d8 100644 --- a/src/components/cardbuilder/cardBuilder.js +++ b/src/components/cardbuilder/cardBuilder.js @@ -1344,8 +1344,10 @@ import ServerConnections from '../ServerConnections'; cardImageContainerClose = ''; } 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 ? (''; } @@ -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 + ''; + 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 + ''; } /** diff --git a/src/controllers/playback/video/index.html b/src/controllers/playback/video/index.html index 54f8f87118..3eb3050d49 100644 --- a/src/controllers/playback/video/index.html +++ b/src/controllers/playback/video/index.html @@ -47,7 +47,7 @@ - @@ -70,7 +70,7 @@
-
@@ -86,7 +86,7 @@ -
diff --git a/src/controllers/playback/video/index.js b/src/controllers/playback/video/index.js index 8f1046855b..32abe27275 100644 --- a/src/controllers/playback/video/index.js +++ b/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'); - btnPlayPause.setAttribute('title', globalize.translate('Play') + ' (k)'); + icon = 'play_arrow'; + title = globalize.translate('Play'); } else { - btnPlayPauseIcon.classList.add('pause'); - btnPlayPause.setAttribute('title', globalize.translate('ButtonPause') + ' (k)'); + icon = 'pause'; + title = globalize.translate('ButtonPause'); } + + btnPlayPauseIcon.classList.add(icon); + dom.setElementTitle(btnPlayPause, title + ' (k)', title); } function updatePlayerStateInternal(event, player, state) { diff --git a/src/scripts/dom.js b/src/scripts/dom.js index c08230f06a..8cc3e7d036 100644 --- a/src/scripts/dom.js +++ b/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 diff --git a/src/strings/en-us.json b/src/strings/en-us.json index 0eea93e049..d288e74cdf 100644 --- a/src/strings/en-us.json +++ b/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",