w3c · mcking65 · Jan 31, 2017 · Jan 13, 2017 · Jan 15, 2017 · Jan 16, 2017
diff --git a/aria-practices.html b/aria-practices.html
@@ -529,6 +529,14 @@ <h4>Example</h4>
       <h3>Dialog (Non-Modal)</h3>
       <p>Drafting content for this section is tracked by <a href="https://github.com/w3c/aria-practices/issues/59">issue 59</a>. </p>
     </section>
+
+    <section class="widget" id="disclosure">
+      <h3>Disclosure (Show/Hide)</h3>
+      <p>
+        Drafting content for this section is tracked by 
+        <a href="https://github.com/w3c/aria-practices/issues/9">issue 9</a>. 
+      </p>
+    </section>
 
     <section class="widget" id="grid">
       <h3>Grids : Interactive Tabular Data and Layout Containers</h3>

diff --git a/examples/button/button.html b/examples/button/button.html
@@ -8,114 +8,46 @@
 <link href="../css/table.css" rel="stylesheet">
 <link href="css/button.css" rel="stylesheet">
 <script src="js/button.js" type="text/javascript"></script>
+<style type="text/css">
+  #example h3 {
+    padding: 0;
+    margin: 0;
+    margin-top: 1em;
+    margin-bottom: 0.25em;
+  }
+  #example p {
+    padding: 0;
+    margin: 0;
+    margin-bottom: 0.5em;
+  }
+</style>
 </head>
 <body>
   <main>
     <h1>Button Examples</h1>
-    <p>
-    This example page requires updates per
-    <a href="https://github.com/w3c/aria-practices/issues/189">issue 189.</a>
-    Please provide any additional feedback in this issue.
-  </p>
   <p>
     The following examples of the
     <a href="../../#h-button">button design pattern</a>
     demonstrate both command and toggle buttons.
   </p>
+
+
   <section>
-    <h2>Examples</h2>
     <div id="example">
-      <table>
-        <thead>
-          <tr>
-            <th>Type</th>
-            <th>Element</th>
-            <th style="width: 8em;">Button</th>
-            <th>Accessibility Feature</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <th>Push button</th>
-            <td>
-              <code>div</code>
-            </td>
-            <td>
-              <div tabindex="0" role="button" id="print">Print Page</div>
-            </td>
-            <td>
-              <ul>
-                <li>
-                  <code>div</code> element with <code>role="button"</code>.
-                </li>
-                <li>
-                  <code>div</code> element has <code>onclick</code> event to handle mouse clicks.
-                </li>
-                <li>
-                  <code>div</code> element has <code>onkeydown</code> event to handle keyboard
-                  support.
-                </li>
-                <li>
-                  <code>div</code> element has <code>tabindex="0"</code> to become part of tab order
-                  of the page.
-                </li>
-              </ul>
-            </td>
-          </tr>
-          <tr>
-            <th>Toggle button</th>
-            <td>
-              <code>span</code>
-            </td>
-            <td>
-              <span tabindex="0" role="button" id="toggle" aria-pressed="false">Mute</span>
-            </td>
-            <td>
-              <ul>
-                <li>
-                  <code>span</code> element with <code>role="button"</code>.
-                </li>
-                <li>
-                  <code>span</code> element has <code>onclick</code> event to handle mouse clicks.
-                </li>
-                <li>
-                  <code>span</code> element has <code>onkeydown</code> event to handle keyboard
-                  support.
-                </li>
-                <li>
-                  Toggle status using the <code>aria-pressed</code> attribute.
-                </li>
-              </ul>
-            </td>
-          </tr>
-          <tr>
-            <th>Push button</th>
-            <td>
-              <code>a</code>
-            </td>
-            <td>
-              <a tabindex="0" role="button" id="alert1">Show alert</a>
-            </td>
-            <td>
-              <ul>
-                <li>
-                  <code>a</code> element has <code>onclick</code> event to handle mouse clicks.
-                </li>
-                <li>
-                  <code>a</code> element has <code>onkeydown</code> event to handle keyboard support.
-                </li>
-                <li>
-                  <code>a</code> element has <code>tabindex="0"</code> to become part of tab order of
-                  the page.
-                </li>
-              </ul>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
 
