Examples: Add codepen button to 6 example pages (pull #1595)

Adds open in codepen button to the following example pages: * tabs/tabs-1/tabs.html * tabs/tabs-2/tabs.html * checkbox/checkbox-1/checkbox-1.html * checkbox/checkbox-2/checkbox-2.html * menu-button/menu-button-actions.html * menu-button/menu-button-actions-active-descendant.html
w3c · Nov 9, 2020 · 142864b · 142864b
1 parent 14a6a0a
commit 142864b
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 19 deletions.
diff --git a/examples/checkbox/checkbox-1/checkbox-1.html b/examples/checkbox/checkbox-1/checkbox-1.html
@@ -33,7 +33,9 @@ <h1>Checkbox Example (Two State)</h1>
     </ul>
 
     <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="ex1">
@@ -177,7 +179,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/checkbox.css" type="text/css">checkbox.css</a>
       </li>
@@ -195,7 +197,7 @@ <h3 id="sc1_label">Simple Two-State Checkbox Example</h3>
     <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');
+        sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
         sourceCode.make();
     </script>
   </section>

diff --git a/examples/checkbox/checkbox-2/checkbox-2.html b/examples/checkbox/checkbox-2/checkbox-2.html
@@ -41,7 +41,9 @@ <h1>Checkbox Example (Mixed-State)</h1>
         <li><a href="../checkbox-1/checkbox-1.html">Checkbox (Two State)</a>: Simple two state checkbox.</li>
       </ul>
       <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="ex1">
            <fieldset>
@@ -197,7 +199,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/checkbox.css" type="text/css">checkbox.css</a></li>
           <li>Javascript: <a href="js/checkboxMixed.js" type="text/javascript">checkboxMixed.js</a></li>
           <li>Javascript: <a href="js/controlledCheckbox.js" type="text/javascript">controlledCheckbox.js</a></li>
@@ -210,7 +212,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', 'ex1');
+          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
           sourceCode.make();
         </script>
       </section>

diff --git a/examples/menu-button/menu-button-actions-active-descendant.html b/examples/menu-button/menu-button-actions-active-descendant.html
@@ -44,7 +44,9 @@ <h1>Actions Menu Button Example Using aria-activedescendant</h1>
         <li><a href="menu-button-links.html">Navigation Menu Button</a>: A button that opens a menu of items that behave as links.</li>
       </ul>
       <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="ex1">
           <div class="menu_button">
@@ -321,9 +323,9 @@ <h3 id="rps2_label">Menu</h3>
       <section>
         <h2>Javascript and CSS Source Code</h2>
 
-        <ul>
+        <ul id="css_js_files">
           <li>CSS: <a href="css/menuButtonAction.css" type="text/css">MenubuttonAction.css</a></li>
-          <li>Javascript: <a href="js/Menubutton2.js" type="text/javascript">Menubutton2.js</a></li>
+          <li>Javascript: <a href="js/Menubutton.js" type="text/javascript">Menubutton2.js</a></li>
           <li>Javascript: <a href="js/MenuItemActionActivedescendant.js" type="text/javascript">MenuItemActionActivedescendant.js</a></li>
           <li>Javascript: <a href="js/PopupMenuActionActivedescendant.js" type="text/javascript">PopupMenuActionActivedescendant.js</a></li>
         </ul>
@@ -339,7 +341,7 @@ <h2 id="sc1_label">HTML Source Code</h2>
           If you change the ID of either the 'ex1' div or the 'sc1' div, be sure to update the sourceCode.add function parameters.
           -->
         <script>
-          sourceCode.add('sc1', 'ex1');
+          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
           sourceCode.make();
         </script>
       </section>

diff --git a/examples/menu-button/menu-button-actions.html b/examples/menu-button/menu-button-actions.html
@@ -44,7 +44,9 @@ <h1>Actions Menu Button Example Using <code>element.focus()</code></h1>
         <li><a href="menu-button-links.html">Navigation Menu Button</a>: A button that opens a menu of items that behave as links.</li>
       </ul>
       <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="ex1">
           <div class="menu_button">
@@ -302,7 +304,7 @@ <h3 id="rps2_label">Menu</h3>
       <section>
         <h2>Javascript and CSS Source Code</h2>
 
-        <ul>
+        <ul id="css_js_files">
           <li>CSS: <a href="css/menuButtonAction.css" type="text/css">MenubuttonAction.css</a></li>
           <li>Javascript: <a href="js/Menubutton.js" type="text/javascript">Menubutton.js</a></li>
           <li>Javascript: <a href="js/MenuItemAction.js" type="text/javascript">MenuItemAction.js</a></li>
@@ -320,7 +322,7 @@ <h2 id="sc1_label">HTML Source Code</h2>
           If you change the ID of either the 'ex1' div or the 'sc1' div, be sure to update the sourceCode.add function parameters.
           -->
         <script>
-          sourceCode.add('sc1', 'ex1');
+          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
           sourceCode.make();
         </script>
       </section>

diff --git a/examples/tabs/tabs-1/tabs.html b/examples/tabs/tabs-1/tabs.html
@@ -37,7 +37,9 @@ <h1>Example of Tabs with Automatic Activation</h1>
       </ul>
 
       <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="ex1">
           <div class="tabs">
@@ -298,7 +300,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/tabs.css" type="tex/css">tabs.css</a></li>
           <li>Javascript: <a href="js/tabs.js" type="text/javascript">tabs.js</a></li>
         </ul>
@@ -310,7 +312,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', 'ex1');
+          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
           sourceCode.make();
         </script>
       </section>

diff --git a/examples/tabs/tabs-2/tabs.html b/examples/tabs/tabs-2/tabs.html
@@ -37,7 +37,9 @@ <h1>Example of Tabs with Manual Activation</h1>
       </ul>
 
       <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="ex1">
           <div class="tabs">
@@ -301,7 +303,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/tabs.css" type="tex/css">tabs.css</a></li>
           <li>Javascript: <a href="js/tabs.js" type="text/javascript">tabs.js</a></li>
         </ul>
@@ -313,7 +315,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', 'ex1');
+          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
           sourceCode.make();
         </script>
       </section>