From de8a63f71dc64ae03cbe8050e6d492c207f0dbc8 Mon Sep 17 00:00:00 2001
From: Robert Lange <robert.lange@uni-leipzig.de>
Date: Mon, 17 Oct 2022 11:06:56 +0200
Subject: [PATCH] refs #19394 [finc] BARF for covers
* set aria-label / alt attribute for cover images
* to set attributes for link and image after loading by ajax
* ajaxcovers and useCoverFallbacksOnFail must be true
* make cover tabable when image could be fetched from api
* add translations for label texts
* minify icon texts occurances
* render icon-text via record-icon.phtml
---
local/languages/de.ini | 2 ++
local/languages/en.ini | 2 ++
.../src/finc/AjaxHandler/GetRecordCover.php | 9 +------
.../finc/src/finc/View/Helper/Root/Record.php | 14 ++++++-----
themes/finc/js/covers.js | 14 +++++++++--
.../DefaultRecord/record-icon-text.phtml | 2 +-
.../DefaultRecord/record-icon.phtml | 3 +++
themes/finc/templates/record/cover.phtml | 24 +++++++++++++++----
.../templates/record/coverReplacement.phtml | 2 +-
9 files changed, 49 insertions(+), 23 deletions(-)
diff --git a/local/languages/de.ini b/local/languages/de.ini
index c0d4b806d03..7980b367eac 100644
--- a/local/languages/de.ini
+++ b/local/languages/de.ini
@@ -199,6 +199,7 @@ Ask a Librarian = "Frage an die Bibliothek"
Audience = Zielpublikum
Author = "Person / Institution"
Available = Verfügbar
+Available_Via = Verfügbar über
Available Stock = Verfügbarer Bestand
Awards = Auszeichnungen
Back = Zurück
@@ -359,6 +360,7 @@ Library = Bibliothek
Library Regulations = Benutzungsordnung
Limit To = "Begrenze auf"
Link to = "Zur Webseite"
+Link-to = "Link zum"
List of new items = "Neuerwerbungsliste"
Local Holdings = "Lokale Bestände"
Local Subjects = "Lokale Schlagwörter"
diff --git a/local/languages/en.ini b/local/languages/en.ini
index e478706d99d..ee7ffca62fa 100644
--- a/local/languages/en.ini
+++ b/local/languages/en.ini
@@ -337,6 +337,7 @@ Audience = Audience
# Author = Creator
Author = "Author / Corporation"
Available = Available
+Available_Via = available via
Awards = Awards
Back = Back
Backtrace = Backtrace
@@ -460,6 +461,7 @@ Library = Library
Library Catalog Username = "Library Catalog User Name"
Limit To = "Limit to"
Link to = "To Website"
+Link-to = "Link to"
List = List
Loading = Loading
Located = Located
diff --git a/module/finc/src/finc/AjaxHandler/GetRecordCover.php b/module/finc/src/finc/AjaxHandler/GetRecordCover.php
index 8c6333421a1..5555926d6e7 100644
--- a/module/finc/src/finc/AjaxHandler/GetRecordCover.php
+++ b/module/finc/src/finc/AjaxHandler/GetRecordCover.php
@@ -139,13 +139,6 @@ class GetRecordCover extends AbstractBase implements AjaxHandlerInterface
return ($url || !$this->renderer || !$this->useCoverFallbacksOnFail)
? $this->formatResponse(compact('url', 'size'))
- : $this->formatResponse(
- [
- 'html' => $this->renderer->render(
- 'record/coverReplacement',
- ['driver' => $record]
- )
- ]
- );
+ : [""];
}
}
diff --git a/module/finc/src/finc/View/Helper/Root/Record.php b/module/finc/src/finc/View/Helper/Root/Record.php
index 76d54ff4777..c7117e000c2 100644
--- a/module/finc/src/finc/View/Helper/Root/Record.php
+++ b/module/finc/src/finc/View/Helper/Root/Record.php
@@ -160,22 +160,24 @@ class Record extends \VuFind\View\Helper\Root\Record
/**
* Render a (list of) record icons.
*
- * @param string $tpl Template for record icon, default: record-icon.phtml
- * @param bool $addText Return additional access / format. Default: true
+ * @param string $tpl phtml for record icon, default: record-icon.phtml
+ * @param bool $setIconText Return additional access / format. Default: true
*
* @return string
*/
public function getRecordIcon(
string $tpl = 'record-icon',
- bool $addText = true
+ bool $setIconText = true
): string {
$iconType = $this->getRecordIconType();
$iconClass = $this->getRecordIconClass($iconType);
return $this->renderTemplate(
$tpl . '.phtml',
- ['iconClass' => $this->baseIconClass . ' ' . $iconClass]
- )
- . ($addText ? $this->getRecordIconText($iconType, $iconClass) : '');
+ [
+ 'iconClass' => $this->baseIconClass . ' ' . $iconClass,
+ 'setIconText' => $setIconText
+ ]
+ );
}
/**
diff --git a/themes/finc/js/covers.js b/themes/finc/js/covers.js
index 3eb309ef70b..7c077197711 100644
--- a/themes/finc/js/covers.js
+++ b/themes/finc/js/covers.js
@@ -33,8 +33,18 @@ function loadCoverByElement(data, element) {
container.children().not('img').hide();
anchor.show();
anchor.attr('href', response.data.url);
- anchor.removeClass('hidden'); // finc specific
- registerCoverForModal(anchor, response.data.url); // finc specific
+ // finc specific
+ registerCoverForModal(anchor, response.data.url);
+ if (data.ariaLabel) {
+ anchor.attr('aria-label', data.ariaLabel);
+ }
+ if (data.alt) {
+ img.attr('alt', data.alt);
+ }
+ anchor.attr('tabindex', 0);
+ anchor.removeClass('hidden');
+ anchor.removeAttr('aria-hidden');
+ // finc specific - END
} else {
img.remove();
if (typeof response.data.html !== 'undefined') {
diff --git a/themes/finc/templates/RecordDriver/DefaultRecord/record-icon-text.phtml b/themes/finc/templates/RecordDriver/DefaultRecord/record-icon-text.phtml
index 997f06c9234..ea9258f886e 100644
--- a/themes/finc/templates/RecordDriver/DefaultRecord/record-icon-text.phtml
+++ b/themes/finc/templates/RecordDriver/DefaultRecord/record-icon-text.phtml
@@ -2,7 +2,7 @@
<?php if ($iconClass): ?>
<div class="access-icon hidden-print">
<span>
- <?=$this->translate("($iconClass)")?>
+ <span class="sr-only"><?=$this->translate("Available_Via")?></span> <?=$this->translate("($iconClass)")?>
</span>
</div>
<?php endif; ?>
diff --git a/themes/finc/templates/RecordDriver/DefaultRecord/record-icon.phtml b/themes/finc/templates/RecordDriver/DefaultRecord/record-icon.phtml
index 6cd2fbe8890..c79e9686748 100644
--- a/themes/finc/templates/RecordDriver/DefaultRecord/record-icon.phtml
+++ b/themes/finc/templates/RecordDriver/DefaultRecord/record-icon.phtml
@@ -4,5 +4,8 @@
<i aria-hidden="true" class="<?=$iconClass?>"></i>
<?php /* separate access text from icon - moved to cover.phtml */ ?>
</span>
+ <?php if ($this->setIconText ?? true): ?>
+ <?=$this->record($this->driver)->getRecordIconText()?>
+ <?php endif; ?>
<?php endif; ?>
<!-- finc: recordDriver - DefaultRecord - record-icon - END -->
\ No newline at end of file
diff --git a/themes/finc/templates/record/cover.phtml b/themes/finc/templates/record/cover.phtml
index 63b6241951f..ff34f1c1bd4 100644
--- a/themes/finc/templates/record/cover.phtml
+++ b/themes/finc/templates/record/cover.phtml
@@ -5,13 +5,16 @@
the class '.nocover' prevents nocover images from loading in lightbox or can be used to hide the images */ ?>
<?php $alt = $alt ?? $this->transEsc('Cover Image')?>
<?php $id = $driver->getUniqueID() ?>
+<?php $title = $this->transEsc($driver->getTitle()); ?>
+
<?php if ($id) {
- $coverId = "cover-$id-" . time();
+ $coverId = "cover-$id-" . time();
} else {
- $cover = false;
+ $cover = false;
}
?>
<?php if ($cover): ?>
+ <?php /* load cover directly... */ ?>
<?php if ($this->link): ?><a id="<?=$coverId?>" href="<?=$this->escapeHtmlAttr($this->link)?>" tabindex="-1" aria-hidden="true"><?php endif; ?>
<img alt="<?=$alt?>" <?php if ($linkPreview): ?>data-linkpreview="true" <?php endif; ?>class="recordcover" src="<?=$this->escapeHtmlAttr($cover); ?>" />
<?php if ($this->link): ?>
@@ -23,16 +26,27 @@
<?php elseif ($cover === false): ?>
<img src="<?=$this->url('cover-unavailable')?>" <?php if ($linkPreview): ?>data-linkpreview="true" <?php endif; ?>class="nocover" alt="<?=$this->transEsc('No Cover Image')?>" aria-hidden="true" tabindex="-1" />
<?php else: ?>
+ <?php /* load cover by ajax */ ?>
<div id="<?=$coverId?>" class="ajaxcover">
<div class="spinner"><i class="fa fa-spinner fa-spin"></i></div>
<div class="cover-container">
+ <?=$this->setIconText = false;?>
<?=$this->render('record/coverReplacement')?>
<a class="coverlink hidden" href="javascript:" aria-hidden="true" tabindex="-1">
<img <?php if ($linkPreview): ?>data-linkpreview="true" <?php endif; ?> class="recordcover ajax" src="<?=$this->imageLink('noCover2.gif')?>" alt="<?=$this->escapeHtmlAttr($alt); ?>" />
+ <script>
+ loadCoverByElement(
+ {
+ recordId:'<?=$this->escapeHtmlAttr($driver->getUniqueID())?>',
+ alt:'<?=$this->transEsc('Cover Image')?> <?=$this->transEsc("of")?> <?=$title?>',
+ ariaLabel:'<?=$this->transEsc("Link-to")?> <?=$this->transEsc('Cover Image')?> <?=$this->transEsc("of")?> <?=$title?>',
+ size:'<?=$this->escapeHtmlAttr($size)?>',
+ source:'<?=$this->escapeHtmlAttr($driver->getSourceIdentifier())?>'
+ },
+ $('#<?=$coverId?>')
+ );
+ </script>
</a>
- <script>
- loadCoverByElement({source:'<?=$this->escapeHtmlAttr($driver->getSourceIdentifier())?>', recordId:'<?=$this->escapeHtmlAttr($driver->getUniqueID())?>', size:'<?=$this->escapeHtmlAttr($size)?>'}, $('#<?=$coverId?>'));
- </script>
</div>
</div>
<?php endif; ?>
diff --git a/themes/finc/templates/record/coverReplacement.phtml b/themes/finc/templates/record/coverReplacement.phtml
index d26b8d7bcb9..4662e1b083a 100644
--- a/themes/finc/templates/record/coverReplacement.phtml
+++ b/themes/finc/templates/record/coverReplacement.phtml
@@ -1 +1 @@
-<?= $this->record($this->driver)->getRecordIcon('record-icon', false) ?>
\ No newline at end of file
+<?= $this->record($this->driver)->getRecordIcon('record-icon', $this->setIconText ?? true) ?>
\ No newline at end of file
--
GitLab