feat: decoupled aria-expanded state #227 (#228)

Author: ianmcburnie

docs/core/makeup-expander/index.html

@@ -157,6 +157,15 @@ <h2>Auto Collapse On</h2>
           <p>A checkbox: <input type="checkbox" aria-label="Dummy checkbox" /></p>
         </div>
       </span>
+
+      <h2>UseAriaExpanded=false</h2>
+
+      <span class="expander expander--tooltip flyout">
+        <button class="expander__host">Btn</button>
+        <div class="expander__content flyout__content">
+          <p>A link: <a id="foo" href="http://www.ebay.com">www.ebay.com</a></p>
+        </div>
+      </span>
     </main>
     <script src="index.min.js"></script>
   </body>

docs/core/makeup-expander/index.js

@@ -10,6 +10,7 @@ const hoverExpanderEls = document.querySelectorAll(".expander--hover-only");
 const hoverAndFocusExpanderEls = document.querySelectorAll(".expander--focus-and-hover");
 const stealthExpanderEls = document.querySelectorAll(".expander--stealth-only");
 const clickAndSpacebarExpanderEls = document.querySelectorAll(".expander--click-and-spacebar");
+const tooltipEls = document.querySelectorAll(".expander--tooltip");
 const expanderWidgets = [];
 
 expanderWidgets.push(new Expander(clickExpanderEls[0], { expandOnClick: true }));
@@ -49,11 +50,24 @@ clickAndSpacebarExpanderEls.forEach(function (el) {
   );
 });
 
-expanderWidgets.forEach(function (item) {
-  item.el.addEventListener("expander-expand", function (e) {
-    console.log(e);
-  });
-  item.el.addEventListener("expander-collapse", function (e) {
-    console.log(e);
+tooltipEls.forEach(function (el) {
+  expanderWidgets.push(
+    new Expander(el, {
+      ariaControls: false,
+      autoCollapse: true,
+      expandOnFocus: true,
+      expandOnHover: true,
+      useAriaExpanded: false,
+      expandedClass: "expander__host-container--expanded",
+    }),
+  );
+
+  expanderWidgets.forEach(function (item) {
+    item.el.addEventListener("expander-expand", function (e) {
+      console.log(e);
+    });
+    item.el.addEventListener("expander-collapse", function (e) {
+      console.log(e);
+    });
   });
 });