Add aria labels to toggle expand metadata (fixes issue 1081)

src/content-handlers/iiif/JQueryPlugins.ts

@@ -1,3 +1,5 @@
+import { Strings } from "@edsilv/utils";
+
 export default function jqueryPlugins($) {
   $.fn.checkboxButton = function(onClick: (checked: boolean) => void) {
     return this.each(function() {
@@ -441,11 +443,17 @@ export default function jqueryPlugins($) {
     lines: number,
     lessText: string,
     moreText: string,
-    cb: () => void
+    cb: () => void,
+    lessAriaLabelTemplate: string = 'Less information: Hide {0}',
+    moreAriaLabelTemplate: string = 'More information: Reveal {0}'
   ) {
     return this.each(function() {
+
       const $self: JQuery = $(this);
-      const expandedText: string = $self.html();
+      const $label: JQuery = $self.find('.label');
+      const $value: JQuery = $self.find('.value');
+      const expandedText: string = $value.html();
+      const labelText: string = $label.html();
       // add 'pad' to account for the right margin in the sidebar
       const $buttonPad: JQuery = $(
         '<span>&hellip; <a href="#" class="toggle more">morepad</a></span>'
@@ -454,21 +462,21 @@ export default function jqueryPlugins($) {
       const stringsByLine: string[] = [expandedText];
       let lastHeight: number = $self.height();
       // Until empty
-      while ($self.text().length > 0) {
-        $self.removeLastWord();
-        const html: string = $self.html();
-        $self.append($buttonPad);
+      while ($value.text().length > 0) {
+        $value.removeLastWord();
+        const html: string = $value.html();
+        $value.append($buttonPad);
 
-        if (lastHeight > $self.height()) {
+        if (lastHeight > $value.height()) {
           stringsByLine.unshift(html);
-          lastHeight = $self.height();
+          lastHeight = $value.height();
         }
 
         $buttonPad.remove();
       }
 
       if (stringsByLine.length <= lines) {
-        $self.html(expandedText);
+        $value.html(expandedText);
         return;
       }
 
@@ -477,27 +485,31 @@ export default function jqueryPlugins($) {
       // Toggle function
       let expanded: boolean = false;
 
-      (<any>$self).toggle = function() {
-        $self.empty();
+      (<any>$value).toggle = function() {
+        $value.empty();
         const $toggleButton: JQuery = $('<a href="#" class="toggle"></a>');
         if (expanded) {
-          $self.html(expandedText + " ");
+          const lessAriaLabel: string = Strings.format(lessAriaLabelTemplate, labelText);
+          $value.html(expandedText + " ");
           $toggleButton.text(lessText);
           $toggleButton.switchClass("less", "more");
+          $toggleButton.attr('aria-label', lessAriaLabel);
         } else {
-          $self.html(collapsedText + "&hellip; ");
+          const moreAriaLabel: string = Strings.format(moreAriaLabelTemplate, labelText);
+          $value.html(collapsedText + "&hellip; ");
           $toggleButton.text(moreText);
           $toggleButton.switchClass("more", "less");
+          $toggleButton.attr('aria-label', moreAriaLabel);
         }
         $toggleButton.one("click", function(e) {
           e.preventDefault();
-          $self.toggle();
+          $value.toggle();
         });
         expanded = !expanded;
-        $self.append($toggleButton);
+        $value.append($toggleButton);
         if (cb) cb();
       };
-      $self.toggle();
+      $value.toggle();
     });
   };
 

src/content-handlers/iiif/extensions/uv-aleph-extension/config/config.json

@@ -181,10 +181,12 @@
         "expandFull": "$expandGallery",
         "holdingText": "$moduleGoesHere",
         "less": "$less",
+        "lessAriaLabelTemplate": "$lessAriaLabelTemplate",
         "license": "$license",
         "logo": "$logo",
         "manifestHeader": "$aboutTheItem",
         "more": "$more",
+        "moreAriaLabelTemplate": "$moreAriaLabelTemplate",
         "noData": "$noDataToDisplay",
         "page": "$page",
         "rangeHeader": "$aboutThisSection",

src/content-handlers/iiif/extensions/uv-av-extension/config/config.json

@@ -208,10 +208,12 @@
         "expandFull": "$expandGallery",
         "holdingText": "$moduleGoesHere",
         "less": "$less",
+        "lessAriaLabelTemplate": "$lessAriaLabelTemplate",
         "license": "$license",
         "logo": "$logo",
         "manifestHeader": "$aboutTheItem",
         "more": "$more",
+        "moreAriaLabelTemplate": "$moreAriaLabelTemplate",
         "noData": "$noDataToDisplay",
         "page": "$page",
         "rangeHeader": "$aboutThisSection",

src/content-handlers/iiif/extensions/uv-default-extension/config/config.json

@@ -210,10 +210,12 @@
         "expandFull": "$expandGallery",
         "holdingText": "$moduleGoesHere",
         "less": "$less",
+        "lessAriaLabelTemplate": "$lessAriaLabelTemplate",
         "license": "$license",
         "logo": "$logo",
         "manifestHeader": "$aboutTheItem",
         "more": "$more",
+        "moreAriaLabelTemplate": "$moreAriaLabelTemplate",
         "noData": "$noDataToDisplay",
         "page": "$page",
         "rangeHeader": "$aboutThisSection",

src/content-handlers/iiif/extensions/uv-ebook-extension/config/config.json

@@ -177,10 +177,12 @@
         "expandFull": "$expandGallery",
         "holdingText": "$moduleGoesHere",
         "less": "$less",
+        "lessAriaLabelTemplate": "$lessAriaLabelTemplate",
         "license": "$license",
         "logo": "$logo",
         "manifestHeader": "$aboutTheItem",
         "more": "$more",
+        "moreAriaLabelTemplate": "$moreAriaLabelTemplate",
         "noData": "$noDataToDisplay",
         "page": "$page",
         "rangeHeader": "$aboutThisSection",

src/content-handlers/iiif/extensions/uv-mediaelement-extension/config/config.json

@@ -246,10 +246,12 @@
         "expandFull": "$expandGallery",
         "holdingText": "$moduleGoesHere",
         "less": "$less",
+        "lessAriaLabelTemplate": "$lessAriaLabelTemplate",
         "license": "$license",
         "logo": "$logo",
         "manifestHeader": "$aboutTheItem",
         "more": "$more",
+        "moreAriaLabelTemplate": "$moreAriaLabelTemplate",
         "noData": "$noDataToDisplay",
         "page": "$page",
         "rangeHeader": "$aboutThisSection",

src/content-handlers/iiif/extensions/uv-model-viewer-extension/config/config.json

@@ -190,10 +190,12 @@
         "expandFull": "$expandGallery",
         "holdingText": "$moduleGoesHere",
         "less": "$less",
+        "lessAriaLabelTemplate": "$lessAriaLabelTemplate",
         "license": "$license",
         "logo": "$logo",
         "manifestHeader": "$aboutTheItem",
         "more": "$more",
+        "moreAriaLabelTemplate": "$moreAriaLabelTemplate",
         "noData": "$noDataToDisplay",
         "page": "$page",
         "rangeHeader": "$aboutThisSection",

src/content-handlers/iiif/extensions/uv-openseadragon-extension/config/config.json

@@ -256,10 +256,12 @@
         "expandFull": "$expandGallery",
         "holdingText": "$moduleGoesHere",
         "less": "$less",
+        "lessAriaLabelTemplate": "$lessAriaLabelTemplate",
         "license": "$license",
         "logo": "$logo",
         "manifestHeader": "$aboutTheItem",
         "more": "$more",
+        "moreAriaLabelTemplate": "$moreAriaLabelTemplate",
         "noData": "$noDataToDisplay",
         "page": "$page",
         "rangeHeader": "$aboutThisSection",

src/content-handlers/iiif/extensions/uv-pdf-extension/config/config.json

@@ -167,10 +167,12 @@
         "expandFull": "$expandGallery",
         "holdingText": "$moduleGoesHere",
         "less": "$less",
+        "lessAriaLabelTemplate": "$lessAriaLabelTemplate",
         "license": "$license",
         "logo": "$logo",
         "manifestHeader": "$aboutTheItem",
         "more": "$more",
+        "moreAriaLabelTemplate": "$moreAriaLabelTemplate",
         "noData": "$noDataToDisplay",
         "page": "$page",
         "rangeHeader": "$aboutThisSection",

src/locales/cy-GB.json

@@ -61,10 +61,12 @@
   "$expandInformation": "Ehangu'r Wybodaeth",
   "$moduleGoesHere": "Eich modiwl fan hyn!",
   "$less": "llai",
+  "$lessAriaLabelTemplate": "Llai o wybodaeth: Cuddio {0}",
   "$license": "Trwydded",
   "$logo": "Logo",
   "$aboutTheItem": "Am yr eitem",
   "$more": "mwy",
+  "$moreAriaLabelTemplate": "Mwy o wybodaeth: Gweld {0}",
   "$noDataToDisplay": "Nid oes data i'w arddangos",
   "$page": "Tudalen",
   "$aboutThisSection": "Am yr adran hon",

src/locales/en-GB.json

@@ -61,10 +61,12 @@
   "$expandInformation": "Expand Information",
   "$moduleGoesHere": "Your module goes here!",
   "$less": "less",
+  "$lessAriaLabelTemplate": "Less information: Hide {0}",
   "$license": "License",
   "$logo": "Logo",
   "$aboutTheItem": "About the item",
   "$more": "more",
+  "$moreAriaLabelTemplate": "More information: Reveal {0}",
   "$noDataToDisplay": "No data to display",
   "$page": "Page",
   "$aboutThisSection": "About this section",

src/locales/fr-FR.json

@@ -61,10 +61,12 @@
   "$expandInformation": "Afficher les informations",
   "$moduleGoesHere": "Votre module vient ici !",
   "$less": "moins",
+  "$lessAriaLabelTemplate": "Moins d'informations: cacher {0}",
   "$license": "Licence",
   "$logo": "Logo",
   "$aboutTheItem": "A propos du contenu",
   "$more": "suite",
+  "$moreAriaLabelTemplate": "Plus d'informations: afficher {0}",
   "$noDataToDisplay": "Aucune donnée à afficher",
   "$page": "Page",
   "$aboutThisSection": "À propos de cette rubrique",

src/locales/pl-PL.json

@@ -61,10 +61,12 @@
   "$expandInformation": "Rozwiń informacje",
   "$moduleGoesHere": "Miejsce na twój moduł!",
   "$less": "mniej",
+  "$lessAriaLabelTemplate": "Więcej informacji: pokaż {0}",
   "$license": "Licencja",
   "$logo": "Logo",
   "$aboutTheItem": "O obiekcie",
   "$more": "więcej",
+  "$moreAriaLabelTemplate": "Mniej informacji: ukryj {0}",
   "$noDataToDisplay": "Brak danych do wyświetlenia",
   "$page": "Strona",
   "$aboutThisSection": "O tej sekcji",

src/locales/sv-SE.json

@@ -61,10 +61,12 @@
   "$expandInformation": "Expandera information",
   "$moduleGoesHere": "Plats för din modul!",
   "$less": "mindre",
+  "$lessAriaLabelTemplate": "Mindre information: göm {0}",
   "$license": "Licensvillkor",
   "$logo": "Logotyp",
   "$aboutTheItem": "Om objektet",
   "$more": "mer",
+  "$moreAriaLabelTemplate": "Mer information: visa {0}",
   "$noDataToDisplay": "Ingen information att vis",
   "$page": "Sida",
   "$aboutThisSection": "Om detta avsnitt",