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

Add aria-hidden to button icons

Browse source
This commit is contained in:
Dmitry Lyzo 2022-02-24 20:15:24 +03:00
parent 8134096819
commit 119df2cc99
115 changed files with 415 additions and 414 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/scripts/editorsidebar.js
View file

@ -47,20 +47,20 @@ import Dashboard from './clientUtils';
}
let htmlName = "<div class='editorNode'>";
if (item.IsFolder) {
htmlName += '<span class="material-icons metadataSidebarIcon folder"></span>';
htmlName += '<span class="material-icons metadataSidebarIcon folder" aria-hidden="true"></span>';
} else if (item.MediaType === 'Video') {
htmlName += '<span class="material-icons metadataSidebarIcon movie"></span>';
htmlName += '<span class="material-icons metadataSidebarIcon movie" aria-hidden="true"></span>';
} else if (item.MediaType === 'Audio') {
htmlName += '<span class="material-icons metadataSidebarIcon audiotrack"></span>';
htmlName += '<span class="material-icons metadataSidebarIcon audiotrack" aria-hidden="true"></span>';
} else if (item.Type === 'TvChannel') {
htmlName += '<span class="material-icons metadataSidebarIcon live_tv"></span>';
htmlName += '<span class="material-icons metadataSidebarIcon live_tv" aria-hidden="true"></span>';
} else if (item.MediaType === 'Photo') {
htmlName += '<span class="material-icons metadataSidebarIcon photo"></span>';
htmlName += '<span class="material-icons metadataSidebarIcon photo" aria-hidden="true"></span>';
} else if (item.MediaType === 'Book') {
htmlName += '<span class="material-icons metadataSidebarIcon book"></span>';
htmlName += '<span class="material-icons metadataSidebarIcon book" aria-hidden="true"></span>';
}
if (item.LockData) {
htmlName += '<span class="material-icons metadataSidebarIcon lock"></span>';
htmlName += '<span class="material-icons metadataSidebarIcon lock" aria-hidden="true"></span>';
}
htmlName += name;
htmlName += '</div>';

10
src/scripts/libraryBrowser.js
View file

