Six Example pages: Add "Open in codepen" button to (pull #1683)

Adds Open in CodePen button to the following example pages: * accordion/accordion.html * grid/LayoutGrids.html * menu-button/menu-button-links.html * grid/dataGrids.html * listbox/listbox-rearrangeable.html * listbox/listbox-collapsible.html
w3c · Jan 17, 2021 · aea1acc · aea1acc
1 parent 4dcb7df
commit aea1acc
Show file tree

Hide file tree

Showing 9 changed files with 224 additions and 182 deletions.
diff --git a/examples/accordion/accordion.html b/examples/accordion/accordion.html
@@ -34,7 +34,9 @@ <h1>Accordion Example</h1>
     be expanded at a time.
   </p>
   <section>
-    <h2 id="ex_label">Example</h2>
+    <div class="example-header">
+      <h2 id="ex_label">Example</h2>
+    </div>
     <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
     <div id="coding-arena">
       <div class="demo-block">
@@ -325,7 +327,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
 
   <section>
     <h2>Javascript and CSS Source Code</h2>
-    <ul>
+    <ul id="css_js_files">
       <li>CSS: <a href="css/accordion.css" type="tex/css">accordion.css</a></li>
       <li>JavaScript: <a href="js/accordion.js" type="text/javascript">accordion.js</a></li>
     </ul>
@@ -337,7 +339,7 @@ <h2 id="sc1_label">HTML Source Code</h2>
     <pre><code id="sc1"></code></pre>
     <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
     <script>
-      sourceCode.add('sc1', 'coding-arena');
+      sourceCode.add('sc1', 'coding-arena', 'ex_label', 'css_js_files');
       sourceCode.make();
     </script>
   </section>

diff --git a/examples/grid/LayoutGrids.html b/examples/grid/LayoutGrids.html
@@ -54,12 +54,14 @@ <h1>Layout Grid Examples</h1>
   <section>
     <h2>Examples</h2>
     <section>
-      <h3 id="ex1_label">Example 1: Simple List of Links</h3>
+      <div class="example-header">
+        <h3 id="ex1_label">Example 1: Simple List of Links</h3>
+      </div>
       <p>This example presents a list of links titled &quot;Related Documents&quot; in a grid. </p>
       <div role="separator" id="ex1_start_sep" aria-labelledby="ex1_start_sep ex1_label" aria-label="Start of"></div>
       <div id="ex1">
         <h4 id="grid1_label">Related Documents</h4>
-        <div role="grid" class="list-links" aria-labelledby="grid1_label" data-wrap-cols="true" data-wrap-rows="true" data-restructure="true">
+        <div id="ex1-grid" role="grid" class="list-links" aria-labelledby="grid1_label" data-wrap-cols="true" data-wrap-rows="true" data-restructure="true">
           <div role="row">
             <span role="gridcell" class="list-link"><a tabindex="-1" href="http://www.w3.org/TR/wai-aria-1.1/">ARIA 1.1 Specification</a></span>
             <span role="gridcell" class="list-link"><a tabindex="-1" href="https://www.w3.org/TR/core-aam-1.1/">Core Accessibility API Mappings 1.1</a></span>
@@ -129,7 +131,9 @@ <h4>Notes</h4>
       </ol>
     </section>
     <section>
-      <h3 id="ex2_label">Example 2: Pill List For a List of Message Recipients</h3>
+      <div class="example-header">
+        <h3 id="ex2_label">Example 2: Pill List For a List of Message Recipients</h3>
+      </div>
       <p>
         Add recipients by typing a string in the &quot;New Recipient Name&quot; field and pressing <kbd>Enter</kbd> or activating the &quot;Add&quot; button.
         See how this grid behaves as the number of elements increases.
@@ -144,7 +148,7 @@ <h3 id="ex2_label">Example 2: Pill List For a List of Message Recipients</h3>
          -->
         <div class="recipient-list">
           <span id="send_to_label">Send To:</span>
-          <div role="grid" class="pill-list" aria-labelledby="send_to_label"  data-wrap-cols="true">
+          <div id="ex2-grid" role="grid" class="pill-list" aria-labelledby="send_to_label"  data-wrap-cols="true">
             <div role="row" class="pill-item" data-id="1">
               <span role="gridcell"><a id="r1" class="pill-name" tabindex="-1" href="#">Recipient Name 1</a></span>
               <span role="gridcell"><span id="rb1" class="pill-remove" tabindex="-1" role="button" aria-label="Remove" aria-labelledby="rb1 r1"> X </span></span>
@@ -184,7 +188,9 @@ <h4>Notes</h4>
         </ol>
     </section>
     <section>
-      <h3 id="ex3_label">Example 3: Scrollable Search Results</h3>
+      <div class="example-header">
+        <h3 id="ex3_label">Example 3: Scrollable Search Results</h3>
+      </div>
       <p>
         This example demonstrates how a grid can make moving through an infinitely large data set as easy and efficient for keyboard users as it is for mouse users.
         It presents a hypothetical set of search results for W3C resources about WAI-ARIA.
@@ -196,7 +202,7 @@ <h4 id="ex3_search_results_label">Search Results for "W3C WAI-ARIA"</h4>
           Showing results <span id="ex3_start_index">1</span> to <span id="ex3_end_index">5</span> of 19
         </div>
 
-        <div role="grid" aria-labelledby="ex3_search_results_label" aria-rowcount="19" data-per-page="5" data-wrap-cols="true">
+        <div id="ex3-grid" role="grid" aria-labelledby="ex3_search_results_label" aria-rowcount="19" data-per-page="5" data-wrap-cols="true">
           <div role="row">
             <div role="gridcell"><h5 class="ex3_result_header">
                 <a tabindex="-1" href="https://www.w3.org/WAI/intro/aria">WAI-ARIA Overview
@@ -691,7 +697,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
 
   <section>
     <h2>Javascript and CSS Source Code</h2>
-    <ul>
+    <ul id="css_js_files">
       <li>CSS:
         <ul>
           <li><a href="css/layoutGrids.css" type="tex/css">layoutGrids.css</a></li>
@@ -713,19 +719,19 @@ <h3 id="sc1_label">Example 1: Simple List of Links</h3>
     <div id="sc1_start_sep" role="separator" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of HTML for"></div>
     <pre><code id="sc1"></code></pre>
     <div id="sc1_end_sep" role="separator" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of HTML for"></div>
-    <script>sourceCode.add('sc1', 'ex1')</script>
+    <script>sourceCode.add('sc1', 'ex1', 'ex1_label', 'css_js_files')</script>
 
     <h3 id="sc2_label">Example 2: Pill List For Components Like a List of Message Recipients</h3>
     <div id="sc2_start_sep" role="separator" aria-labelledby="sc2_start_sep sc2_label" aria-label="Start of HTML for"></div>
     <pre><code id="sc2"></code></pre>
     <div id="sc2_end_sep" role="separator" aria-labelledby="sc2_end_sep sc2_label" aria-label="End of HTML for"></div>
-    <script>sourceCode.add('sc2', 'ex2')</script>
+    <script>sourceCode.add('sc2', 'ex2', 'ex2_label', 'css_js_files')</script>
 
     <h3 id="sc3_label">Example 3: Scrollable Search Results</h3>
     <div id="sc3_start_sep" role="separator" aria-labelledby="sc3_start_sep sc3_label" aria-label="Start of HTML for"></div>
     <pre><code id="sc3"></code></pre>
     <div id="sc3_end_sep" role="separator" aria-labelledby="sc3_end_sep sc3_label" aria-label="End of HTML for"></div>
-    <script>sourceCode.add('sc3', 'ex3') </script>
+    <script>sourceCode.add('sc3', 'ex3', 'ex3_label', 'css_js_files') </script>
     <!--  After all source has been added, run make to do the insert.  -->
     <script> sourceCode.make() </script>
   </section>

diff --git a/examples/grid/dataGrids.html b/examples/grid/dataGrids.html
@@ -47,11 +47,13 @@ <h1>Data Grid Examples</h1>
   <section>
     <h2>Examples</h2>
     <section>
-      <h3 id="ex1_label">Example 1: Minimal Data Grid</h3>
+      <div class="example-header">
+        <h3 id="ex1_label">Example 1: Minimal Data Grid</h3>
+      </div>
       <div role="separator" id="ex1_start_sep" aria-labelledby="ex1_start_sep ex1_label" aria-label="Start of"></div>
       <div id="ex1">
         <h4 id="grid1Label">Transactions January 1 through January 6</h4>
-        <table role="grid" aria-labelledby="grid1Label" class="data">
+        <table id="ex1-grid" role="grid" aria-labelledby="grid1Label" class="data">
           <tr>
             <th>Date</th>
             <th>Type</th>
@@ -135,11 +137,13 @@ <h4>Notes</h4>
       </ol>
     </section>
     <section>
-      <h3 id="ex2_label">Example 2: Sortable Data Grid With Editable Cells</h3>
+      <div class="example-header">
+        <h3 id="ex2_label">Example 2: Sortable Data Grid With Editable Cells</h3>
+      </div>
       <div role="separator" id="ex2_start_sep" aria-labelledby="ex2_start_sep ex2_label" aria-label="Start of"></div>
       <div id="ex2">
         <h4 id="grid2Label">Transactions January 1 through January 7</h4>
-        <table role="grid" aria-labelledby="grid2Label" class="data">
+        <table id="ex2-grid" role="grid" aria-labelledby="grid2Label" class="data">
           <tr>
             <th aria-sort="ascending">
               <span tabindex="-1" role="button">Date</span>
@@ -333,13 +337,15 @@ <h4>Notes</h4>
       </ol>
     </section>
     <section>
-      <h3 id="ex3_label">Example 3: Scrollable Data Grid With Column Hiding</h3>
+      <div class="example-header">
+        <h3 id="ex3_label">Example 3: Scrollable Data Grid With Column Hiding</h3>
+      </div>
       <div role="separator" id="ex3_start_sep" aria-labelledby="ex3_start_sep ex3_label" aria-label="Start of"></div>
       <div id="ex3">
         <h4 id="grid3Label">Transactions for January 1 through January 15</h4>
         <button type="button" id="toggle_column_btn" name="toggle_columns">Hide Type and
           Category</button>
-        <table role="grid" aria-labelledby="grid3Label" aria-rowcount="16" aria-colcount="6"
+        <table  id="ex3-grid" role="grid" aria-labelledby="grid3Label" aria-rowcount="16" aria-colcount="6"
           data-per-page="5" class="data">
           <tr data-fixed="true">
             <th>Date</th>
@@ -789,7 +795,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
 
   <section>
     <h2>Javascript and CSS Source Code</h2>
-    <ul>
+    <ul id="css_js_files">
       <li>CSS:
         <ul>
           <li><a href="css/dataGrids.css" type="tex/css">dataGrids.css</a></li>
@@ -813,19 +819,19 @@ <h3 id="sc1_label">Example 1: Minimal Data Grid</h3>
     <div id="sc1_start_sep" role="separator" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of HTML for"></div>
     <pre><code id="sc1"></code></pre>
     <div id="sc1_end_sep" role="separator" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of HTML for"></div>
-    <script>sourceCode.add('sc1', 'ex1')</script>
+    <script>sourceCode.add('sc1', 'ex1', 'ex1_label', 'css_js_files')</script>
 
     <h3 id="sc2_label">Example 2: Sortable Data Grid With Editable Cells</h3>
     <div id="sc2_start_sep" role="separator" aria-labelledby="sc2_start_sep sc2_label" aria-label="Start of HTML for"></div>
     <pre><code id="sc2"></code></pre>
     <div id="sc2_end_sep" role="separator" aria-labelledby="sc2_end_sep sc2_label" aria-label="End of HTML for"></div>
-    <script>sourceCode.add('sc2', 'ex2')</script>
+    <script>sourceCode.add('sc2', 'ex2', 'ex2_label', 'css_js_files')</script>
 
     <h3 id="sc3_label">Example 3: Scrollable Data Grid With Column Hiding</h3>
     <div id="sc3_start_sep" role="separator" aria-labelledby="sc3_start_sep sc3_label" aria-label="Start of HTML for"></div>
     <pre><code id="sc3"></code></pre>
     <div id="sc3_end_sep" role="separator" aria-labelledby="sc3_end_sep sc3_label" aria-label="End of HTML for"></div>
-    <script>sourceCode.add('sc3', 'ex3') </script>
+    <script>sourceCode.add('sc3', 'ex3', 'ex3_label', 'css_js_files') </script>
     <!--  After all source has been added, run make to do the insert.  -->
     <script> sourceCode.make(); </script>
   </section>

diff --git a/examples/grid/js/dataGrids.js b/examples/grid/js/dataGrids.js
@@ -14,27 +14,36 @@
  */
 
 window.addEventListener('load', function () {
-  var ex1 = document.getElementById('ex1');
-  new aria.Grid(ex1.querySelector('[role="grid"]'));
-
-  var ex2 = document.getElementById('ex2');
-  new aria.Grid(ex2.querySelector('[role="grid"]'));
-
-  var ex3 = document.getElementById('ex3');
-  var ex3Grid = new aria.Grid(ex3.querySelector('[role="grid"]'));
-  var toggleButton = document.getElementById('toggle_column_btn');
-  var toggledOn = true;
-
-  toggleButton.addEventListener('click', function () {
-    toggledOn = !toggledOn;
-
-    ex3Grid.toggleColumn(2, toggledOn);
-    ex3Grid.toggleColumn(4, toggledOn);
-
-    if (toggledOn) {
-      toggleButton.innerText = 'Hide Type and Category';
-    } else {
-      toggleButton.innerText = 'Show Type and Category';
-    }
-  });
+  // Initialize Example 1 Grid (if it is present in the DOM)
+  var ex1GridElement = document.getElementById('ex1-grid');
+  if (ex1GridElement) {
+    new aria.Grid(ex1GridElement);
+  }
+
+  // Initialize Example 2 Grid (if it is present in the DOM)
+  var ex2GridElement = document.getElementById('ex2-grid');
+  if (ex2GridElement) {
+    new aria.Grid(ex2GridElement);
+  }
+
+  // Initialize Example 3 Grid (if it is present in the DOM)
+  var ex3GridElement = document.getElementById('ex3-grid');
+  if (ex3GridElement) {
+    var ex3Grid = new aria.Grid(ex3GridElement);
+    var toggleButton = document.getElementById('toggle_column_btn');
+    var toggledOn = true;
+
+    toggleButton.addEventListener('click', function () {
+      toggledOn = !toggledOn;
+
+      ex3Grid.toggleColumn(2, toggledOn);
+      ex3Grid.toggleColumn(4, toggledOn);
+
+      if (toggledOn) {
+        toggleButton.innerText = 'Hide Type and Category';
+      } else {
+        toggleButton.innerText = 'Show Type and Category';
+      }
+    });
+  }
 });
diff --git a/examples/grid/js/layoutGrids.js b/examples/grid/js/layoutGrids.js
@@ -15,64 +15,67 @@ var aria = aria || {};
 
 window.addEventListener('load', function () {
   // Setup Example 1
-  var ex1 = document.getElementById('ex1');
-  new aria.Grid(ex1.querySelector('[role="grid"]'));
+  if (document.getElementById('ex1-grid')) {
+    new aria.Grid(document.getElementById('ex1-grid'));
+
+    // Setup NUX; activates when the first grid cell is focused
+    var gridNUX = document.getElementById('grid-nux');
+    var firstGridCell = document.querySelector('#ex1-grid [tabindex="0"]');
+    var NUXCloseButton = document.getElementById('close-nux-button');
+    var closeNUX = function () {
+      aria.Utils.addClass(gridNUX, 'hidden');
+      firstGridCell.focus();
+    };
+    var setupInstructions = function () {
+      firstGridCell.removeEventListener('focus', setupInstructions);
+      aria.Utils.removeClass(gridNUX, 'hidden');
+
+      NUXCloseButton.addEventListener('click', closeNUX);
+      NUXCloseButton.addEventListener('keyup', function (event) {
+        if (event.which === aria.KeyCode.RETURN) {
+          closeNUX();
+        }
+      });
+    };
+    firstGridCell.addEventListener('focus', setupInstructions);
+  }
 
   // Setup Example 2
-  var ex2 = document.getElementById('ex2');
-  var ex2Grid = new aria.Grid(ex2.querySelector('[role="grid"]'));
-
-  new PillList(
-    ex2Grid,
-    document.getElementById('add-recipient-input'),
-    document.getElementById('add-recipient-button'),
-    document.getElementById('form-action-text')
-  );
+  if (document.getElementById('ex2-grid')) {
+    var ex2Grid = new aria.Grid(document.getElementById('ex2-grid'));
+
+    new PillList(
+      ex2Grid,
+      document.getElementById('add-recipient-input'),
+      document.getElementById('add-recipient-button'),
+      document.getElementById('form-action-text')
+    );
+  }
 
   // Setup Example 3
-  var ex3 = document.getElementById('ex3');
-  var ex3Grid = new aria.Grid(ex3.querySelector('[role="grid"]'));
-  var startIndexText = document.getElementById('ex3_start_index');
-  var endIndexText = document.getElementById('ex3_end_index');
-  var previousButton = document.getElementById('ex3_pageup_button');
-  var nextButton = document.getElementById('ex3_pagedown_button');
-  ex3Grid.setPaginationChangeHandler(function (startIndex, endIndex) {
-    startIndexText.innerText = startIndex + 1;
-    endIndexText.innerText = endIndex + 1;
-    if (startIndex <= 0) {
-      previousButton.setAttribute('disabled', 'true');
-    } else {
-      previousButton.removeAttribute('disabled');
-    }
-    if (endIndex >= 18) {
-      nextButton.setAttribute('disabled', 'true');
-    } else {
-      nextButton.removeAttribute('disabled');
-    }
-  });
-  previousButton.addEventListener('click', ex3Grid.movePageUp.bind(ex3Grid));
-  nextButton.addEventListener('click', ex3Grid.movePageDown.bind(ex3Grid));
-
-  // Setup NUX; activates when the first grid cell is focused
-  var gridNUX = document.getElementById('grid-nux');
-  var firstGridCell = document.querySelector('#ex1 [tabindex="0"]');
-  var NUXCloseButton = document.getElementById('close-nux-button');
-  var closeNUX = function () {
-    aria.Utils.addClass(gridNUX, 'hidden');
-    firstGridCell.focus();
-  };
-  var setupInstructions = function () {
-    firstGridCell.removeEventListener('focus', setupInstructions);
-    aria.Utils.removeClass(gridNUX, 'hidden');
-
-    NUXCloseButton.addEventListener('click', closeNUX);
-    NUXCloseButton.addEventListener('keyup', function (event) {
-      if (event.which === aria.KeyCode.RETURN) {
-        closeNUX();
+  if (document.getElementById('ex3-grid')) {
+    var ex3Grid = new aria.Grid(document.getElementById('ex3-grid'));
+    var startIndexText = document.getElementById('ex3_start_index');
+    var endIndexText = document.getElementById('ex3_end_index');
+    var previousButton = document.getElementById('ex3_pageup_button');
+    var nextButton = document.getElementById('ex3_pagedown_button');
+    ex3Grid.setPaginationChangeHandler(function (startIndex, endIndex) {
+      startIndexText.innerText = startIndex + 1;
+      endIndexText.innerText = endIndex + 1;
+      if (startIndex <= 0) {
+        previousButton.setAttribute('disabled', 'true');
+      } else {
+        previousButton.removeAttribute('disabled');
+      }
+      if (endIndex >= 18) {
+        nextButton.setAttribute('disabled', 'true');
+      } else {
+        nextButton.removeAttribute('disabled');
       }
     });
-  };
-  firstGridCell.addEventListener('focus', setupInstructions);
+    previousButton.addEventListener('click', ex3Grid.movePageUp.bind(ex3Grid));
+    nextButton.addEventListener('click', ex3Grid.movePageDown.bind(ex3Grid));
+  }
 });
 
 function PillList(grid, input, submitButton, formUpdateText) {