[KIAW-1468] Provide alt text for images in posts and articles

src/imageAltText.js

@@ -0,0 +1,38 @@
+/**
+ * Adds default alt text to images that don't have one
+ */
+function addAltTextToImages() {
+  const articleBody = document.querySelector(".article-body");
+  const postBody = document.querySelectorAll(".post-body");
+
+  if (articleBody) {
+    const allImages = articleBody.querySelectorAll("img");
+    const imagesWithoutAlt = articleBody.querySelectorAll(
+      "img:not([alt]), img[alt='']"
+    );
+
+    imagesWithoutAlt.forEach((img) => {
+      const position = Array.from(allImages).indexOf(img) + 1;
+      const altText = window.articleImageAltText.replace("9999", position);
+      img.setAttribute("alt", altText);
+    });
+  }
+
+  const post = postBody ? postBody[0] : null;
+  if (post) {
+    const allImages = post.querySelectorAll("img");
+    const imagesWithoutAlt = post.querySelectorAll(
+      "img:not([alt]), img[alt='']"
+    );
+
+    imagesWithoutAlt.forEach((img) => {
+      const position = Array.from(allImages).indexOf(img) + 1;
+      const altText = window.postImageAltText.replace("9999", position);
+      img.setAttribute("alt", altText);
+    });
+  }
+}
+
+window.addEventListener("DOMContentLoaded", () => {
+  addAltTextToImages();
+});

src/index.js

@@ -5,3 +5,4 @@ import "./dropdowns";
 import "./share";
 import "./search";
 import "./forms";
+import "./imageAltText";

templates/document_head.hbs

@@ -1,34 +1,37 @@
 <meta content="width=device-width, initial-scale=1.0" name="viewport" />
 <!-- Make the translated search clear button label available for use in JS -->
 <!-- See buildClearSearchButton() in script.js -->
-<script type="text/javascript">window.searchClearButtonLabelLocalized = "{{t 'search_clear'}}";</script>
 <script type="text/javascript">
-  // Load ES module polyfill only for browsers that don't support ES modules
-  if (!(HTMLScriptElement.supports && HTMLScriptElement.supports('importmap'))) {
-    document.write('<script async src="{{asset 'es-module-shims.js'}}"><\/script>');
-  }
+  window.searchClearButtonLabelLocalized = "{{t "search_clear"}}";
+  window.articleImageAltText = "{{t "article_image_alt_text" position=9999}}";
+  window.postImageAltText = "{{t "post_image_alt_text" position=9999}}";
+</script>
+<script type="text/javascript">
+  // Load ES module polyfill only for browsers that don't support ES modules if
+  (!(HTMLScriptElement.supports && HTMLScriptElement.supports('importmap'))) {
+  document.write('<script async src="{{asset
+    "es-module-shims.js"
+  }}"><\/script>'); }
 </script>
 <script type="importmap">
-{
-  "imports": {
-    "new-request-form": "{{asset 'new-request-form-bundle.js'}}",
-    "flash-notifications": "{{asset 'flash-notifications-bundle.js'}}",
-    "service-catalog": "{{asset 'service-catalog-bundle.js'}}",
-    "approval-requests": "{{asset 'approval-requests-bundle.js'}}",
-    "approval-requests-translations": "{{asset 'approval-requests-translations-bundle.js'}}",
-    "new-request-form-translations": "{{asset 'new-request-form-translations-bundle.js'}}",
-    "service-catalog-translations": "{{asset 'service-catalog-translations-bundle.js'}}",
-    "shared": "{{asset 'shared-bundle.js'}}",
-    "ticket-fields": "{{asset 'ticket-fields-bundle.js'}}",
-    "wysiwyg": "{{asset 'wysiwyg-bundle.js'}}"
-  }
-}
+  { "imports": { "new-request-form": "{{asset "new-request-form-bundle.js"}}",
+  "flash-notifications": "{{asset "flash-notifications-bundle.js"}}",
+  "service-catalog": "{{asset "service-catalog-bundle.js"}}",
+  "approval-requests": "{{asset "approval-requests-bundle.js"}}",
+  "approval-requests-translations": "{{asset
+    "approval-requests-translations-bundle.js"
+  }}", "new-request-form-translations": "{{asset
+    "new-request-form-translations-bundle.js"
+  }}", "service-catalog-translations": "{{asset
+    "service-catalog-translations-bundle.js"
+  }}", "shared": "{{asset "shared-bundle.js"}}", "ticket-fields": "{{asset
+    "ticket-fields-bundle.js"
+  }}", "wysiwyg": "{{asset "wysiwyg-bundle.js"}}" } }
 </script>
 <script type="module">
-  import { renderFlashNotifications } from "flash-notifications";
-
-  const settings = {{json settings}};
-  const baseLocale = {{json help_center.base_locale}};
-
-  renderFlashNotifications(settings, baseLocale);
+  import { renderFlashNotifications } from "flash-notifications"; const settings
+  =
+  {{json settings}}; const baseLocale =
+  {{json help_center.base_locale}}; renderFlashNotifications(settings,
+  baseLocale);
 </script>

translations/en-us.json

@@ -1,4 +1,6 @@
 {
+  "article_image_alt_text": "Image {{position}} in article",
+  "post_image_alt_text": "Image {{position}} in post",
   "article_author_description": "Show author image and name",
   "article_author_label": "Author",
   "article_comments_description": "Show comments on articles",