Example Disclosure for FAQ: Replace description list with unordered list

content/patterns/disclosure/examples/css/disclosure-faq.css

@@ -1,4 +1,13 @@
-dl.faq button {
+ul.faq,
+ul.faq li {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  color: #000;
+  background-color: #fff;
+}
+
+ul.faq button {
   margin: 0;
   margin-top: 16px;
   padding: 4px 8px;
@@ -7,40 +16,34 @@ dl.faq button {
   border: none;
   background-color: transparent;
   border-radius: 5px;
+  color: #000;
 }
 
-dl dd {
-  margin: 0;
-  padding: 0;
-  margin-left: 1.5em;
-  padding-bottom: 20px;
-  border-bottom: 2px solid #777;
-}
-
-dl.faq .desc {
+ul.faq div.desc {
   margin: 0;
   margin-top: 0.25em;
-  padding: 0.25em;
+  margin-left: 1em;
+  padding: 0.5em;
   font-size: 110%;
   display: none;
   background-color: #fed;
 }
 
-dl.faq button:hover,
-dl.faq button:focus {
+ul.faq button:hover,
+ul.faq button:focus {
   padding: 2px 6px;
   background-color: #def;
   border: 2px solid #005a9c;
   cursor: pointer;
 }
 
-dl.faq button[aria-expanded="false"]::before {
+ul.faq button[aria-expanded="false"]::before {
   content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' style='forced-color-adjust: auto;'%3E%3Cpolygon points='1 1, 1 11, 8 6' fill='currentcolor' stroke= 'currentcolor' /%3E%3C/svg%3E%0A");
   position: relative;
   left: -2px;
 }
 
-dl.faq button[aria-expanded="true"]::before {
+ul.faq button[aria-expanded="true"]::before {
   content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' style='forced-color-adjust: auto;'%3E%3Cpolygon points='1 1, 11 1, 6 8' fill='currentcolor' stroke= 'currentcolor' /%3E%3C/svg%3E ");
   position: relative;
   left: -4px;

content/patterns/disclosure/examples/disclosure-faq.html

@@ -52,46 +52,38 @@ <h2 id="ex_label">Example</h2>
         <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
         <div id="ex1">
           <h3>Parking <abbr title="Frequently Asked Questions">FAQ</abbr>s</h3>
-          <dl class="faq">
-            <dt>
+          <ul class="faq">
+            <li>
               <button type="button" aria-expanded="false" aria-controls="faq1_desc">What do I do if I have a permit for an assigned lot, but can't find a space there?</button>
-            </dt>
-            <dd>
               <div id="faq1_desc" class="desc">
                 Park at the nearest available parking meter without paying the meter and call 999-999-9999 to report the problem.
                 We will note and approve your alternate location and will investigate the cause of the shortage in your assigned facility.
               </div>
-            </dd>
-            <dt>
+            </li>
+            <li>
               <button type="button" aria-expanded="false" aria-controls="faq2_desc">What do I do if I lose my permit or if my permit is stolen?</button>
-            </dt>
-            <dd>
               <div id="faq2_desc" class="desc">
                 You should come to the Parking office and report the loss.
                 There is a fee to replace your lost permit.
                 However, if your permit was stolen, a copy of a police report needs to be submitted along with a stolen parking permit form for a fee replacement exemption.
               </div>
-            </dd>
-            <dt>
+            </li>
+            <li>
               <button type="button" aria-expanded="false" aria-controls="faq3_desc">Is there free parking on holidays?</button>
-            </dt>
-            <dd>
               <div id="faq3_desc" class="desc">
                 All facilities are restricted from 2:00 am - 6:00 am on all days.
                 No exceptions are made for any holiday or recess except those officially listed as a <q>Holidays</q> in the calendar.
                 Please note: 24-hour rental spaces, 24-hour rental lots, and disabled parking is enforced at all times.
               </div>
-            </dd>
-            <dt>
+            </li>
+            <li>
               <button type="button" aria-expanded="false" aria-controls="faq4_desc">Do all parking facilities have the same enforcement rules?</button>
-            </dt>
-            <dd>
               <div id="faq4_desc" class="desc">
                 Some parking facility restrictions differ from others.
                 Be sure to take note of the signs at each lot entrance.
               </div>
-            </dd>
-          </dl>
+            </li>
+          </ul>
         </div>
         <div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
       </section>
@@ -100,10 +92,8 @@ <h3>Parking <abbr title="Frequently Asked Questions">FAQ</abbr>s</h3>
         <h2>Accessibility Features</h2>
         <ul>
           <li>
-            The semantic structure of the FAQ is conveyed with native <code>dl</code>, <code>dt</code> and <code>dd</code> elements.
-            To ensure the list structure is communicated to assistive technologies, instead of applying a button role to the <code>dt</code> element, a <code>button</code> element is contained within the <code>dt</code> element.
-            Similarly, each <code>div</code> element containing answer content that can be shown or hidden by the button is a child of a <code>dd</code> element.
-            Since all the <code>dd</code> elements are present in the DOM even if some answers are hidden, the <code>dl</code> structure is always complete.
+            The semantic structure of the FAQ list is conveyed with native <code>ul</code> and <code> li</code> elements.
+            To ensure the list structure is communicated to assistive technologies, a <code>button</code> element containing the question and a <code>div</code> element containing answer are children of an <code>li</code> element.  NOTE: The <code>button</code> actions are used to hide and show the <code>div</code> element with the answer.
           </li>
           <li>To help people with visual impairments identify the disclosure as interactive and make it easier to perceive that clicking either the disclosure button or its label changes the expanded state, when a pointer hovers over the button or its label, the background color changes, a border appears, and the cursor changes to a pointer.</li>
           <li>

content/patterns/disclosure/examples/js/disclosure-button.js

@@ -19,7 +19,7 @@ class DisclosureButton {
     this.buttonNode = buttonNode;
     this.controlledNode = false;
 
-    var id = this.buttonNode.getAttribute('aria-controls');
+    const id = this.buttonNode.getAttribute('aria-controls');
 
     if (id) {
       this.controlledNode = document.getElementById(id);
@@ -75,13 +75,13 @@ class DisclosureButton {
 window.addEventListener(
   'load',
   function () {
-    var buttons = document.querySelectorAll(
+    const buttons = document.querySelectorAll(
       'button[aria-expanded][aria-controls]'
     );
 
-    for (var i = 0; i < buttons.length; i++) {
-      new DisclosureButton(buttons[i]);
-    }
+    buttons.forEach((b) => {
+      new DisclosureButton(b);
+    });
   },
   false
 );

test/tests/disclosure_faq.js

@@ -8,16 +8,16 @@ const exampleFile = 'content/patterns/disclosure/examples/disclosure-faq.html';
 const ex = {
   buttonSelector: '#ex1 button',
   buttonSelectors: [
-    '#ex1 dt:nth-of-type(1) button',
-    '#ex1 dt:nth-of-type(2) button',
-    '#ex1 dt:nth-of-type(3) button',
-    '#ex1 dt:nth-of-type(4) button',
+    '#ex1 ul li:nth-child(1) button',
+    '#ex1 ul li:nth-child(2) button',
+    '#ex1 ul li:nth-child(3) button',
+    '#ex1 ul li:nth-child(4) button',
   ],
   answerSelectors: [
-    '#ex1 dd:nth-of-type(1)',
-    '#ex1 dd:nth-of-type(2)',
-    '#ex1 dd:nth-of-type(3)',
-    '#ex1 dd:nth-of-type(4)',
+    '#ex1 ul li:nth-child(1) .desc',
+    '#ex1 ul li:nth-child(2) .desc',
+    '#ex1 ul li:nth-child(3) .desc',
+    '#ex1 ul li:nth-child(4) .desc',
   ],
 };
 
@@ -127,7 +127,7 @@ ariaTest(
           buttonSelector
       );
 
-      t.true(
+      t.false(
         await t.context.session
           .findElement(By.css(answerSelector))
           .isDisplayed(),
@@ -172,7 +172,7 @@ ariaTest(
           buttonSelector
       );
 
-      t.true(
+      t.false(
         await t.context.session
           .findElement(By.css(answerSelector))
           .isDisplayed(),