From 38da924add0a76fd9830f89c639074402637e442 Mon Sep 17 00:00:00 2001
From: thornbill <thornbill@users.noreply.github.com>
Date: Tue, 27 Jan 2026 16:22:33 -0500
Subject: [PATCH] Backport pull request #7514 from jellyfin-web/release-10.11.z

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>
---
 src/components/cardbuilder/card.scss      | 19 +++++++++++++------
 src/components/cardbuilder/cardBuilder.js |  8 ++------
 src/components/listview/listview.js       | 10 +++++-----
 3 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/src/components/cardbuilder/card.scss b/src/components/cardbuilder/card.scss
index 737850261..a013b34d6 100644
--- a/src/components/cardbuilder/card.scss
+++ b/src/components/cardbuilder/card.scss
@@ -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 {
diff --git a/src/components/cardbuilder/cardBuilder.js b/src/components/cardbuilder/cardBuilder.js
index 9b7392d7f..45c5bba0c 100644
--- a/src/components/cardbuilder/cardBuilder.js
+++ b/src/components/cardbuilder/cardBuilder.js
@@ -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">';
diff --git a/src/components/listview/listview.js b/src/components/listview/listview.js
index da90749ca..e06041183 100644
--- a/src/components/listview/listview.js
+++ b/src/components/listview/listview.js
@@ -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
 };