Add support for alt attribute on structured content images (#359)

* Add support for alt attribute on structured content images

* Add new `alt` property for structured content images

* Update test script with new media file count

---------

Co-authored-by: stephenmk <stephenmk@users.noreply.github.com>

5 files changed, 14 insertions, 3 deletions

diff --git a/ext/css/structured-content.css b/ext/css/structured-content.css
index 1d4677b5..50fcad02 100644
--- a/ext/css/structured-content.css
+++ b/ext/css/structured-content.css
@@ -147,7 +147,7 @@
 }
 
 .gloss-image-link[data-appearance=monochrome] .gloss-image {
-    visibility: hidden;
+    opacity: 0;
 }
 .gloss-image-link:not([data-appearance=monochrome]) .gloss-image-background {
     display: none;
diff --git a/ext/data/schemas/dictionary-term-bank-v3-schema.json b/ext/data/schemas/dictionary-term-bank-v3-schema.json
index 2fc39c2e..547bde49 100644
--- a/ext/data/schemas/dictionary-term-bank-v3-schema.json
+++ b/ext/data/schemas/dictionary-term-bank-v3-schema.json
@@ -155,6 +155,10 @@
                                     "type": "string",
                                     "description": "Hover text for the image."
                                 },
+                                "alt": {
+                                    "type": "string",
+                                    "description": "Alt text for the image."
+                                },
                                 "description": {
                                     "type": "string",
                                     "description": "Description of the image."
@@ -424,6 +428,10 @@
                                             "type": "string",
                                             "description": "Hover text for the image."
                                         },
+                                        "alt": {
+                                            "type": "string",
+                                            "description": "Alt text for the image."
+                                        },
                                         "description": {
                                             "type": "string",
                                             "description": "Description of the image."
diff --git a/ext/data/structured-content-style.json b/ext/data/structured-content-style.json
index fe222486..52bd41c8 100644
--- a/ext/data/structured-content-style.json
+++ b/ext/data/structured-content-style.json
@@ -169,7 +169,7 @@
     {
         "selectors": [".gloss-image-link[data-appearance=monochrome] .gloss-image"],
         "styles": [
-            ["visibility", "hidden"]
+            ["opacity", "0"]
         ]
     },
     {
diff --git a/ext/js/display/sandbox/structured-content-generator.js b/ext/js/display/sandbox/structured-content-generator.js
index a28464ae..ad63667a 100644
--- a/ext/js/display/sandbox/structured-content-generator.js
+++ b/ext/js/display/sandbox/structured-content-generator.js
@@ -65,6 +65,7 @@ export class StructuredContentGenerator {
             preferredWidth,
             preferredHeight,
             title,
+            alt,
             pixelated,
             imageRendering,
             appearance,
@@ -102,7 +103,7 @@ export class StructuredContentGenerator {
         imageContainer.appendChild(imageBackground);
 
         const image = /** @type {HTMLImageElement} */ (this._createElement('img', 'gloss-image'));
-        image.alt = '';
+        image.alt = typeof alt === 'string' ? alt : '';
         imageContainer.appendChild(image);
 
         const overlay = this._createElement('span', 'gloss-image-container-overlay');
diff --git a/ext/js/language/dictionary-importer.js b/ext/js/language/dictionary-importer.js
index 2b9792ea..2c0c7e9c 100644
--- a/ext/js/language/dictionary-importer.js
+++ b/ext/js/language/dictionary-importer.js
@@ -503,6 +503,7 @@ export class DictionaryImporter {
             width: preferredWidth,
             height: preferredHeight,
             title,
+            alt,
             description,
             pixelated,
             imageRendering,
@@ -518,6 +519,7 @@ export class DictionaryImporter {
         if (typeof preferredWidth === 'number') { target.preferredWidth = preferredWidth; }
         if (typeof preferredHeight === 'number') { target.preferredHeight = preferredHeight; }
         if (typeof title === 'string') { target.title = title; }
+        if (typeof alt === 'string') { target.alt = alt; }
         if (typeof description === 'string') { target.description = description; }
         if (typeof pixelated === 'boolean') { target.pixelated = pixelated; }
         if (typeof imageRendering === 'string') { target.imageRendering = imageRendering; }