Restructure accordion example to remove DL, DT and DD elements for issue 815

examples/accordion/accordion.html

@@ -48,20 +48,21 @@ <h2 id="ex_label">Example</h2>
           __________
 
           Ex:
-            <dl id="accordionGroup" role="presentation" class="Accordion" data-allow-multiple>
-
-            <dl id="accordionGroup" role="presentation" class="Accordion" data-allow-toggle>
+            <div id="accordionGroup" role="presentation" class="Accordion" data-allow-multiple>
 
+            <div id="accordionGroup" role="presentation" class="Accordion" data-allow-toggle>
         -->
-        <dl id="accordionGroup" role="presentation" class="Accordion">
-          <dt role="heading" aria-level="3">
+        <div id="accordionGroup" class="Accordion">
+          <h3>
             <button aria-expanded="true" class="Accordion-trigger"
-              aria-controls="sect1" id="accordion1id" type="button"
-            >
-              <span class="Accordion-title">Personal Information</span><span class="Accordion-icon"></span>
+              aria-controls="sect1" id="accordion1id">
+              <span class="Accordion-title">
+                Personal Information
+                <span class="Accordion-icon"></span>
+              </span>
             </button>
-          </dt>
-          <dd id="sect1" role="region" aria-labelledby="accordion1id" class="Accordion-panel">
+          </h3>
+          <div id="sect1" role="region" aria-labelledby="accordion1id" class="Accordion-panel">
             <div>
               <!-- Variable content within section, may include any type of markup or interactive widgets. -->
               <fieldset>
@@ -95,15 +96,17 @@ <h2 id="ex_label">Example</h2>
                 </p>
               </fieldset>
             </div>
-          </dd>
-          <dt role="heading" aria-level="3">
+          </div>
+          <h3>
             <button aria-expanded="false" class="Accordion-trigger"
-              aria-controls="sect2" id="accordion2id" type="button"
-            >
-              <span class="Accordion-title">Billing Address</span><span class="Accordion-icon"></span>
+              aria-controls="sect2" id="accordion2id">
+              <span class="Accordion-title">
+                Billing Address
+                <span class="Accordion-icon"></span>
+              </span>
             </button>
-          </dt>
-          <dd id="sect2" role="region" aria-labelledby="accordion2id" class="Accordion-panel" hidden>
+          </h3>
+          <div id="sect2" role="region" aria-labelledby="accordion2id" class="Accordion-panel" hidden>
             <div>
               <fieldset>
                 <p>
@@ -128,15 +131,17 @@ <h2 id="ex_label">Example</h2>
                 </p>
               </fieldset>
             </div>
-          </dd>
-          <dt role="heading" aria-level="3">
+          </div>
+          <h3>
             <button aria-expanded="false" class="Accordion-trigger"
-              aria-controls="sect3" id="accordion3id" type="button"
-            >
-              <span class="Accordion-title">Shipping Address</span><span class="Accordion-icon"></span>
+              aria-controls="sect3" id="accordion3id">
+              <span class="Accordion-title">
+                Shipping Address
+                <span class="Accordion-icon"></span>
+              </span>
             </button>
-          </dt>
-          <dd id="sect3" role="region" aria-labelledby="accordion3id" class="Accordion-panel" hidden>
+          </h3>
+          <div id="sect3" role="region" aria-labelledby="accordion3id" class="Accordion-panel" hidden>
             <div>
               <fieldset>
                 <p>
@@ -161,12 +166,28 @@ <h2 id="ex_label">Example</h2>
                 </p>
               </fieldset>
             </div>
-          </dd>
-        </dl>
+          </div>
+        </div>
       </div>
     </div>
     <div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
   </section>
+  <section>
+    <h2>Accessibility Features</h2>
+    <p>One issue for supporting keyboard only users is providing visual cues for informing the user of additional keyboard commands to enhance navigation. The example changes styling of the accordion container and the buttons associated with expanding/collapsing the accordion when any of the accordion buttons has keyboard focus.</p>
+
+    <p>When any of the accordion button receives focus:</p>
+    <ul>
+      <li>The border of the accordion changes color.</li>
+      <li>Background color of the accordion buttons change.</li>
+    </ul>
+
+    <p>The accordion button that receives focus:</p>
+    <ul>
+      <li>Border appears around the button text and icon.</li>
+      <li>Background color is different than the non-focus accordion buttons.</li>
+    </ul>
+  </section>
   <section>
     <h2 id="kbd_label">Keyboard Support</h2>
     <table aria-labelledby="kbd_label" class="def">
