wjones/jellyfin-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Backport pull request #7514 from jellyfin-web/release-10.11.z

Browse Source 
Fix card and item list accessibility issues

Original-merge: cfc39f99832636bb751824e1c7ab5597d08a8701

Merged-by: thornbill <thornbill@users.noreply.github.com>

Backported-by: thornbill <thornbill@users.noreply.github.com>
This commit is contained in:
thornbill
2026-01-27 16:22:33 -05:00
parent 66df06ff18
commit 38da924add
3 changed files with 20 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/cardbuilder/card.scss
+13 -6
View File
@@ -826,6 +826,13 @@ button::-moz-focus-inner {
right: 0;
user-select: none;
border-radius: 0.2em;
/** Disable pointer events for the overlay container, but allow them for its children */
pointer-events: none;
* {
pointer-events: auto;
}
}
.visualCardBox .blurhash-canvas,
@@ -835,10 +842,6 @@ button::-moz-focus-inner {
border-bottom-right-radius: 0;
}
.card-hoverable:hover .cardOverlayContainer {
opacity: 1;
}
.cardOverlayButton-hover {
opacity: 0;
transition: 0.2s;
@@ -850,8 +853,12 @@ button::-moz-focus-inner {
background: transparent !important;
}
.card-hoverable:hover .cardOverlayButton-hover {
opacity: 1;
.card-hoverable:focus-within,
.card-hoverable:hover {
.cardOverlayContainer,
.cardOverlayButton-hover {
opacity: 1;
}
}
.cardOverlayContainer > .cardOverlayFab-primary {
src/components/cardbuilder/cardBuilder.js
+2 -6
View File
@@ -1018,7 +1018,7 @@ function buildCard(index, item, apiClient, options) {
cardImageContainerClose = '</div>';
} else {
const cardImageContainerAriaLabelAttribute = ` aria-label="${escapeHtml(item.Name)}"`;
const cardImageContainerAriaLabelAttribute = ` aria-label="${escapeHtml(item.Name)}" role="img"`;
const url = appRouter.getRouteUrl(item);
// Don't use the IMG tag with safari because it puts a white border around it
@@ -1150,15 +1150,11 @@ function getHoverMenuHtml(item, action) {
let html = '';
html += '<div class="cardOverlayContainer itemAction" data-action="' + action + '">';
const url = appRouter.getRouteUrl(item, {
serverId: item.ServerId || ServerConnections.currentApiClient().serverId()
});
html += '<a href="' + url + '" class="cardImageContainer"></a>';
const btnCssClass = 'cardOverlayButton cardOverlayButton-hover itemAction paper-icon-button-light';
if (playbackManager.canPlay(item)) {
html += `<button is="paper-icon-button-light" class="${btnCssClass} cardOverlayFab-primary" data-action="${ItemAction.Resume}"><span class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover play_arrow" aria-hidden="true"></span></button>`;
html += `<button is="paper-icon-button-light" class="${btnCssClass} cardOverlayFab-primary" data-action="${ItemAction.Resume}" title="${globalize.translate('Play')}"><span class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover play_arrow" aria-hidden="true"></span></button>`;
}
html += '<div class="cardOverlayButton-br flex">';
src/components/listview/listview.js
+5 -5
View File
@@ -302,7 +302,7 @@ export function getListViewHtml(options) {
}
if (playOnImageClick) {
html += `<button is="paper-icon-button-light" class="listItemImageButton itemAction" data-action="${ItemAction.Resume}"><span class="material-icons listItemImageButton-icon play_arrow" aria-hidden="true"></span></button>`;
html += `<button is="paper-icon-button-light" class="listItemImageButton itemAction" data-action="${ItemAction.Resume}" title="${globalize.translate('Play')}"><span class="material-icons listItemImageButton-icon play_arrow" aria-hidden="true"></span></button>`;
}
const progressHtml = indicators.getProgressBarHtml(item, {
@@ -453,11 +453,11 @@ export function getListViewHtml(options) {
if (!clickEntireItem) {
if (options.addToListButton) {
html += `<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="${ItemAction.AddToPlaylist}"><span class="material-icons playlist_add" aria-hidden="true"></span></button>`;
html += `<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="${ItemAction.AddToPlaylist}" title="${globalize.translate('AddToPlaylist')}"><span class="material-icons playlist_add" aria-hidden="true"></span></button>`;
}
if (options.infoButton) {
html += `<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="${ItemAction.Link}"><span class="material-icons info_outline" aria-hidden="true"></span></button>`;
html += `<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="${ItemAction.Link}" title="${globalize.translate('ButtonInfo')}"><span class="material-icons info_outline" aria-hidden="true"></span></button>`;
}
if (options.rightButtons) {
@@ -478,7 +478,7 @@ export function getListViewHtml(options) {
}
if (options.moreButton !== false) {
html += `<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="${ItemAction.Menu}"><span class="material-icons more_vert" aria-hidden="true"></span></button>`;
html += `<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="${ItemAction.Menu}" title="${globalize.translate('ButtonMore')}"><span class="material-icons more_vert" aria-hidden="true"></span></button>`;
}
}
html += '</div>';
@@ -502,5 +502,5 @@ export function getListViewHtml(options) {
}
export default {
getListViewHtml: getListViewHtml
getListViewHtml
};