From 0ffff84a9e3afa20ede4c4e41fee12a669519613 Mon Sep 17 00:00:00 2001
From: David Murdoch <david@davidmurdoch.com>
Date: Wed, 2 Mar 2022 18:24:52 -0500
Subject: [PATCH 1/2] change buttons that act as links to anchor tags

Buttons and links are different and serve different purposes. Links _go
somewhere_ while buttons _do something_.

When I click on a movie title to _go to_ the movie page the thing I
click should act like a link. If I ctrl+click or middle click it it
should still act like a link... by opening in a new tab.
---
 src/components/cardbuilder/card.scss      |  1 +
 src/components/cardbuilder/cardBuilder.js | 13 +++++++++----
 src/controllers/itemDetails/index.js      |  2 +-
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/components/cardbuilder/card.scss b/src/components/cardbuilder/card.scss
index 5685c4f3d..c687ed2f8 100644
--- a/src/components/cardbuilder/card.scss
+++ b/src/components/cardbuilder/card.scss
@@ -327,6 +327,7 @@ button::-moz-focus-inner {
     vertical-align: middle;
     font-family: inherit;
     font-size: inherit;
+    text-decoration: none;
 }
 
 .textActionButton:hover {
diff --git a/src/components/cardbuilder/cardBuilder.js b/src/components/cardbuilder/cardBuilder.js
index 7826cf2f8..ac44520e4 100644
--- a/src/components/cardbuilder/cardBuilder.js
+++ b/src/components/cardbuilder/cardBuilder.js
@@ -22,6 +22,7 @@ import './card.scss';
 import '../../elements/emby-button/paper-icon-button-light';
 import '../guide/programs.scss';
 import ServerConnections from '../ServerConnections';
+import { appRouter } from '../appRouter';
 
         const enableFocusTransform = !browser.slow && !browser.edge;
 
@@ -1038,9 +1039,10 @@ import ServerConnections from '../ServerConnections';
                 return text;
             }
 
-            let html = '<button ' + itemShortcuts.getShortcutAttributesHtml(item, serverId) + ' type="button" class="itemAction textActionButton" title="' + text + '" data-action="link">';
+            const url = appRouter.getRouteUrl(item);
+            let html = '<a href="' + url + '" ' + itemShortcuts.getShortcutAttributesHtml(item, serverId) + ' class="itemAction textActionButton" title="' + text + '" data-action="link">';
             html += text;
-            html += '</button>';
+            html += '</a>';
 
             return html;
         }
@@ -1349,10 +1351,11 @@ import ServerConnections from '../ServerConnections';
             } else {
                 const cardImageContainerAriaLabelAttribute = ` aria-label="${item.Name}"`;
 
+                const url = appRouter.getRouteUrl(item);
                 // 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 + cardImageContainerAriaLabelAttribute + '>') : ('<button data-action="' + action + '" class="' + cardImageContainerClass + ' ' + cardContentClass + ' itemAction"' + cardImageContainerAriaLabelAttribute + '>');
+                cardImageContainerOpen = imgUrl ? ('<a href="' + url + '" data-action="' + action + '" class="' + cardImageContainerClass + ' ' + cardContentClass + ' itemAction lazy" data-src="' + imgUrl + '" ' + blurhashAttrib + cardImageContainerAriaLabelAttribute + '>') : ('<a href="' + url + '" data-action="' + action + '" class="' + cardImageContainerClass + ' ' + cardContentClass + ' itemAction"' + cardImageContainerAriaLabelAttribute + '>');
 
-                cardImageContainerClose = '</button>';
+                cardImageContainerClose = '</a>';
             }
 
             const cardScalableClass = 'cardScalable';
@@ -1470,6 +1473,8 @@ import ServerConnections from '../ServerConnections';
             let html = '';
 
             html += '<div class="cardOverlayContainer itemAction" data-action="' + action + '">';
+            const url = appRouter.getRouteUrl(item);
+            html += '<a href="' + url + '" class="cardImageContainer"></a>'
 
             const btnCssClass = 'cardOverlayButton cardOverlayButton-hover itemAction paper-icon-button-light';
 
diff --git a/src/controllers/itemDetails/index.js b/src/controllers/itemDetails/index.js
index 8cdcd78cb..39f344cf1 100644
--- a/src/controllers/itemDetails/index.js
+++ b/src/controllers/itemDetails/index.js
@@ -785,7 +785,7 @@ function renderDetailImage(elem, item, imageLoader) {
     imageLoader.lazyChildren(elem);
 
     // Avoid breaking the design by preventing focus of the poster using the keyboard.
-    elem.querySelector('button').tabIndex = -1;
+    elem.querySelector('a').tabIndex = -1;
 }
 
 function renderImage(page, item) {

From 812abdd648089cceaa9efb8d31be42a396148c9b Mon Sep 17 00:00:00 2001
From: David Murdoch <187813+davidmurdoch@users.noreply.github.com>
Date: Wed, 6 Apr 2022 14:16:43 -0400
Subject: [PATCH 2/2] fix lint error by adding missing semicolon

---
 src/components/cardbuilder/cardBuilder.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/cardbuilder/cardBuilder.js b/src/components/cardbuilder/cardBuilder.js
index ac44520e4..089ada8fc 100644
--- a/src/components/cardbuilder/cardBuilder.js
+++ b/src/components/cardbuilder/cardBuilder.js
@@ -1474,7 +1474,7 @@ import { appRouter } from '../appRouter';
 
             html += '<div class="cardOverlayContainer itemAction" data-action="' + action + '">';
             const url = appRouter.getRouteUrl(item);
-            html += '<a href="' + url + '" class="cardImageContainer"></a>'
+            html += '<a href="' + url + '" class="cardImageContainer"></a>';
 
             const btnCssClass = 'cardOverlayButton cardOverlayButton-hover itemAction paper-icon-button-light';