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 #3479 from davidmurdoch/fix/buttons-arent-for-links

Browse source 
Change buttons that act as links to anchor tags
This commit is contained in:
Bill Thornton 2022-04-19 16:42:13 -04:00 • committed by GitHub
commit 89af1e339d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 11 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/components/cardbuilder/card.scss
View file

@ -327,6 +327,7 @@ button::-moz-focus-inner {
vertical-align: middle; vertical-align: middle;
font-family: inherit; font-family: inherit;
font-size: inherit; font-size: inherit;
text-decoration: none;
} }
.textActionButton:hover { .textActionButton:hover {

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

@ -22,6 +22,7 @@ import './card.scss';
import '../../elements/emby-button/paper-icon-button-light'; import '../../elements/emby-button/paper-icon-button-light';
import '../guide/programs.scss'; import '../guide/programs.scss';
import ServerConnections from '../ServerConnections'; import ServerConnections from '../ServerConnections';
import { appRouter } from '../appRouter';
const enableFocusTransform = !browser.slow && !browser.edge; const enableFocusTransform = !browser.slow && !browser.edge;
@ -1038,9 +1039,10 @@ import ServerConnections from '../ServerConnections';
return text; 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 += text;
html += '</button>'; html += '</a>';
return html; return html;
} }
@ -1349,10 +1351,11 @@ import ServerConnections from '../ServerConnections';
} else { } else {
const cardImageContainerAriaLabelAttribute = ` aria-label="${item.Name}"`; 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 // 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'; const cardScalableClass = 'cardScalable';
@ -1470,6 +1473,8 @@ import ServerConnections from '../ServerConnections';
let html = ''; let html = '';
html += '<div class="cardOverlayContainer itemAction" data-action="' + action + '">'; 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'; const btnCssClass = 'cardOverlayButton cardOverlayButton-hover itemAction paper-icon-button-light';

2
src/controllers/itemDetails/index.js
View file

@ -791,7 +791,7 @@ function renderDetailImage(elem, item, imageLoader) {
imageLoader.lazyChildren(elem); imageLoader.lazyChildren(elem);
// Avoid breaking the design by preventing focus of the poster using the keyboard. // 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) { function renderImage(page, item) {