-  </section>
+      <h3>Action Button</h3>
+      <p>Print button uses a <code>div</code> element.</p>
+      <div tabindex="0" role="button" id="action">Print Page</div>
+
+      <h3>Toggle Button</h3>
+      <p>Mute button uses a <code>a</code> element.</p>
+      <div>
+        <a tabindex="0" role="button" id="toggle" aria-pressed="false">Mute</a>
+      </div>
+
+    </div>  
+  </section>  
+
 
   <section>
     <h2 id="kbd_label">Keyboard Support</h2>
@@ -130,7 +62,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
       <tbody>
         <tr>
           <th><kbd>Space or enter</kbd></th>
-          <td>Activate or toggle button</td>
+          <td>Activate or toggle state of button</td>
         </tr>
       </tbody>
     </table>
@@ -153,7 +85,7 @@ <h2 id="rps_label">ARIA Roles, Properties and States</h2>
           <th scope="row"><code>button</code></th>
           <td></td>
           <td>
-            <code>div</code>, <code>span</code>, <code>a</code>
+            <code>div</code>, <code>a</code>
           </td>
           <td>
             <ul>
@@ -171,7 +103,7 @@ <h2 id="rps_label">ARIA Roles, Properties and States</h2>
             <code>tabindex=&quot;0&quot;</code>
           </th>
           <td>
-            <code>div</code>, <code>span</code>, <code>a</code>
+            <code>div</code>, <code>a</code>
           </td>
           <td>
             <ul>
@@ -185,20 +117,20 @@ <h2 id="rps_label">ARIA Roles, Properties and States</h2>
         <tr>
           <td></td>
           <th scope="row"><code>aria-pressed=&quot;false&quot;</code></th>
-          <td><code>span</code></td>
+          <td><code>a</code></td>
           <td>
             <ul>
-              <li>Identify <code>span</code> element with the toggle button behavior as toggled off</li>
+              <li>Identify <code>a</code> element with the toggle button behavior as toggled off</li>
             </ul>
           </td>
         </tr>
         <tr>
           <td></td>
           <th scope="row"><code>aria-pressed=&quot;true&quot;</code></th>
-          <td><code>span</code></td>
+          <td><code>a</code></td>
           <td>
             <ul>
-              <li>Identify <code>span</code> element with the toggle button behavior as toggled on</li>
+              <li>Identify <code>a</code> element with the toggle button behavior as toggled on</li>
             </ul>
           </td>
         </tr>
@@ -227,28 +159,21 @@ <h2>Javascript and CSS Source Code</h2>
  <section>
     <h2>HTML Source Code</h2>
 
-    <h3 id="sc1_label">First Example: Push button</h3>
+    <h3 id="sc1_label">Action Button</h3>
     <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
-    <div id="print-sc1"></div>
+    <div id="source1"></div>
     <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
 
-
-    <h3 id="sc2_label">Second Example: Toggle button</h3>
+    <h3 id="sc2_label">Toggle Button</h3>
     <div role="separator" id="sc2_start_sep" aria-labelledby="sc2_start_sep sc2_label" aria-label="Start of"></div>
-    <div id="mute-sc1"></div>
+    <div id="source2"></div>
     <div role="separator" id="sc2_end_sep" aria-labelledby="sc2_end_sep sc2_label" aria-label="End of"></div>
 
 
-    <h3 id="sc3_label">Third Example: Push button</h3>
-    <div role="separator" id="sc3_start_sep" aria-labelledby="sc3_start_sep sc3_label" aria-label="Start of"></div>
-    <div id="alert-sc"></div>
-    <div role="separator" id="sc3_end_sep" aria-labelledby="sc3_end_sep sc3_label" aria-label="End of"></div>
-
 
     <script>
