feat: aria-details reporting on images (alongside alt, figcaption, de…

…scribedBy) Fixes #411
daisy · Feb 4, 2025 · c9413e4 · c9413e4
1 parent a55f85e
commit c9413e4
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 6 deletions.
diff --git a/packages/ace-core/src/scripts/ace-extraction.js b/packages/ace-core/src/scripts/ace-extraction.js
@@ -182,19 +182,31 @@ ace.getImages = function() {
         cfi: window.daisy.epub.createCFI(img),
         html: img.outerHTML,
       }
+
       let describedby = img.getAttribute('aria-describedby')
       if (describedby) {
         var describedbyID = describedby.trim().replace(/\s{2,}/g, ' ').split(' ').shift();
         let elem = document.getElementById(describedbyID);
-        if (elem) imageObj.describedby = elem.innerText || elem.textContent;
+        if (elem) imageObj.describedby = elem.textContent || elem.innerText;
         if (imageObj.describedby) {
           imageObj.describedby = imageObj.describedby.trim().replace(/\s\s+/g, " ");
         }
       }
+
+      let details = img.getAttribute('aria-details')
+      if (details) {
+        var detailsID = details.trim().replace(/\s{2,}/g, ' ').split(' ').shift();
+        let elem = document.getElementById(detailsID);
+        if (elem) imageObj.details = elem.textContent || elem.innerText;
+        if (imageObj.details) {
+          imageObj.details = imageObj.details.trim().replace(/\s\s+/g, " ");
+        }
+      }
+
       let figure = findFigure(img);
       if (figure) {
         let figcaption = figure.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "figcaption");
-        if (figcaption.length > 0) imageObj.figcaption = figcaption[0].innerText || figcaption[0].textContent;
+        if (figcaption.length > 0) imageObj.figcaption = figcaption[0].textContent || figcaption[0].innerText;
         if (imageObj.figcaption) {
           imageObj.figcaption = imageObj.figcaption.trim().replace(/\s\s+/g, " ");
         }
@@ -225,7 +237,7 @@ ace.getImages = function() {
         const role = img.parentElement.getAttribute("role");
 
         if (!title && img.firstElementChild && img.firstElementChild.localName === "title") {
-          title = img.firstElementChild.innerText || img.firstElementChild.textContent;
+          title = img.firstElementChild.textContent || img.firstElementChild.innerText;
           if (title) {
             title = title.trim().replace(/\s\s+/g, " ");
           }
@@ -246,12 +258,22 @@ ace.getImages = function() {
         if (describedby) {
           var describedbyID = describedby.trim().replace(/\s{2,}/g, ' ').split(' ').shift();
           let elem = document.getElementById(describedbyID);
-          if (elem) imageObj.describedby = elem.innerText || elem.textContent;
+          if (elem) imageObj.describedby = elem.textContent || elem.innerText;
           if (imageObj.describedby) {
             imageObj.describedby = imageObj.describedby.trim().replace(/\s\s+/g, " ");
           }
         }
 
+        let details = img.parentElement.getAttribute('aria-details')
+        if (details) {
+          var detailsID = details.trim().replace(/\s{2,}/g, ' ').split(' ').shift();
+          let elem = document.getElementById(detailsID);
+          if (elem) imageObj.details = elem.textContent || elem.innerText;
+          if (imageObj.details) {
+            imageObj.details = imageObj.details.trim().replace(/\s\s+/g, " ");
+          }
+        }
+
         // if (!imageObj.src) {
         //   throw new Error(img.getAttributeNS('http://www.w3.org/1999/xlink', 'href') + " -- " + img.getAttributeNS("http://www.w3.org/2000/svg", 'href') + " -- " + img.getAttributeNS("http://www.w3.org/1999/xhtml", 'href') + " -- " + img.getAttribute('href'));
         // }

diff --git a/packages/ace-report/src/report-template.handlebars b/packages/ace-report/src/report-template.handlebars
@@ -508,6 +508,8 @@ font-size: 90%;
                 </th>
                 <th><code>aria-describedby</code>
                 </th>
+                <th><code>aria-details</code>
+                </th>
                 <th><code>figcaption</code></th>
                 <th>{{#localize "location"}}{{/localize}}</th>
                 <th>{{#localize "role"}}{{/localize}}</th>
@@ -534,6 +536,12 @@ font-size: 90%;
                     <td class="missing">{{#localize "na"}}{{/localize}}</td>
                   {{/if}}
 
+                  {{#if details}}
+                    <td>{{details}}</td>
+                  {{else}}
+                    <td class="missing">{{#localize "na"}}{{/localize}}</td>
+                  {{/if}}
+
                   {{#if figcaption}}
                     <td>{{figcaption}}</td>
                   {{else}}

diff --git a/tests/__tests__/regression.test.js b/tests/__tests__/regression.test.js
@@ -99,6 +99,7 @@ test('issue #209: `aria-describedby` can be a list of IDs', async () => {
       expect.objectContaining({
         "src": "EPUB/image_001.jpg",
         "describedby": "description 1",
+        "details": "detail: y description 3 x",
       })
     ])
   }));

diff --git a/tests/data/issue-209/EPUB/content_001.xhtml b/tests/data/issue-209/EPUB/content_001.xhtml
@@ -5,8 +5,9 @@
 <body>
 <h1>Loomings</h1>
 <p>Call me Ishmael.</p>
-<img id="img" src="image_001.jpg" alt="a fake image" aria-describedby="desc1 desc2"/>
+<img id="img" src="image_001.jpg" alt="a fake image" aria-describedby="desc1 desc2" aria-details="desc3"/>
 <p id="desc1">description 1</p>
 <p id="desc2">description 2</p>
+<detail id="desc3">  <summary>   detail:  </summary> y <p>  description 3  </p> x  </detail>
 </body>
 </html>
diff --git a/tests/data/report/report.html b/tests/data/report/report.html
@@ -148,6 +148,11 @@
        : $('<td>' + image.describedby + '</td>');
       tr.append(tdDescribedby);
 
+      var tdDetails = !image.details ?
+      $('<td class="missing">N/A</td>')
+        : $('<td>' + image.details + '</td>');
+      tr.append(tdDetails);
+
       var tdFigcaption = !image.figcaption ?
       $('<td class="missing">N/A</td>')
        : $('<td>' + image.figcaption + '</td>');
@@ -175,7 +180,7 @@
     }
   }
   function populateA11yMetadataSummary(a11ymetadata, pubmetadata) {
-    
+
     var tbody = $("#a11y-meta-present tbody");
     var list = $("#a11y-meta-missing");
 

diff --git a/website/content/docs/report-html.md b/website/content/docs/report-html.md
@@ -53,6 +53,7 @@ This table contains each image in the EPUB and information about it. The table c
 * `Image`: the image itself
 * `alt attribute`: the contents of the `alt` attribute
 * `aria-describedby`: the contents of the element referenced by the `aria-describedby` attribute
+* `aria-details`: the contents of the element referenced by the `aria-details` attribute
 * `Associated figcaption`: the `figcaption` for this image
 * `Location`: location in the EPUB of this image
 * `Role`: the image's `role` attribute value(s)