Tabs Examples: Fix Typo and Revise Titles

On pages for both tabs with automatic activation and tabs with manual activation, made changes to: 1. Fix missing space character in keyboard table noticed by @annabbott in issues #278 and #279. 2. For editorial consistency, added "Example of " to the beginning of the title in title tag, H1, and in link text. 3. Lower case "with" in titles.
w3c · Mar 16, 2017 · 9b3de6e · 9b3de6e
1 parent 7192755
commit 9b3de6e
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 8 deletions.
diff --git a/examples/tabs/tabs-1/tabs.html b/examples/tabs/tabs-1/tabs.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>Tabs With Automatic Activation | WAI-ARIA Authoring Practices 1.1</title>
+    <title>Example of Tabs with Automatic Activation | WAI-ARIA Authoring Practices 1.1</title>
 
     <!--  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">
@@ -16,7 +16,7 @@
   </head>
   <body>
     <main>
-      <h1>Tabs With Automatic Activation</h1>
+      <h1>Example of Tabs with Automatic Activation</h1>
 
       <p>
         Provide feedback on updates to this page in
@@ -30,7 +30,7 @@ <h1>Tabs With Automatic Activation</h1>
       </p>
       <p>Similar examples include: </p>
       <ul>
-        <li><a href="../tabs-2/tabs.html">Tabs With Manual Activation</a>: A tabs widget where users activate a tab and display its panel by pressing <kbd>Space</kbd> or <kbd>Enter</kbd>.</li>
+        <li><a href="../tabs-2/tabs.html">Example of Tabs with Manual Activation</a>: A tabs widget where users activate a tab and display its panel by pressing <kbd>Space</kbd> or <kbd>Enter</kbd>.</li>
       </ul>
 
       <section>
@@ -118,7 +118,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
             </tr>
             <tr>
               <th><kbd>Delete</kbd></th>
-              <td>When focus is on the <q>Joke</q> tab,removes the tab from the tab list and places focus on the previous tab.</td>
+              <td>When focus is on the <q>Joke</q> tab, removes the tab from the tab list and places focus on the previous tab.</td>
             </tr>
           </tbody>
         </table>

diff --git a/examples/tabs/tabs-2/tabs.html b/examples/tabs/tabs-2/tabs.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>Tabs With Manual Activation | WAI-ARIA Authoring Practices 1.1</title>
+    <title>Example of Tabs with Manual Activation | WAI-ARIA Authoring Practices 1.1</title>
 
     <!--  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">
@@ -16,7 +16,7 @@
   </head>
   <body>
     <main>
-      <h1>Tabs With Manual Activation</h1>
+      <h1>Example of Tabs with Manual Activation</h1>
       <p>
         Please provide feedback on updates to this page in
         <a href="https://github.com/w3c/aria-practices/issues/279">issue 279.</a>
@@ -29,7 +29,7 @@ <h1>Tabs With Manual Activation</h1>
       </p>
       <p>Similar examples include: </p>
       <ul>
-        <li><a href="../tabs-1/tabs.html">Tabs With Automatic Activation</a>: A tabs widget where tabs are automatically activated and their panel is displayed when they receive focus.</li>
+        <li><a href="../tabs-1/tabs.html">Example of Tabs with Automatic Activation</a>: A tabs widget where tabs are automatically activated and their panel is displayed when they receive focus.</li>
       </ul>
 
       <section>
@@ -123,7 +123,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
             </tr>
             <tr>
               <th><kbd>Delete</kbd></th>
-              <td>When focus is on the <q>Joke</q> tab,removes the tab from the tab list and places focus on the previous tab.</td>
+              <td>When focus is on the <q>Joke</q> tab, removes the tab from the tab list and places focus on the previous tab.</td>
             </tr>
           </tbody>
         </table>