update accordion group and accordion scripts to not be modules

w3c · Jun 8, 2021 · 732522e · 732522e
1 parent dd377da
commit 732522e
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 9 deletions.
diff --git a/examples/accordion/accordion-group.html b/examples/accordion/accordion-group.html
@@ -280,6 +280,7 @@ <h2 id="sc1_label">HTML Source Code</h2>
   <nav>
     <a href="../../#accordion">Accordion Design Pattern in WAI-ARIA Authoring Practices 1.2</a>
   </nav>
-  <script src="js/accordionGroup.js" type="module"></script>
+  <script src="js/accordion.js" type="text/javascript"></script>
+  <script src="js/accordionGroup.js" type="text/javascript"></script>
 </body>
 </html>
diff --git a/examples/accordion/accordion.html b/examples/accordion/accordion.html
@@ -226,6 +226,6 @@ <h2 id="sc1_label">HTML Source Code</h2>
   <nav>
     <a href="../../#accordion">Accordion Design Pattern in WAI-ARIA Authoring Practices 1.2</a>
   </nav>
-  <script src="js/accordion.js" type="module"></script>
+  <script src="js/accordion.js" type="text/javascript"></script>
 </body>
 </html>
diff --git a/examples/accordion/js/accordion.js b/examples/accordion/js/accordion.js
@@ -10,7 +10,7 @@
 // options are:
 // { onAccordionClick?: function, disableOpenButton?: boolean }
 
-export class Accordion {
+class Accordion {
   constructor(domNode, options = {}) {
     this.rootEl = domNode;
     this.buttonEl = this.rootEl.querySelector('button[aria-expanded]');
@@ -32,7 +32,6 @@ export class Accordion {
   }
 
   toggle(open) {
-    console.log('accordion toggle fn');
     // don't do anything if the open state doesn't change
     if (open === this.isOpen) {
       return;
@@ -74,4 +73,4 @@ export class Accordion {
 const accordionEls = [...document.querySelectorAll('.accordion h3')];
 accordionEls.forEach((el) => {
   new Accordion(el);
-});
+});
diff --git a/examples/accordion/js/accordionGroup.js b/examples/accordion/js/accordionGroup.js
@@ -7,7 +7,10 @@
 
 'use strict';
 
-import { Accordion } from './accordion.js';
+/*
+ * WARNING: This script depends on accordion.js existing at the time AccordionGroup is instantiated
+ * This would normally be done with import/export statements, but the APG does not currently use JS modules
+ */
 
 class AccordionGroup {
   constructor(accordionEls) {
@@ -17,6 +20,7 @@ class AccordionGroup {
     };
 
     this.accordions = accordionEls.map(
+      // eslint-disable-next-line no-undef
       (el) => new Accordion(el, accordionOptions)
     );
     this.openIndex = 0;
@@ -39,7 +43,6 @@ class AccordionGroup {
   }
 
   updateOpenIndex(newIndex) {
-    console.log('updating open index to', newIndex, 'from', this.openIndex);
     if (newIndex === this.openIndex) {
       return;
     }
@@ -52,5 +55,5 @@ class AccordionGroup {
 }
 
 // init accordions
-const accordionEls = [...document.querySelectorAll('.accordion-group h3')];
-new AccordionGroup(accordionEls);
+const accordionGroupEls = [...document.querySelectorAll('.accordion-group h3')];
+new AccordionGroup(accordionGroupEls);
diff --git a/examples/index.html b/examples/index.html
@@ -306,6 +306,7 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
             <td><code>region</code></td>
             <td>
               <ul>
+                <li><a href="accordion/accordion-group.html">Accordion Group</a></li>
                 <li><a href="accordion/accordion.html">Accordion</a></li>
                 <li><a href="carousel/carousel-1-prev-next.html">Auto-Rotating Image Carousel  with Buttons for Slide Control</a></li>
                 <li><a href="carousel/carousel-2-tablist.html">Auto-Rotating Image Carousel with Tabs for Slide Control</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
@@ -496,6 +497,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
             <td><code>aria-controls</code></td>
             <td>
               <ul>
+                <li><a href="accordion/accordion-group.html">Accordion Group</a></li>
                 <li><a href="accordion/accordion.html">Accordion</a></li>
                 <li><a href="carousel/carousel-1-prev-next.html">Auto-Rotating Image Carousel  with Buttons for Slide Control</a></li>
                 <li><a href="carousel/carousel-2-tablist.html">Auto-Rotating Image Carousel with Tabs for Slide Control</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
@@ -556,6 +558,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
             <td><code>aria-expanded</code></td>
             <td>
               <ul>
+                <li><a href="accordion/accordion-group.html">Accordion Group</a></li>
                 <li><a href="accordion/accordion.html">Accordion</a></li>
                 <li><a href="combobox/combobox-autocomplete-both.html">Editable Combobox With Both List and Inline Autocomplete</a></li>
                 <li><a href="combobox/combobox-autocomplete-list.html">Editable Combobox With List Autocomplete</a></li>
@@ -639,6 +642,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
             <td><code>aria-labelledby</code></td>
             <td>
               <ul>
+                <li><a href="accordion/accordion-group.html">Accordion Group</a></li>
                 <li><a href="accordion/accordion.html">Accordion</a></li>
                 <li><a href="combobox/combobox-datepicker.html">Date Picker Combobox</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="combobox/combobox-select-only.html">Select-Only Combobox</a></li>