@@ -232,8 +253,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
   <section>
     <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
     <!--
-      Update this table to describe how roles, properties, states, and tabindex are used in this example.
-    -->
+      Update this table to describe how roles, properties, states, and tabindex are used in this example -->
     <table aria-labelledby="rps_label" class="data attributes">
       <thead>
         <tr>
@@ -244,31 +264,15 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
         </tr>
       </thead>
       <tbody>
-        <tr data-test-id="presentation-role">
-          <th scope="row"><code>presentation</code></th>
-          <td></td>
-          <td><code>dl</code></td>
-          <td>
-            <ul>
-              <li>Indicates that the <code>dl</code> element is being used to control presentation and does not represent a definition list.</li>
-              <li>This implementation uses an HTML definition list where each term is recast as a header and each definition is recast as a region that contains panel content.</li>
-            </ul>
-          </td>
-        </tr>
-        <tr data-test-id="heading-role">
-          <th scope="row"><code>heading</code></th>
+        <tr data-test-id="h3-element">
           <td></td>
-          <td><code>dt</code></td>
-          <td>Identifies the element as a heading that serves as an accordion header.</td>
-        </tr>
-        <tr data-test-id="heading-aria-level">
           <td></td>
-          <th scope="row"><code>aria-level=<q>3</q></code></th>
-          <td><code>dt</code></td>
+          <th scope="row"><code>h3</code></th>
           <td>
             <ul>
-              <li>Specifies heading level for the accordion header.</li>
-              <li>Level 3 is chosen because the accordion is contained in a section with a level 2 heading.</li>
+              <li>Element that serves as an accordion header.</li>
+              <li>Each accordion header element contains a button that controls the visibility of its content panel.</li>
+              <li>The example uses heading level 3 so it fits correctly within the outline of the page; the example is contained in a section titled with a level 2 heading.</li> 
             </ul>
           </td>
         </tr>
@@ -297,20 +301,28 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
           </td>
         </tr>
         <tr data-test-id="region-role">
+<<<<<<< HEAD
+          <th scope="row"><code>region</code></th>
+=======
           <th scope="row">region</th>
+>>>>>>> issue815-accordion-restructure
           <td></td>
-          <td><code>dd</code></td>
-          <td>Creates a landmark region that contains the currently expanded accordion panel.</td>
+          <td><code>div</code></td>
+          <td>
+            <ul>
+              <li>Creates a landmark region that contains the currently expanded accordion panel.</li>
+              <li>The accessible name for the region is defined by <code>aria-labelledby</code> attribute.</li>
+              <li><code>region</code> roles are required to have an accessible name to be identified as a landmark.</li>
+          </td>
         </tr>
         <tr data-test-id="region-aria-labelledby">
           <td></td>
           <th scope="row"><code>aria-labelledby=&quot;ID_REF&quot;</code></th>
-          <td><code>dd</code></td>
+          <td><code>div</code></td>
           <td>
             <ul>
-              <li>Points to the accordion header.</li>
-              <li>Labels the landmark region with the accordion header.</li>
-            </ul>
+              <li>Defines the accessible name for the <code>region</code> landmark.</li>
+              <li>The IDREF references the associated accordion button that expands and collapses the accordion panel.</li>
           </td>
         </tr>
       </tbody>

examples/accordion/css/accordion.css

@@ -1,16 +1,26 @@
 .Accordion {
-    border: 1px solid hsl(0, 0%, 82%);
-    border-radius: .3em;
-    box-shadow: 0 1px 2px hsl(0, 0%, 82%);
+    margin: 0;
+    padding: 0;
+    border: 2px solid hsl(0, 0%, 82%);
+    border-radius: 7px;
+    width: 20em;
+}
+
+.Accordion.focus {
+    border-color: hsl(216, 94%, 73%);
 }
 
