Accordion Example: Fix CSS bugs in MS Edge (pull #502)

* Add type=button to accordion triggers

* Fix 2 issues related to CSS bugs in MS Edge

Note: See comments by @gerardkcohen in pull #502 for details about bugs in MS Edge that these changes work around.

examples/accordion/accordion.html

@@ -53,7 +53,7 @@ <h2 id="ex_label">Example</h2>
         <dl id="accordionGroup" role="presentation" class="Accordion">
           <dt role="heading" aria-level="3">
             <button aria-expanded="true" class="Accordion-trigger"
-              aria-controls="sect1" id="accordion1id"
+              aria-controls="sect1" id="accordion1id" type="button"
             >
               <span class="Accordion-title">Personal Information</span><span class="Accordion-icon"></span>
             </button>
@@ -95,14 +95,14 @@ <h2 id="ex_label">Example</h2>
           </dd>
           <dt role="heading" aria-level="3">
             <button aria-expanded="false" class="Accordion-trigger"
-              aria-controls="sect2" id="accordion2id"
+              aria-controls="sect2" id="accordion2id" type="button"
             >
               <span class="Accordion-title">Billing Address</span><span class="Accordion-icon"></span>
             </button>
           </dt>
           <dd id="sect2" role="region" aria-labelledby="accordion2id" class="Accordion-panel" hidden>
             <div>
-              <fieldset class="billing flex">
+              <fieldset>
                 <p>
                   <label for="b-add1">Address 1:</label>
                   <input type="text" name="b-add1" id="b-add1" />
@@ -128,7 +128,7 @@ <h2 id="ex_label">Example</h2>
           </dd>
           <dt role="heading" aria-level="3">
             <button aria-expanded="false" class="Accordion-trigger"
-              aria-controls="sect3" id="accordion3id"
+              aria-controls="sect3" id="accordion3id" type="button"
             >
               <span class="Accordion-title">Shipping Address</span><span class="Accordion-icon"></span>
             </button>

examples/accordion/css/accordion.css

@@ -32,6 +32,7 @@
 }
 
 .Accordion-title {
+  display: block; /* For Edge bug https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8295099/ */
   pointer-events: none;
 }
 
@@ -61,6 +62,11 @@
     padding: 1em 1.5em;
 }
 
+/* For Edge bug https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/4806035/ */
+.Accordion-panel[hidden] {
+  display: none;
+}
+
 fieldset {
     border: 0;
     margin: 0;