mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Merge pull request #3463 from dmitrylyzo/accessibility

Browse source 
Add more accessibility
This commit is contained in:
Bill Thornton 2022-03-04 11:00:59 -05:00 • committed by GitHub
commit 5d8b527b92
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
37 changed files with 98 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/actionSheet/actionSheet.js
View file

@ -141,7 +141,7 @@ export function show(options) {
}
if (layoutManager.tv) {
html += `<button is="paper-icon-button-light" class="btnCloseActionSheet hide-mouse-idle-tv" tabindex="-1">
html += `<button is="paper-icon-button-light" class="btnCloseActionSheet hide-mouse-idle-tv" tabindex="-1" title="${globalize.translate('ButtonBack')}">
<span class="material-icons arrow_back" aria-hidden="true"></span>
</button>`;
}

5
src/components/alphaPicker/alphaPicker.js
View file

@ -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'];

18
src/components/cardbuilder/cardBuilder.js
View file

@ -790,7 +790,7 @@ import ServerConnections from '../ServerConnections';
if (isOuterFooter && options.cardLayout && layoutManager.mobile) {
if (options.cardFooterAside !== 'none') {
html += '<button is="paper-icon-button-light" class="itemAction btnCardOptions cardText-secondary" data-action="menu"><span class="material-icons more_vert" aria-hidden="true"></span></button>';
html += `<button is="paper-icon-button-light" class="itemAction btnCardOptions cardText-secondary" data-action="menu" title="${globalize.translate('ButtonMore')}"><span class="material-icons more_vert" aria-hidden="true"></span></button>`;
}
}
@ -1309,15 +1309,15 @@ import ServerConnections from '../ServerConnections';
const btnCssClass = 'cardOverlayButton cardOverlayButton-br itemAction';
if (options.centerPlayButton) {
overlayButtons += '<button is="paper-icon-button-light" class="' + btnCssClass + ' cardOverlayButton-centered" data-action="play"><span class="material-icons cardOverlayButtonIcon play_arrow" aria-hidden="true"></span></button>';
overlayButtons += `<button is="paper-icon-button-light" class="${btnCssClass} cardOverlayButton-centered" data-action="play" title="${globalize.translate('Play')}"><span class="material-icons cardOverlayButtonIcon play_arrow" aria-hidden="true"></span></button>`;
}
if (overlayPlayButton && !item.IsPlaceHolder && (item.LocationType !== 'Virtual' || !item.MediaType || item.Type === 'Program') && item.Type !== 'Person') {
overlayButtons += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="play"><span class="material-icons cardOverlayButtonIcon play_arrow" aria-hidden="true"></span></button>';
overlayButtons += `<button is="paper-icon-button-light" class="${btnCssClass}" data-action="play" title="${globalize.translate('Play')}"><span class="material-icons cardOverlayButtonIcon play_arrow" aria-hidden="true"></span></button>`;
}
if (options.overlayMoreButton) {
overlayButtons += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="menu"><span class="material-icons cardOverlayButtonIcon more_vert" aria-hidden="true"></span></button>';
overlayButtons += `<button is="paper-icon-button-light" class="${btnCssClass}" data-action="menu" title="${globalize.translate('ButtonMore')}"><span class="material-icons cardOverlayButtonIcon more_vert" aria-hidden="true"></span></button>`;
}
}
@ -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 + '>';
}
/**
@ -1488,7 +1492,7 @@ import ServerConnections from '../ServerConnections';
html += '<button is="emby-ratingbutton" type="button" data-action="none" class="' + btnCssClass + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-likes="' + likes + '" data-isfavorite="' + (userData.IsFavorite) + '"><span class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover favorite" aria-hidden="true"></span></button>';
}
html += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="menu"><span class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover more_vert" aria-hidden="true"></span></button>';
html += `<button is="paper-icon-button-light" class="${btnCssClass}" data-action="menu" title="${globalize.translate('ButtonMore')}"><span class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover more_vert" aria-hidden="true"></span></button>`;
html += '</div>';
html += '</div>';

2
src/components/channelMapper/channelMapper.js
View file

@ -127,7 +127,7 @@ export default class channelMapper {
let html = '';
const title = globalize.translate('MapChannels');
html += '<div class="formDialogHeader">';
html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><span class="material-icons arrow_back" aria-hidden="true"></span></button>';
html += `<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1" title="${globalize.translate('ButtonBack')}"><span class="material-icons arrow_back" aria-hidden="true"></span></button>`;
html += '<h3 class="formDialogHeaderTitle">';
html += title;
html += '</h3>';

2
src/components/collectionEditor/collectionEditor.js
View file

@ -229,7 +229,7 @@ import toast from '../toast/toast';
const title = items.length ? globalize.translate('HeaderAddToCollection') : globalize.translate('NewCollection');
html += '<div class="formDialogHeader">';
html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><span class="material-icons arrow_back" aria-hidden="true"></span></button>';
html += `<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1" title="${globalize.translate('ButtonBack')}"><span class="material-icons arrow_back" aria-hidden="true"></span></button>`;
html += '<h3 class="formDialogHeaderTitle">';
html += title;
html += '</h3>';

2
src/components/directorybrowser/directorybrowser.js
View file

@ -264,7 +264,7 @@ class DirectoryBrowser {
let html = '';
html += '<div class="formDialogHeader">';
html += '<button is="paper-icon-button-light" class="btnCloseDialog autoSize" tabindex="-1"><span class="material-icons arrow_back" aria-hidden="true"></span></button>';
html += `<button is="paper-icon-button-light" class="btnCloseDialog autoSize" tabindex="-1" title="${globalize.translate('ButtonBack')}"><span class="material-icons arrow_back" aria-hidden="true"></span></button>`;
html += '<h3 class="formDialogHeaderTitle">';
html += options.header || globalize.translate('HeaderSelectPath');
html += '</h3>';

2
src/components/filtermenu/filtermenu.js
View file

@ -228,7 +228,7 @@ class FilterMenu {
let html = '';
html += '<div class="formDialogHeader">';
html += '<button is="paper-icon-button-light" class="btnCancel hide-mouse-idle-tv" tabindex="-1"><span class="material-icons arrow_back" aria-hidden="true"></span></button>';
html += `<button is="paper-icon-button-light" class="btnCancel hide-mouse-idle-tv" tabindex="-1" title="${globalize.translate('ButtonBack')}"><span class="material-icons arrow_back" aria-hidden="true"></span></button>`;
html += '<h3 class="formDialogHeaderTitle">${Filters}</h3>';
html += '</div>';

2
src/components/imageDownloader/imageDownloader.template.html
View file

@ -1,5 +1,5 @@
<div class="formDialogHeader">
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><span class="material-icons arrow_back" aria-hidden="true"></span></button>
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1" title="${ButtonBack}"><span class="material-icons arrow_back" aria-hidden="true"></span></button>
<h3 class="formDialogHeaderTitle">
${Search}
</h3>

2
src/components/imageOptionsEditor/imageOptionsEditor.template.html
View file

@ -1,5 +1,5 @@
<div class="formDialogHeader">
<button type="button" is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><span class="material-icons arrow_back" aria-hidden="true"></span></button>
<button type="button" is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1" title="${ButtonBack}"><span class="material-icons arrow_back" aria-hidden="true"></span></button>
<h3 class="formDialogHeaderTitle">
${HeaderImageOptions}
</h3>

2
src/components/imageUploader/imageUploader.template.html
View file

@ -1,5 +1,5 @@
<div class="formDialogHeader">
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><span class="material-icons arrow_back" aria-hidden="true"></span></button>
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1" title="${ButtonBack}"><span class="material-icons arrow_back" aria-hidden="true"></span></button>
<h3 class="formDialogHeaderTitle">
${HeaderUploadImage}
</h3>

2
src/components/imageeditor/imageeditor.template.html
View file

@ -1,5 +1,5 @@
<div class="formDialogHeader">
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><span class="material-icons arrow_back" aria-hidden="true"></span></button>
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1" title="${ButtonBack}"><span class="material-icons arrow_back" aria-hidden="true"></span></button>
<h3 class="formDialogHeaderTitle">
${HeaderEditImages}
</h3>

2
src/components/itemMediaInfo/itemMediaInfo.template.html
View file

@ -1,5 +1,5 @@
<div class="formDialogHeader">
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1">
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1" title="${ButtonBack}">
<span class="material-icons arrow_back" aria-hidden="true"></span>
</button>
<h3 class="formDialogHeaderTitle">${MoreMediaInfo}</h3>

2
src/components/itemidentifier/itemidentifier.template.html
View file

@ -1,5 +1,5 @@
<div class="formDialogHeader">
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1">
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1" title="${ButtonBack}">
<span class="material-icons arrow_back" aria-hidden="true"></span>
</button>
<h3 class="formDialogHeaderTitle">${Identify}</h3>

2
src/components/mediaLibraryCreator/mediaLibraryCreator.template.html
View file

@ -1,5 +1,5 @@
<div class="formDialogHeader">
<button type="button" is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><span class="material-icons arrow_back" aria-hidden="true"></span></button>
<button type="button" is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1" title="${ButtonBack}"><span class="material-icons arrow_back" aria-hidden="true"></span></button>
<h3 class="formDialogHeaderTitle">${ButtonAddMediaLibrary}</h3>
</div>

2
src/components/mediaLibraryEditor/mediaLibraryEditor.template.html
View file

@ -1,5 +1,5 @@
<div class="formDialogHeader">
<button type="button" is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><span class="material-icons arrow_back" aria-hidden="true"></span></button>
<button type="button" is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1" title="${ButtonBack}"><span class="material-icons arrow_back" aria-hidden="true"></span></button>
<h3 class="formDialogHeaderTitle"></h3>
</div>

6
src/components/metadataEditor/metadataEditor.template.html
View file

@ -1,5 +1,5 @@
<div class="formDialogHeader">
<button is="paper-icon-button-light" class="btnCancel btnBack autoSize hide" tabindex="-1"><span class="material-icons arrow_back" aria-hidden="true"></span></button>
<button is="paper-icon-button-light" class="btnCancel btnBack autoSize hide" tabindex="-1" title="${ButtonBack}"><span class="material-icons arrow_back" aria-hidden="true"></span></button>
<h3 class="formDialogHeaderTitle">
${Edit}
</h3>
@ -8,10 +8,10 @@
<span class="material-icons check" aria-hidden="true"></span>
<span>${Save}</span>
</button>
<button is="paper-icon-button-light" class="btnMore autoSize" tabindex="-1">
<button is="paper-icon-button-light" class="btnMore autoSize" tabindex="-1" title="${ButtonMore}">
<span class="material-icons more_vert" aria-hidden="true"></span>
</button>
<button is="paper-icon-button-light" class="btnCancel btnClose autoSize" tabindex="-1">
<button is="paper-icon-button-light" class="btnCancel btnClose autoSize" tabindex="-1" title="${ButtonClose}">
<span class="material-icons close" aria-hidden="true"></span>
</button>
</div>

2
src/components/metadataEditor/personEditor.template.html
View file

@ -1,5 +1,5 @@
<div class="formDialogHeader">
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><span class="material-icons arrow_back" aria-hidden="true"></span></button>
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1" title="${ButtonBack}"><span class="material-icons arrow_back" aria-hidden="true"></span></button>
<h3 class="formDialogHeaderTitle">
${Edit}
</h3>

2
src/components/playlisteditor/playlisteditor.js
View file

@ -242,7 +242,7 @@ import ServerConnections from '../ServerConnections';
const title = globalize.translate('HeaderAddToPlaylist');
html += '<div class="formDialogHeader">';
html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><span class="material-icons arrow_back" aria-hidden="true"></span></button>';
html += `<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1" title="${globalize.translate('ButtonBack')}"><span class="material-icons arrow_back" aria-hidden="true"></span></button>`;
html += '<h3 class="formDialogHeaderTitle">';
html += title;
html += '</h3>';

2
src/components/prompt/prompt.template.html
View file

@ -1,5 +1,5 @@
<div class="formDialogHeader">
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1">
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1" title="${ButtonBack}">
<span class="material-icons arrow_back" aria-hidden="true"></span>
</button>

2
src/components/recordingcreator/recordingcreator.template.html
View file

@ -1,5 +1,5 @@
<div class="formDialogHeader">
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><span class="material-icons arrow_back" aria-hidden="true"></span></button>
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1" title="${ButtonBack}"><span class="material-icons arrow_back" aria-hidden="true"></span></button>
<h3 class="formDialogHeaderTitle"></h3>
</div>
<div class="formDialogContent smoothScrollY">

2
src/components/recordingcreator/recordingeditor.template.html
View file

@ -1,5 +1,5 @@
<div class="formDialogHeader">
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><span class="material-icons arrow_back" aria-hidden="true"></span></button>
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1" title="${ButtonBack}"><span class="material-icons arrow_back" aria-hidden="true"></span></button>
<h3 class="formDialogHeaderTitle">
${HeaderRecordingOptions}
</h3>

2
src/components/recordingcreator/seriesrecordingeditor.template.html
View file

@ -1,5 +1,5 @@
<div class="formDialogHeader">
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><span class="material-icons arrow_back" aria-hidden="true"></span></button>
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1" title="${ButtonBack}"><span class="material-icons arrow_back" aria-hidden="true"></span></button>
<h3 class="formDialogHeaderTitle">
${HeaderSeriesOptions}
</h3>

2
src/components/refreshdialog/refreshdialog.js
View file

@ -120,7 +120,7 @@ class RefreshDialog {
const title = globalize.translate('RefreshMetadata');
html += '<div class="formDialogHeader">';
html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><span class="material-icons arrow_back" aria-hidden="true"></span></button>';
html += `<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1" title="${globalize.translate('ButtonBack')}"><span class="material-icons arrow_back" aria-hidden="true"></span></button>`;
html += '<h3 class="formDialogHeaderTitle">';
html += title;
html += '</h3>';

2
src/components/sortmenu/sortmenu.js
View file

@ -63,7 +63,7 @@ class SortMenu {
let html = '';
html += '<div class="formDialogHeader">';
html += '<button is="paper-icon-button-light" class="btnCancel hide-mouse-idle-tv" tabindex="-1"><span class="material-icons arrow_back" aria-hidden="true"></span></button>';
html += `<button is="paper-icon-button-light" class="btnCancel hide-mouse-idle-tv" tabindex="-1" title="${globalize.translate('ButtonBack')}"><span class="material-icons arrow_back" aria-hidden="true"></span></button>`;
html += '<h3 class="formDialogHeaderTitle">${Sort}</h3>';
html += '</div>';

2
src/components/subtitleeditor/subtitleeditor.template.html
View file

@ -1,5 +1,5 @@
<div class="formDialogHeader">
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><span class="material-icons arrow_back" aria-hidden="true"></span></button>
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1" title="${ButtonBack}"><span class="material-icons arrow_back" aria-hidden="true"></span></button>
<h3 class="formDialogHeaderTitle">${Subtitles}</h3>
<a is="emby-linkbutton" rel="noopener noreferrer" data-autohide="true" class="button-link btnHelp flex align-items-center" href="https://docs.jellyfin.org/general/server/media/subtitles.html" target="_blank" style="margin-left:auto;margin-right:.5em;padding:.25em;" title="${Help}"><span class="material-icons info" aria-hidden="true"></span><span style="margin-left:.25em;">${Help}</span></a>

2
src/components/subtitleuploader/subtitleuploader.template.html
View file

@ -1,5 +1,5 @@
<div class="formDialogHeader">
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><span class="material-icons arrow_back" aria-hidden="true"></span></button>
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1" title="${ButtonBack}"><span class="material-icons arrow_back" aria-hidden="true"></span></button>
<h3 class="formDialogHeaderTitle">
${HeaderUploadSubtitle}
</h3>

2
src/components/syncPlay/ui/settings/editor.html
View file

@ -1,5 +1,5 @@
<div class="formDialogHeader">
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1">
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1" title="${ButtonBack}">
<span class="material-icons arrow_back" aria-hidden="true"></span>
</button>
<h3 class="formDialogHeaderTitle">${HeaderSyncPlaySettings}</h3>

2
src/components/tunerPicker.js
View file

@ -135,7 +135,7 @@ function tunerPicker() {
dlg.classList.add('formDialog');
let html = '';
html += '<div class="formDialogHeader">';
html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><span class="material-icons arrow_back" aria-hidden="true"></span></button>';
html += `<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1" title="${globalize.translate('ButtonBack')}"><span class="material-icons arrow_back" aria-hidden="true"></span></button>`;
html += '<h3 class="formDialogHeaderTitle">';
html += globalize.translate('HeaderLiveTvTunerSetup');
html += '</h3>';

2
src/components/viewSettings/viewSettings.js
View file

@ -76,7 +76,7 @@ class ViewSettings {
let html = '';
html += '<div class="formDialogHeader">';
html += '<button is="paper-icon-button-light" class="btnCancel hide-mouse-idle-tv" tabindex="-1"><span class="material-icons arrow_back" aria-hidden="true"></span></button>';
html += `<button is="paper-icon-button-light" class="btnCancel hide-mouse-idle-tv" tabindex="-1" title="${globalize.translate('ButtonBack')}"><span class="material-icons arrow_back" aria-hidden="true"></span></button>`;
html += '<h3 class="formDialogHeaderTitle">${Settings}</h3>';
html += '</div>';

2
src/controllers/dashboard/plugins/repositories/index.js
View file

@ -117,7 +117,7 @@ export default function(view) {
let html = '';
html += '<div class="formDialogHeader">';
html += '<button type="button" is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><span class="material-icons arrow_back" aria-hidden="true"></span></button>';
html += `<button type="button" is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1" title="${globalize.translate('ButtonBack')}"><span class="material-icons arrow_back" aria-hidden="true"></span></button>`;
html += `<h3 class="formDialogHeaderTitle">${globalize.translate('HeaderNewRepository')}</h3>`;
html += '</div>';
html += '<form class="newPluginForm" style="margin:4em">';

18
src/controllers/list.html
View file

@ -7,25 +7,25 @@
<button is="emby-button" class="btnPlay button-flat hide listTextButton-autohide">
<span>${HeaderPlayAll}</span>
</button>
<button is="paper-icon-button-light" class="btnPlay listIconButton-autohide">
<button is="paper-icon-button-light" class="btnPlay listIconButton-autohide" title="${HeaderPlayAll}">
<span class="material-icons play_arrow" aria-hidden="true"></span>
</button>
<button is="emby-button" class="btnQueue button-flat hide listTextButton-autohide">
<span>${Queue}</span>
<span>${AddToPlayQueue}</span>
</button>
<button is="paper-icon-button-light" class="btnQueue hide listIconButton-autohide">
<button is="paper-icon-button-light" class="btnQueue hide listIconButton-autohide" title="${AddToPlayQueue}">
<span class="material-icons playlist_add" aria-hidden="true"></span>
</button>
<button is="emby-button" class="btnShuffle button-flat hide listTextButton-autohide">
<span>${Shuffle}</span>
</button>
<button is="paper-icon-button-light" class="btnShuffle hide listIconButton-autohide">
<button is="paper-icon-button-light" class="btnShuffle hide listIconButton-autohide" title="${Shuffle}">
<span class="material-icons shuffle" aria-hidden="true"></span>
</button>
<button is="emby-button" class="btnNewItem hide button-flat listTextButton-autohide">
<span>${New}</span>
</button>
<button is="paper-icon-button-light" class="btnNewItem hide listIconButton-autohide">
<button is="paper-icon-button-light" class="btnNewItem hide listIconButton-autohide" title="${New}">
<span class="material-icons add" aria-hidden="true"></span>
</button>
@ -33,19 +33,19 @@
<span class="btnSortText"></span>
<span class="material-icons btnSortIcon arrow_upward" aria-hidden="true"></span>
</button>
<button is="paper-icon-button-light" class="btnSort hide listIconButton-autohide">
<button is="paper-icon-button-light" class="btnSort hide listIconButton-autohide" title="${Sort}">
<span class="material-icons sort" aria-hidden="true"></span>
</button>
<button is="emby-button" class="btnFilter button-flat listTextButton-autohide">
<span>${Filter}</span>
</button>
<button is="paper-icon-button-light" class="btnFilter listIconButton-autohide" data-ripple="false" style="overflow:visible;">
<button is="paper-icon-button-light" class="btnFilter listIconButton-autohide" data-ripple="false" style="overflow:visible;" title="${Filter}">
<span class="material-icons filter_list" aria-hidden="true"></span>
</button>
<button is="emby-button" class="btnViewSettings button-flat listTextButton-autohide">
<button is="emby-button" class="btnViewSettings button-flat listTextButton-autohide" title="${ButtonMore}">
<span class="material-icons more_vert" aria-hidden="true"></span>
</button>
<button is="paper-icon-button-light" class="btnViewSettings listIconButton-autohide">
<button is="paper-icon-button-light" class="btnViewSettings listIconButton-autohide" title="${ButtonMore}">
<span class="material-icons more_vert" aria-hidden="true"></span>
</button>
</div>

2
src/controllers/movies/movies.html
View file

@ -76,7 +76,7 @@
<div class="paging"></div>
<button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><span class="material-icons view_comfy" aria-hidden="true"></span></button>
<button is="paper-icon-button-light" class="btnSort autoSize" title="${Sort}"><span class="material-icons sort_by_alpha" aria-hidden="true"></span></button>
<button type="button" is="paper-icon-button-light" class="btnNewCollection autoSize"><span class="material-icons add" aria-hidden="true"></span></button>
<button type="button" is="paper-icon-button-light" class="btnNewCollection autoSize" title="${NewCollection}"><span class="material-icons add" aria-hidden="true"></span></button>
</div>
<div is="emby-itemscontainer" class="itemsContainer vertical-wrap centered padded-left padded-right" style="text-align:center;">

6
src/controllers/playback/video/index.html
View file

@ -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>

14
src/controllers/playback/video/index.js
View file

@ -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) {

12
src/scripts/dom.js
View file

@ -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

16
src/scripts/libraryMenu.js
View file

@ -80,6 +80,18 @@ import Headroom from 'headroom.js';
}
function retranslateUi() {
if (headerBackButton) {
headerBackButton.title = globalize.translate('ButtonBack');
}
if (headerHomeButton) {
headerHomeButton.title = globalize.translate('Home');
}
if (mainDrawerButton) {
mainDrawerButton.title = globalize.translate('Menu');
}
if (headerSyncButton) {
headerSyncButton.title = globalize.translate('ButtonSyncPlay');
}
@ -95,6 +107,10 @@ import Headroom from 'headroom.js';
if (headerSearchButton) {
headerSearchButton.title = globalize.translate('Search');
}
if (headerUserButton) {
headerUserButton.title = globalize.translate('Settings');
}
}
function updateUserInHeader(user) {

3
src/strings/en-us.json
View file

@ -75,9 +75,11 @@
"ButtonArrowRight": "Right",
"ButtonAudioTracks": "Audio Tracks",
"ButtonBack": "Back",
"ButtonBackspace": "Backspace",
"ButtonCancel": "Cancel",
"ButtonCast": "Cast to Device",
"ButtonChangeServer": "Change Server",
"ButtonClose": "Close",
"ButtonEditOtherUserPreferences": "Edit this user's profile, image and personal preferences.",
"ButtonForgotPassword": "Forgot Password",
"ButtonFullscreen": "Fullscreen",
@ -108,6 +110,7 @@
"ButtonSignIn": "Sign In",
"ButtonSignOut": "Sign Out",
"ButtonExitApp": "Exit Application",
"ButtonSpace": "Space",
"ButtonSplit": "Split",
"ButtonStart": "Start",
"ButtonStop": "Stop",