maidr 2.29.1 → 2.30.1

package/dist/maidr.js

@@ -928,7 +928,7 @@ class Menu {
 
   // initial html for the menu
   menuHtml = `
-        <div id="menu" class="modal hidden" role="dialog" tabindex="-1">
+        <div id="menu" class="maidr-modal hidden" role="dialog" tabindex="-1">
             <div class="modal-dialog" role="document" tabindex="0">
                 <div class="modal-content">
                     <div class="modal-header">
@@ -1686,6 +1686,7 @@ class Menu {
   UpdateHtml() {
     // set aria attributes
     constants.infoDiv.setAttribute('aria-live', constants.ariaMode);
+
     document
       .getElementById(constants.announcement_container_id)
       .setAttribute('aria-live', constants.ariaMode);
@@ -1846,7 +1847,7 @@ class ChatLLM {
    */
   CreateComponent() {
     let html = `
-        <div id="chatLLM" class="modal hidden" role="dialog" tabindex="-1">
+        <div id="chatLLM" class="maidr-modal hidden" role="dialog" tabindex="-1">
             <div class="modal-dialog" role="document" tabindex="0">
                 <div class="modal-content">
                     <div class="modal-header">
@@ -2985,7 +2986,7 @@ class Description {
   CreateComponent() {
     // modal containing description summary stuff
     let html = `
-        <div id="description" class="modal hidden" role="dialog" tabindex="-1">
+        <div id="description" class="maidr-modal hidden" role="dialog" tabindex="-1">
             <div class="modal-dialog" role="document" tabindex="0">
                 <div class="modal-content">
                     <div class="modal-header">
@@ -12145,7 +12146,7 @@ class Goto {
 
 // events and init functions
 // we do some setup, but most of the work is done when user focuses on an element matching an id from maidr user data
-document.addEventListener('DOMContentLoaded', function (e) {
+function init(id) {
   // we wrap in DOMContentLoaded to make sure everything has loaded before we run anything
 
   // create global vars
@@ -12164,30 +12165,67 @@ document.addEventListener('DOMContentLoaded', function (e) {
       maidrObjects = maidrObjects.concat(window.maidr);
     }
   }
-
-  // Then look for elements with maidr attribute
-  const elementsWithMaidrAttr = document.querySelectorAll('[maidr-data]');
-  elementsWithMaidrAttr.forEach((element) => {
-    try {
-      const maidrData = JSON.parse(element.getAttribute('maidr-data'));
+  if (id !== undefined) {
+    constants.main_container_id = constants.main_container_id + '-' + id;
+    constants.chart_container_id = constants.chart_container_id + '-' + id;
+    constants.braille_container_id = constants.braille_container_id + '-' + id;
+    constants.braille_input_id = constants.braille_input_id + '-' + id;
+    constants.info_id = constants.info_id + '-' + id;
+    constants.announcement_container_id =
+      constants.announcement_container_id + '-' + id;
+    constants.review_id_container = constants.review_id_container + '-' + id;
+    constants.review_id = constants.review_id + '-' + id;
+    constants.end_chime_id = constants.end_chime_id + '-' + id;
+
+    const elementWithId = document.getElementById(id);
+    if (elementWithId) {
+      let maidrData;
+      try {
+        maidrData = JSON.parse(elementWithId.getAttribute('maidr-data'));
+      } catch (e) {
+        console.error('Failed to parse maidr attribute:', e);
+        return;
+      }
       // If id is not provided in the JSON, use the element's id
       if (!maidrData.id) {
-        if (element.id) {
-          maidrData.id = element.id;
+        if (elementWithId.id) {
+          maidrData.id = elementWithId.id;
         } else {
           // Generate a random id if none exists
-          element.id = 'maidr-' + Math.random().toString(36).substr(2, 9);
-          maidrData.id = element.id;
+          elementWithId.id = 'maidr-' + Math.random().toString(36).substr(2, 9);
+          maidrData.id = elementWithId.id;
         }
       }
       // Check if this id already exists in maidrObjects to avoid duplicates
       if (!maidrObjects.some((obj) => obj.id === maidrData.id)) {
         maidrObjects.push(maidrData);
       }
-    } catch (e) {
-      console.error('Failed to parse maidr attribute:', e);
     }
-  });
+  } else {
+    // Then look for elements with maidr attribute
+    const elementsWithMaidrAttr = document.querySelectorAll('[maidr-data]');
+    elementsWithMaidrAttr.forEach((element) => {
+      try {
+        const maidrData = JSON.parse(element.getAttribute('maidr-data'));
+        // If id is not provided in the JSON, use the element's id
+        if (!maidrData.id) {
+          if (element.id) {
+            maidrData.id = element.id;
+          } else {
+            // Generate a random id if none exists
+            element.id = 'maidr-' + Math.random().toString(36).substr(2, 9);
+            maidrData.id = element.id;
+          }
+        }
+        // Check if this id already exists in maidrObjects to avoid duplicates
+        if (!maidrObjects.some((obj) => obj.id === maidrData.id)) {
+          maidrObjects.push(maidrData);
+        }
+      } catch (e) {
+        console.error('Failed to parse maidr attribute:', e);
+      }
+    });
+  }
 
   // set focus events for all maidr ids
   DestroyMaidr(); // just in case
@@ -12208,10 +12246,15 @@ document.addEventListener('DOMContentLoaded', function (e) {
       // blur done elsewhere
     }
   }
-
   // init components like alt text on just the first chart
   CreateChartComponents(firstMaidr, true);
-});
+}
+window.init = init;
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', function (e) {
+    init();
+  });
+}
 
 /**
  * Initializes the Maidr app for a given chart, taken from the matching ID of the focused chart
@@ -12580,7 +12623,9 @@ function CreateChartComponents(thisMaidr, chartOnly = false) {
       .getElementById(constants.info_id)
       .insertAdjacentHTML(
         'afterend',
-        '<div id="announcements" aria-live="assertive" aria-atomic="true" class="mb-3"></div>\n'
+        '<div id="' +
+          constants.announcement_container_id +
+          '" aria-live="assertive" aria-atomic="true" class="mb-3"></div>\n'
       );
 
     // review mode form field