-          sourceCode.add('print-sc1', 'print')
-          sourceCode.add('mute-sc1', 'toggle')
-          sourceCode.add('alert-sc', 'alert1')
+      sourceCode.add('source1', 'action')
+      sourceCode.add('source2', 'toggle')
       sourceCode.make();
     </script>
   </section>

diff --git a/examples/button/js/button.js b/examples/button/js/button.js
@@ -11,27 +11,19 @@
 
 function init () {
   // Create variables for the various buttons
-  var printButton = document.getElementById('print');
+  var actionButton = document.getElementById('action');
   var toggleButton = document.getElementById('toggle');
-  var alert1Button = document.getElementById('alert1');
-  var alert2Button = document.getElementById('alert2');
 
   // Add event listeners to the various buttons
-  printButton.addEventListener('click', printButtonEventHandler);
-  printButton.addEventListener('keydown', printButtonEventHandler);
+  actionButton.addEventListener('click', actionButtonEventHandler);
+  actionButton.addEventListener('keydown', actionButtonEventHandler);
 
   toggleButton.addEventListener('click', toggleButtonEventHandler);
   toggleButton.addEventListener('keydown', toggleButtonEventHandler);
 
-  alert1Button.addEventListener('click', alertButtonEventHandler);
-  alert1Button.addEventListener('keydown', alertButtonEventHandler);
-
-  alert2Button.addEventListener('click', alertButtonEventHandler);
-  alert2Button.addEventListener('keydown', alertButtonEventHandler);
-
 }
 
-function printButtonEventHandler (event) {
+function actionButtonEventHandler (event) {
   var type = event.type;
 
   // Grab the keydown and click events
@@ -48,24 +40,6 @@ function printButtonEventHandler (event) {
   }
 }
 
-function alertButtonEventHandler (event) {
-  var type = event.type;
-  var message = 'Hej, hello, ciao, こんにちは';
-
-  // Grab the keydown and click events
-  if (type === 'keydown') {
-    // If either enter or space is pressed, execute the funtion
-    if (event.keyCode === 13 || event.keyCode === 32) {
-      alert(message);
-
-      event.preventDefault();
-    }
-  }
-  else if (type === 'click') {
-    alert(message);
-  }
-}
-
 function toggleButtonEventHandler (event) {
   var type = event.type;
 

diff --git a/examples/disclosure/css/disclosure-faq.css b/examples/disclosure/css/disclosure-faq.css
@@ -0,0 +1,38 @@
+[role="button"]:hover,
+[role="button"]:focus {
+  background-color: #eee;
+  text-decoration: underline;
+}
+
+[role="button"]:active {
+  background-color: #bbb;
+}
+
+[role="button"][aria-expanded="false"]:before {
+  content: "\0025BA \0000A0";
+  color: #630;
+
+}
+
+[role="button"][aria-expanded="true"]:before {
+  content: "\0025BC \0000A0";
+  color: #630;
+}
+
+dl.faq dt {
+    margin: 0;
+    padding: 0;
+    margin-top: 0.5em;
+    font-weight: bold;
+    font-size: 110%;
+}
+
+
+dl.faq dd {
+    margin: 0;
+    padding: 0;
+    margin-top: 0.25em;
+    margin-left: 1.5em;
+    font-size: 110%;
+    display: none;
+}
diff --git a/examples/disclosure/css/disclosure-img-long-description.css b/examples/disclosure/css/disclosure-img-long-description.css
@@ -0,0 +1,19 @@
+[role="button"]:hover,
+[role="button"]:focus {
+  background-color: #eee;
+  text-decoration: underline;
+}
+
+[role="button"]:active {
+  background-color: #bbb;
+}
+
+[role="button"][aria-expanded="false"]:before {
+  content: "\0025BA";
+  color: #630;
+}
+
+[role="button"][aria-expanded="true"]:before {
+  content: "\0025BC";
+  color: #630;
+}