mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
Add aria-labels for accessibility
This commit is contained in:
Dmitry Lyzo
parent
161ce2404b
commit
5d1fe2eeaf
6 changed files with 36 additions and 11 deletions
|
|
@ -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'];
|
||||
|
|
|
|||
|
|
@ -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 + '>';
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue