fix: update maidr attribute to maidr-data for py-maidr to handle (#636)

Author: dakshpokar

galleries/attributes/bar_plot.html

@@ -21,8 +21,8 @@
             version="1.1"
             id="barplot1"
             tabindex="0"
-            maidr="{"type":"bar","id":"barplot1","title":"The Number of Diamonds by Cut.","selector":"g[id^=\"geom_rect\"] > rect","axes":{"x":{"label":"Cut","level":["Fair","Good","Very Good","Premium","Ideal"]},"y":{"label":"Count"}},"data":[1610,4906,12082,13791,21551]}"
-            >
+            maidr-data='{"type":"bar","id":"barplot1","title":"The Number of Diamonds by Cut.","selector":"g[id^=\"geom_rect\"] > rect","axes":{"x":{"label":"Cut","level":["Fair","Good","Very Good","Premium","Ideal"]},"y":{"label":"Count"}},"data":[1610,4906,12082,13791,21551]}'
+          >
             <metadata
               xmlns:gridsvg="http://www.stat.auckland.ac.nz/~paul/R/gridSVG/"
             >

src/js/init.js

@@ -10,7 +10,7 @@ document.addEventListener('DOMContentLoaded', function (e) {
 
   // set focus events for all charts matching maidr ids
   let maidrObjects = [];
-  
+
   // First check for globally defined maidr variable (script tag method)
   if (typeof window.maidr !== 'undefined') {
     if (!Array.isArray(window.maidr)) {
@@ -21,10 +21,10 @@ document.addEventListener('DOMContentLoaded', function (e) {
   }
 
   // Then look for elements with maidr attribute
-  const elementsWithMaidrAttr = document.querySelectorAll('[maidr]');
-  elementsWithMaidrAttr.forEach(element => {
+  const elementsWithMaidrAttr = document.querySelectorAll('[maidr-data]');
+  elementsWithMaidrAttr.forEach((element) => {
     try {
-      const maidrData = JSON.parse(element.getAttribute('maidr'));
+      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) {
@@ -36,7 +36,7 @@ document.addEventListener('DOMContentLoaded', function (e) {
         }
       }
       // Check if this id already exists in maidrObjects to avoid duplicates
-      if (!maidrObjects.some(obj => obj.id === maidrData.id)) {
+      if (!maidrObjects.some((obj) => obj.id === maidrData.id)) {
         maidrObjects.push(maidrData);
       }
     } catch (e) {