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

@@ -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"

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

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]
-                    )
-                ]
-            );
+            : [""];
     }
 }

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
+            ]
+        );
     }
 
     /**

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') {

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; ?>

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

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; ?>

themes/finc/templates/record/coverReplacement.phtml

-<?= $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