fix(ShadyDOM): prevent shady dom buttons from interacting with Light DOM

Ensure that `<button>` elements in rewritten ShadyDOM markup don't
accidentally submit `<form>` elements in LightDOM.

* Explicitly set `type="button"` for every button in a ShadowDOM html
  * This _should_ be enough, but we call `preventDefault()` on click
    event listeners on the buttons, just to be sure.

Author: Ryan A. Johnson

src/helix-ui/elements/HXAccordionPanelElement.js

@@ -5,7 +5,7 @@ const tagName = 'hx-accordion-panel';
 const template = document.createElement('template');
 template.innerHTML = `
   <style>${shadowStyles}</style>
-  <button id="toggle" aria-controls="body" aria-expanded="false">
+  <button type="button" id="toggle" aria-controls="body" aria-expanded="false">
     <div class="header">
       <span class="header__content">
         <slot name="header"></slot>
@@ -71,7 +71,9 @@ export class HXAccordionPanelElement extends HXElement {
 
     // PRIVATE METHODS
 
-    _onClick () {
+    _onClick (evt) {
+        evt.preventDefault();
+
         if (!this.disabled) {
             this.open = !this.open;
         }

src/helix-ui/elements/HXModalElement.js

@@ -8,7 +8,7 @@ const template = document.createElement('template');
 template.innerHTML = `
   <style>${shadowStyles}</style>
   <div id="container">
-    <button id="close">
+    <button type="button" id="close">
       <hx-icon type="times"></hx-icon>
     </button>
     <slot></slot>
@@ -53,7 +53,9 @@ export class HXModalElement extends HXElement {
         }
     }//attributeChangedCallback
 
-    _close () {
+    _close (evt) {
+        evt.preventDefault();
+
         this.open = false;
     }
 

src/helix-ui/elements/HXSearchElement.js

@@ -8,7 +8,7 @@ template.innerHTML = `
     <style>${shadowStyles}</style>
     <label id="wrapper">
         <input type="text" role="search" id="search" autocomplete="off" />
-        <button id="clear" hidden aria-label="Clear search">
+        <button type="button" id="clear" hidden aria-label="Clear search">
             <hx-icon type="times"></hx-icon>
         </button>
         <div id="icon">
@@ -145,7 +145,9 @@ export class HXSearchElement extends HXElement {
         }
     }
 
-    _clearValue () {
+    _clearValue (evt) {
+        evt.preventDefault();
+
         this.value = '';
 
         // Emit a 'clear' event to communicate state change.