+.Accordion.focus h3 {
+    background-color: hsl(0, 0%, 97%);
+}
+
+
 .Accordion > * + * {
     border-top: 1px solid hsl(0, 0%, 82%);
 }
 
 .Accordion-trigger {
     background: none;
-    border: 0;
     color: hsl(0, 0%, 13%);
     display: block;
     font-size: 1rem;
@@ -20,20 +30,38 @@
     position: relative;
     text-align: left;
     width: 100%;
+    outline: none;
+}
+
+.Accordion h3 {
+    margin: 0;
+    padding: 0;
 }
 
-.Accordion dt:first-child .Accordion-trigger {
-    border-radius: .3em .3em 0 0;
+.Accordion *:first-child .Accordion-trigger {
+    border-radius: 5px 5px 0 0;
 }
 
 .Accordion-trigger:focus,
 .Accordion-trigger:hover {
-    background: hsl(0, 0%, 93%);
+    background: hsl(216, 94%, 94%);
+}
+
+.Accordion button::-moz-focus-inner {
+    border: 0;
 }
 
 .Accordion-title {
-  display: block; /* For Edge bug https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8295099/ */
+  display: block;
   pointer-events: none;
+  border: transparent 2px solid;
+  border-radius: 5px;
+  padding: 0.25em;
+  outline: none;
+}
+
+.Accordion-trigger:focus .Accordion-title {
+    border-color: hsl(216, 94%, 73%);
 }
 
 .Accordion-icon {
@@ -42,15 +70,15 @@
     height: .5rem;
     pointer-events: none;
     position: absolute;
-    right: 1.5em;
+    right: 2em;
     top: 50%;
     transform: translateY(-60%) rotate(45deg);
     width: .5rem;
 }
 
 .Accordion-trigger:focus .Accordion-icon,
 .Accordion-trigger:hover .Accordion-icon {
-    border-color: hsl(0, 0%, 13%);
+    border-color: hsl(216, 94%, 73%);
 }
 
 .Accordion-trigger[aria-expanded="true"] .Accordion-icon {
@@ -67,6 +95,10 @@
   display: none;
 }
 
+button {
+    border-style: none;
+}
+
 fieldset {
     border: 0;
     margin: 0;

examples/accordion/js/accordion.js

@@ -18,6 +18,7 @@ Array.prototype.slice.call(document.querySelectorAll('.Accordion')).forEach(func
   var triggers = Array.prototype.slice.call(accordion.querySelectorAll('.Accordion-trigger'));
   var panels = Array.prototype.slice.call(accordion.querySelectorAll('.Accordion-panel'));
 
+
   accordion.addEventListener('click', function (event) {
     var target = event.target;
 
@@ -65,6 +66,10 @@ Array.prototype.slice.call(document.querySelectorAll('.Accordion')).forEach(func
   accordion.addEventListener('keydown', function (event) {
     var target = event.target;
     var key = event.which.toString();
+
+    var isExpanded = target.getAttribute('aria-expanded') == 'true';
+    var allowToggle = (allowMultiple) ? allowMultiple : accordion.hasAttribute('data-allow-toggle');
+
     // 33 = Page Up, 34 = Page Down
     var ctrlModifier = (event.ctrlKey && key.match(/33|34/));
 
@@ -94,21 +99,24 @@ Array.prototype.slice.call(document.querySelectorAll('.Accordion')).forEach(func
             triggers[triggers.length - 1].focus();
             break;
         }
-
         event.preventDefault();
+
       }
+
     }
-    else if (ctrlModifier) {
-      // Control + Page Up/ Page Down keyboard operations
-      // Catches events that happen inside of panels
-      panels.forEach(function (panel, index) {
-        if (panel.contains(target)) {
-          triggers[index].focus();
-
-          event.preventDefault();
-        }
-      });
-    }
+  });
+
+  // These are used to style the accordion when one of the buttons has focus
+  accordion.querySelectorAll('.Accordion-trigger').forEach(function (trigger) {
+
+    trigger.addEventListener('focus', function (event) {
+      accordion.classList.add('focus');
+    });
+
+    trigger.addEventListener('blur', function (event) {
+      accordion.classList.remove('focus');
+    });
+
   });
 
   // Minor setup: will set disabled state, via aria-disabled, to an