@ -96,20 +96,20 @@ export function getQueryPagingHtml (options) {
html += '<div style="display:inline-block;">';
if (showControls) {
html += '<button is="paper-icon-button-light" class="btnPreviousPage autoSize" ' + (startIndex ? '' : 'disabled') + '><span class="material-icons arrow_back"></span></button>';
html += '<button is="paper-icon-button-light" class="btnNextPage autoSize" ' + (startIndex + limit >= totalRecordCount ? 'disabled' : '') + '><span class="material-icons arrow_forward"></span></button>';
html += '<button is="paper-icon-button-light" class="btnPreviousPage autoSize" ' + (startIndex ? '' : 'disabled') + '><span class="material-icons arrow_back" aria-hidden="true"></span></button>';
html += '<button is="paper-icon-button-light" class="btnNextPage autoSize" ' + (startIndex + limit >= totalRecordCount ? 'disabled' : '') + '><span class="material-icons arrow_forward" aria-hidden="true"></span></button>';
}
if (options.addLayoutButton) {
html += '<button is="paper-icon-button-light" title="' + globalize.translate('ButtonSelectView') + '" class="btnChangeLayout autoSize" data-layouts="' + (options.layouts || '') + '" onclick="LibraryBrowser.showLayoutMenu(this, \'' + (options.currentLayout || '') + '\');"><span class="material-icons view_comfy"></span></button>';
html += '<button is="paper-icon-button-light" title="' + globalize.translate('ButtonSelectView') + '" class="btnChangeLayout autoSize" data-layouts="' + (options.layouts || '') + '" onclick="LibraryBrowser.showLayoutMenu(this, \'' + (options.currentLayout || '') + '\');"><span class="material-icons view_comfy" aria-hidden="true"></span></button>';
}
if (options.sortButton) {
html += '<button is="paper-icon-button-light" class="btnSort autoSize" title="' + globalize.translate('Sort') + '"><span class="material-icons sort_by_alpha"></span></button>';
html += '<button is="paper-icon-button-light" class="btnSort autoSize" title="' + globalize.translate('Sort') + '"><span class="material-icons sort_by_alpha" aria-hidden="true"></span></button>';
}
if (options.filterButton) {
html += '<button is="paper-icon-button-light" class="btnFilter autoSize" title="' + globalize.translate('Filter') + '"><span class="material-icons filter_list"></span></button>';
html += '<button is="paper-icon-button-light" class="btnFilter autoSize" title="' + globalize.translate('Filter') + '"><span class="material-icons filter_list" aria-hidden="true"></span></button>';
}
html += '</div>';

37
src/scripts/libraryMenu.js
View file

@ -25,18 +25,18 @@ import Headroom from 'headroom.js';
let html = '';
html += '<div class="flex align-items-center flex-grow headerTop">';
html += '<div class="headerLeft">';
html += '<button type="button" is="paper-icon-button-light" class="headerButton headerButtonLeft headerBackButton hide"><span class="material-icons ' + (browser.safari ? 'chevron_left' : 'arrow_back') + '"></span></button>';
html += '<button type="button" is="paper-icon-button-light" class="headerButton headerHomeButton hide barsMenuButton headerButtonLeft"><span class="material-icons home"></span></button>';
html += '<button type="button" is="paper-icon-button-light" class="headerButton mainDrawerButton barsMenuButton headerButtonLeft hide"><span class="material-icons menu"></span></button>';
html += '<button type="button" is="paper-icon-button-light" class="headerButton headerButtonLeft headerBackButton hide"><span class="material-icons ' + (browser.safari ? 'chevron_left' : 'arrow_back') + '" aria-hidden="true"></span></button>';
html += '<button type="button" is="paper-icon-button-light" class="headerButton headerHomeButton hide barsMenuButton headerButtonLeft"><span class="material-icons home" aria-hidden="true"></span></button>';
html += '<button type="button" is="paper-icon-button-light" class="headerButton mainDrawerButton barsMenuButton headerButtonLeft hide"><span class="material-icons menu" aria-hidden="true"></span></button>';
html += '<h3 class="pageTitle"></h3>';
html += '</div>';
html += '<div class="headerRight">';
html += '<button is="paper-icon-button-light" class="headerSyncButton syncButton headerButton headerButtonRight hide"><span class="material-icons groups"></span></button>';
html += '<button is="paper-icon-button-light" class="headerSyncButton syncButton headerButton headerButtonRight hide"><span class="material-icons groups" aria-hidden="true"></span></button>';
html += '<span class="headerSelectedPlayer"></span>';
html += '<button is="paper-icon-button-light" class="headerAudioPlayerButton audioPlayerButton headerButton headerButtonRight hide"><span class="material-icons music_note"></span></button>';
html += '<button is="paper-icon-button-light" class="headerCastButton castButton headerButton headerButtonRight hide"><span class="material-icons cast"></span></button>';
html += '<button type="button" is="paper-icon-button-light" class="headerButton headerButtonRight headerSearchButton hide"><span class="material-icons search"></span></button>';
html += '<button is="paper-icon-button-light" class="headerButton headerButtonRight headerUserButton hide"><span class="material-icons person"></span></button>';
html += '<button is="paper-icon-button-light" class="headerAudioPlayerButton audioPlayerButton headerButton headerButtonRight hide"><span class="material-icons music_note" aria-hidden="true"></span></button>';
html += '<button is="paper-icon-button-light" class="headerCastButton castButton headerButton headerButtonRight hide"><span class="material-icons cast" aria-hidden="true"></span></button>';
html += '<button type="button" is="paper-icon-button-light" class="headerButton headerButtonRight headerSearchButton hide"><span class="material-icons search" aria-hidden="true"></span></button>';
html += '<button is="paper-icon-button-light" class="headerButton headerButtonRight headerUserButton hide"><span class="material-icons person" aria-hidden="true"></span></button>';
html += '</div>';
html += '</div>';
html += '<div class="headerTabs sectionTabs hide">';
@ -156,7 +156,7 @@ import Headroom from 'headroom.js';
headerUserButton.innerHTML = '<div class="headerButton headerButtonRight paper-icon-button-light headerUserButtonRound" style="background-image:url(\'' + src + "');\"></div>";
} else {
headerUserButton.classList.remove('headerUserButtonRound');
headerUserButton.innerHTML = '<span class="material-icons person"></span>';
headerUserButton.innerHTML = '<span class="material-icons person" aria-hidden="true"></span>';
}
}
@ -272,7 +272,7 @@ import Headroom from 'headroom.js';
function refreshLibraryInfoInDrawer(user) {
let html = '';
html += '<div style="height:.5em;"></div>';
html += '<a is="emby-linkbutton" class="navMenuOption lnkMediaFolder" href="#!/home.html"><span class="material-icons navMenuOptionIcon home"></span><span class="navMenuOptionText">' + globalize.translate('Home') + '</span></a>';
html += `<a is="emby-linkbutton" class="navMenuOption lnkMediaFolder" href="#!/home.html"><span class="material-icons navMenuOptionIcon home" aria-hidden="true"></span><span class="navMenuOptionText">${globalize.translate('Home')}</span></a>`;
// placeholder for custom menu links
html += '<div class="customMenuOptions"></div>';
@ -285,8 +285,8 @@ import Headroom from 'headroom.js';
html += '<h3 class="sidebarHeader">';
html += globalize.translate('HeaderAdmin');
html += '</h3>';
html += '<a is="emby-linkbutton" class="navMenuOption lnkMediaFolder lnkManageServer" data-itemid="dashboard" href="#!/dashboard.html"><span class="material-icons navMenuOptionIcon dashboard"></span><span class="navMenuOptionText">' + globalize.translate('TabDashboard') + '</span></a>';
html += '<a is="emby-linkbutton" class="navMenuOption lnkMediaFolder editorViewMenu" data-itemid="editor" href="#!/edititemmetadata.html"><span class="material-icons navMenuOptionIcon mode_edit"></span><span class="navMenuOptionText">' + globalize.translate('Metadata') + '</span></a>';
html += `<a is="emby-linkbutton" class="navMenuOption lnkMediaFolder lnkManageServer" data-itemid="dashboard" href="#!/dashboard.html"><span class="material-icons navMenuOptionIcon dashboard" aria-hidden="true"></span><span class="navMenuOptionText">${globalize.translate('TabDashboard')}</span></a>`;
html += `<a is="emby-linkbutton" class="navMenuOption lnkMediaFolder editorViewMenu" data-itemid="editor" href="#!/edititemmetadata.html"><span class="material-icons navMenuOptionIcon mode_edit" aria-hidden="true"></span><span class="navMenuOptionText">${globalize.translate('Metadata')}</span></a>`;
html += '</div>';
}
@ -297,14 +297,14 @@ import Headroom from 'headroom.js';
html += '</h3>';
if (appHost.supports('multiserver')) {
html += '<a is="emby-linkbutton" class="navMenuOption lnkMediaFolder btnSelectServer" data-itemid="selectserver" href="#"><span class="material-icons navMenuOptionIcon wifi"></span><span class="navMenuOptionText">' + globalize.translate('SelectServer') + '</span></a>';
html += `<a is="emby-linkbutton" class="navMenuOption lnkMediaFolder btnSelectServer" data-itemid="selectserver" href="#"><span class="material-icons navMenuOptionIcon wifi" aria-hidden="true"></span><span class="navMenuOptionText">${globalize.translate('SelectServer')}</span></a>`;
}
html += '<a is="emby-linkbutton" class="navMenuOption lnkMediaFolder btnSettings" data-itemid="settings" href="#"><span class="material-icons navMenuOptionIcon settings"></span><span class="navMenuOptionText">' + globalize.translate('Settings') + '</span></a>';
html += '<a is="emby-linkbutton" class="navMenuOption lnkMediaFolder btnLogout" data-itemid="logout" href="#"><span class="material-icons navMenuOptionIcon exit_to_app"></span><span class="navMenuOptionText">' + globalize.translate('ButtonSignOut') + '</span></a>';
html += `<a is="emby-linkbutton" class="navMenuOption lnkMediaFolder btnSettings" data-itemid="settings" href="#"><span class="material-icons navMenuOptionIcon settings" aria-hidden="true"></span><span class="navMenuOptionText">${globalize.translate('Settings')}</span></a>`;
html += `<a is="emby-linkbutton" class="navMenuOption lnkMediaFolder btnLogout" data-itemid="logout" href="#"><span class="material-icons navMenuOptionIcon exit_to_app" aria-hidden="true"></span><span class="navMenuOptionText">${globalize.translate('ButtonSignOut')}</span></a>`;
if (appHost.supports('exitmenu')) {
html += '<a is="emby-linkbutton" class="navMenuOption lnkMediaFolder exitApp" data-itemid="exitapp" href="#"><span class="material-icons navMenuOptionIcon close"></span><span class="navMenuOptionText">' + globalize.translate('ButtonExitApp') + '</span></a>';
html += `<a is="emby-linkbutton" class="navMenuOption lnkMediaFolder exitApp" data-itemid="exitapp" href="#"><span class="material-icons navMenuOptionIcon close" aria-hidden="true"></span><span class="navMenuOptionText">${globalize.translate('ButtonExitApp')}</span></a>`;
}
html += '</div>';
@ -538,7 +538,7 @@ import Headroom from 'headroom.js';
menuHtml += '<a is="emby-linkbutton" class="navMenuOption" href="' + item.href + '"' + pageIds + pageUrls + '>';
if (item.icon) {
menuHtml += '<span class="material-icons navMenuOptionIcon ' + item.icon + '"></span>';
menuHtml += '<span class="material-icons navMenuOptionIcon ' + item.icon + '" aria-hidden="true"></span>';
}
menuHtml += '<span class="navMenuOptionText">';
@ -659,6 +659,7 @@ import Headroom from 'headroom.js';
const icon = document.createElement('span');
icon.className = `material-icons navMenuOptionIcon ${link.icon || 'link'}`;
icon.setAttribute('aria-hidden', 'true');
option.appendChild(icon);
const label = document.createElement('span');
@ -682,7 +683,7 @@ import Headroom from 'headroom.js';
const itemId = i.Id;
return `<a is="emby-linkbutton" data-itemid="${itemId}" class="lnkMediaFolder navMenuOption" href="${getItemHref(i, i.CollectionType)}">
<span class="material-icons navMenuOptionIcon ${icon}"></span>
<span class="material-icons navMenuOptionIcon ${icon}" aria-hidden="true"></span>
<span class="sectionName navMenuOptionText">${i.Name}</span>
</a>`;
}).join('');