New design for all example pages (#296)

- Included default spec stylesheet - Added a style for `<kbd>` - Added some fixes on top of the default spec sheet to fix table styles
w3c · Feb 18, 2017 · f74dc3a · f74dc3a
1 parent 01ae36a
commit f74dc3a
Show file tree

Hide file tree

Showing 47 changed files with 890 additions and 595 deletions.
diff --git a/examples/accordion/accordion1.html b/examples/accordion/accordion1.html
@@ -5,9 +5,11 @@
 <meta content="width=device-width, initial-scale=1.0" name="viewport" />
 <title>Accordion Example | WAI-ARIA Authoring Practices 1.1</title>
 <!--  Core js and css shared by all examples; do not modify when using this template. -->
-<link href="../css/core.css" rel="stylesheet">
-<link href="../css/table.css" rel="stylesheet">
-<script src="../js/examples.js" type="text/javascript"></script>
+<link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
+<link rel="stylesheet" href="../css/core.css">
+<script src="../js/examples.js"></script>
+<script src="../js/highlight.pack.js"></script>
+<script src="../js/app.js"></script>
 
 <!--  js and css for this example. -->
 <link rel="stylesheet" type="text/css" href="css/customize.css" />
@@ -146,7 +148,7 @@ <h2 id="ex_label">Example</h2>
   </section>
   <section>
     <h2 id="kbd_label">Keyboard Support</h2>
-    <table aria-labelledby="kbd_label">
+    <table aria-labelledby="kbd_label" class="def">
       <thead>
         <tr>
           <th>Key</th>
@@ -155,7 +157,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
       </thead>
       <tbody>
         <tr>
-          <td><kbd>Space</kbd> or <kbd>Enter</kbd></td>
+          <th><kbd>Space</kbd> or <kbd>Enter</kbd></th>
           <td>When focus is on the accordion header of a collapsed section, expands the section.</td>
         </tr>
       </tbody>
@@ -167,7 +169,7 @@ <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.
     -->
-    <table aria-labelledby="rps_label">
+    <table aria-labelledby="rps_label" class="data attributes">
       <thead>
         <tr>
           <th scope="col">Role</th>
@@ -286,12 +288,12 @@ <h2>Javascript and CSS Source Code</h2>
   <section>
     <h2 id="sc1_label">HTML Source Code</h2>
     <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
-    <div id="sc1"></div>
+    <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.make()
-        </script>
+      sourceCode.add('sc1', 'coding-arena');
+      sourceCode.make();
+    </script>
   </section>
 
   </main>

diff --git a/examples/alert/index.html b/examples/alert/index.html
@@ -5,8 +5,11 @@
     <title>Alert Example | WAI-ARIA Authoring Practices 1.1</title>
 
     <!--  Core js and css shared by all examples; do not modify when using this template. -->
-    <link href="../css/core.css" rel="stylesheet">
-    <link href="../css/table.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
+    <link rel="stylesheet" href="../css/core.css">
+    <script src="../js/examples.js"></script>
+    <script src="../js/highlight.pack.js"></script>
+    <script src="../js/app.js"></script>
 
     <!--  js and css for this example. -->
     <link href="css/alert.css" rel="stylesheet">
@@ -55,7 +58,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
 
     <section>
       <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
-      <table aria-labelledby="rps_label">
+      <table aria-labelledby="rps_label" class="data attributes">
         <thead>
           <tr>
             <th scope="col">Role</th>

diff --git a/examples/breadcrumb/css/breadcrumb.css b/examples/breadcrumb/css/breadcrumb.css
@@ -1,8 +1,8 @@
 nav.breadcrumb {
   padding: 0.8em 1em;
-  border: 1px solid #f5f5f5;
+  border: 1px solid hsl(0, 0%, 90%);
   border-radius: 4px;
-  background: #FCFBFC;
+  background: hsl(300, 14%, 97%);
 }
 
 nav.breadcrumb ol {
@@ -15,12 +15,6 @@ nav.breadcrumb li {
   display: inline;
 }
 
-/*nav.breadcrumb li + li::before {
-  display: inline-block;
-  content: url('../images/slash.svg');
-  vertical-align: middle;
-}*/
-
 nav.breadcrumb li + li::before {
   display: inline-block;
   margin: 0 .25em;
@@ -30,17 +24,6 @@ nav.breadcrumb li + li::before {
   content: '';
 }
 
-nav.breadcrumb a {
-  color: #2F72C8;
-  text-decoration: none;
-}
-
-nav.breadcrumb a:focus,
-nav.breadcrumb a:hover {
-  text-decoration: underline;
-  background: transparent;
-}
-
 nav.breadcrumb [aria-current="page"] {
   color: #000;
   font-weight: 700;

diff --git a/examples/breadcrumb/index.html b/examples/breadcrumb/index.html
@@ -4,9 +4,13 @@
     <meta charset="utf-8" />
     <title>Breadcrumb Example | WAI-ARIA Authoring Practices 1.1</title>
 
-    <link href="../css/core.css" rel="stylesheet">
-    <link href="../css/table.css" rel="stylesheet">
-    <script src="../js/examples.js" type="text/javascript"></script>
+    <!--  Core js and css shared by all examples; do not modify when using this template. -->
+    <link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
+    <link rel="stylesheet" href="../css/core.css">
+    <script src="../js/examples.js"></script>
+    <script src="../js/highlight.pack.js"></script>
+    <script src="../js/app.js"></script>
+
     <link href="css/breadcrumb.css" rel="stylesheet">
   </head>
   <body>
@@ -61,7 +65,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
 
     <section>
       <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
-      <table aria-labelledby="rps_label">
+      <table aria-labelledby="rps_label" class="data attributes">
         <thead>
           <tr>
             <th scope="col">Role</th>
@@ -112,7 +116,7 @@ <h2>Javascript and CSS Source Code</h2>
     <section>
       <h2 id="sc1_label">HTML Source Code</h2>
       <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
-      <pre id="sc1"></pre>
+      <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');

diff --git a/examples/button/button.html b/examples/button/button.html
@@ -3,24 +3,16 @@
 <head>
 <meta charset="utf-8" />
 <title>Button Examples | WAI-ARIA Authoring Practices 1.1</title>
-<meta name="generator" content="BBEdit 10.5" />
-<link href="../css/core.css" rel="stylesheet">
-<link href="../css/table.css" rel="stylesheet">
+
+<!--  Core js and css shared by all examples; do not modify when using this template. -->
+<link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
+<link rel="stylesheet" href="../css/core.css">
+<script src="../js/examples.js"></script>
+<script src="../js/highlight.pack.js"></script>
+<script src="../js/app.js"></script>
+
 <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>
@@ -38,21 +30,21 @@ <h1>Button Examples</h1>
       <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>  
+    </div>
+  </section>
 
 
   <section>
     <h2 id="kbd_label">Keyboard Support</h2>
 
-    <table aria-labelledby="kbd_label">
+    <table aria-labelledby="kbd_label" class="def">
       <thead>
         <tr>
           <th>Key</th>
@@ -71,7 +63,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
   <section>
     <h2 id="rps_label">ARIA Roles, Properties and States</h2>
 
-    <table aria-labelledby="rps_label">
+    <table aria-labelledby="rps_label" class="data attributes">
       <thead>
         <tr>
           <th scope="col">Role</th>
@@ -164,19 +156,19 @@ <h2>HTML Source Code</h2>
 
     <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="source1"></div>
+    <pre><code id="source1"></code></pre>
     <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
 
     <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="source2"></div>
+    <pre><code id="source2"></code></pre>
     <div role="separator" id="sc2_end_sep" aria-labelledby="sc2_end_sep sc2_label" aria-label="End of"></div>
 
 
 
     <script>
-      sourceCode.add('source1', 'action')
-      sourceCode.add('source2', 'toggle')
+      sourceCode.add('source1', 'action');
+      sourceCode.add('source2', 'toggle');
       sourceCode.make();
     </script>
   </section>

diff --git a/examples/checkbox/checkbox-1/checkbox-1.html b/examples/checkbox/checkbox-1/checkbox-1.html
@@ -4,12 +4,15 @@
   <meta charset="utf-8" />
   <title>Checkbox Example (Two State) | WAI-ARIA Authoring Practices 1.1</title>
 
-  <link href="../../css/core.css" rel="stylesheet">
-  <link href="../../css/table.css" rel="stylesheet">
-  <script src="../../js/examples.js" type="text/javascript"></script>
-
+  <!--  Core js and css shared by all examples; do not modify when using this template. -->
+  <link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
+  <link rel="stylesheet" href="../../css/core.css">
+  <script src="../../js/examples.js"></script>
+  <script src="../../js/highlight.pack.js"></script>
+  <script src="../../js/app.js"></script>
+
   <link href="css/checkbox.css" rel="stylesheet">
-  
+
   <script src="js/checkbox.js" type="text/javascript"></script>
 </head>
 <body>
@@ -38,7 +41,7 @@ <h3>Sandwich Condiments</h3>
         </div>
 
         <script type="text/javascript">
-          window.onload=function() {
+          window.onload = function () {
 
             var checkboxes = document.querySelectorAll('[role="checkbox"]');
 
@@ -47,18 +50,18 @@ <h3>Sandwich Condiments</h3>
               cb.init();
             }
 
-          }    
+          };
         </script>
 
-      </div>  
+      </div>
 
       <div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
 
      </section>
 
      <section>
         <h2 id="kbd_label">Keyboard Support</h2>
-        <table aria-labelledby="kbd_label"> 
+        <table aria-labelledby="kbd_label" class="def">
           <thead>
             <tr>
               <th>Key</th>
@@ -71,24 +74,24 @@ <h2 id="kbd_label">Keyboard Support</h2>
             <td>
               <ul>
                 <li>Moves keyboard focus to the <code>checkbox</code>.</li>
-              </ul>  
+              </ul>
             </td>
           </tr>
             <tr>
               <th><kbd>Space</kbd></th>
               <td>
                 <ul>
-                  <li>Toggle check checkbox between checked and unchecked.</li>  
-                </ul>  
+                  <li>Toggle check checkbox between checked and unchecked.</li>
+                </ul>
               </td>
             </tr>
           </tbody>
         </table>
       </section>
- 
-    <section>   
+
+    <section>
       <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
-      <table aria-labelledby="rps_label">
+      <table aria-labelledby="rps_label" class="data attributes">
         <thead>
           <tr>
             <th scope="col">Role</th>
@@ -107,7 +110,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
                   <li>The <code>role=&quot;checkbox&quot;</code> attribute identifies the <code>div</code> element as a ARIA <code>checkbox</code>.</li>
                   <li>The accessible name comes the child text content of the <code>div[role=&quot;checkbox&quot;]</code> element.</li>
                   <li>The <code>checkbox</code> widget needs a <code>tabindex=&quot;0&quot;</code> value.</li>
-                </ul> 
+                </ul>
               </td>
             </tr>
             <tr>
@@ -117,7 +120,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
               <td>
                   <ul>
                     <li>The <code>div[&quot;checkbox&quot;]</code> is identified as an ineractive element and is added to the tab order of the page by setting the <code>tabindex=&quot;0&quot;</code>.</li>
-                   </ul>  
+                   </ul>
               </td>
             </tr>
             <tr>
@@ -129,7 +132,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
                     <li>Indentifies the <code>checkbox</code> button as unchecked.</li>
                     <li>CSS attribute selectors (e.g. <code>[aria-checked=&quot;false&quot;]</code>) are used to synchronize the visual states with the value of the <code>aria-checked</code> attribute.</li>
                     <li>The CSS <code>:before</code> psuedo selector and the <code>content</code> property are used to indcate visual state of "unchecked" to support high contrast setting in operating systems and browsers.</li>
-                  </ul>  
+                  </ul>
               </td>
             </tr>
             <tr>
@@ -141,13 +144,13 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
                     <li>Indentifies the <code>checkbox</code> as checked.</li>
                     <li>CSS attribute selectors (e.g. <code>[aria-checked=&quot;true&quot;]</code>) are used to synchronize the visual states with the value of the <code>aria-checked</code> attribute.</li>
                     <li>The CSS <code>:before</code> psuedo selector and the <code>content</code> property are used to indcate visual state of "checked" to support high contrast setting in operating systems and browsers.</li>
-                  </ul>  
+                  </ul>
               </td>
             </tr>
         </tbody>
       </table>
     </section>
-  
+
   <section>
     <h2>Javascript and CSS Source Code</h2>
     <ul>
@@ -164,15 +167,15 @@ <h2>Javascript and CSS Source Code</h2>
     <h2>HTML Source Code</h2>
     <h3 id="sc1_label">Simple Two-State Checkbox Example</h3>
     <div id="sc1_start_sep" role="separator" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of HTML for"></div>
-    <div id="sc1"></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');
         sourceCode.make();
     </script>
   </section>
-  </main>  
+  </main>
   <nav>
     <a href="../../../#checkbox">Checkbox Design Pattern in WAI-ARIA Authoring Practices 1.1</a>
   </nav>