Revise Titles of Tabs Examples

mcking65 · mcking65 · commit 32e406c800c4 · 2017-02-09T00:37:55.000-08:00
Made the titles of the examples:
1. "Tabs With Automatic Activation"
2. "Tabs With Manual Activation"

modified examples subsection of the tabs pattern in aria-practices.html:
* Changed  link text of links to examples
* Added descriptions of examples after each link

modified examples/tabs/tabs-1/tabs.html:
* Changed title tab and H1 to "Tabs With Automatic Activation"
* Changed link text and description for the link to the manual activation tabs example.

modified examples/tabs/tabs-2/tabs.html
* Changed title tab and H1 to "Tabs With Manual Activation"
* Changed link text and description for the link to the automatic  activation tabs example.
diff --git a/aria-practices.html b/aria-practices.html
@@ -1833,10 +1833,10 @@ <h4>WAI-ARIA Roles, States, and Properties</h4>
         </ul>
       </section>
       <section class="notoc">
-        <h4>Example</h4>
+        <h4>Examples</h4>
         <ul>
-          <li><a href="examples/tabs-1/tabs.html">Tabs Widget Example (Follows focus)</a></li>
-          <li><a href="examples/tabs-2/tabs.html">Tabs Widget Example (Manual activation)</a></li>
+          <li><a href="examples/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="examples/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>
         </ul>
       </section>
     </section>
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 (Follows focus) | WAI-ARIA Authoring Practices 1.1</title>
+    <title>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 href="../../css/core.css" rel="stylesheet">
@@ -13,16 +13,14 @@
   </head>
   <body>
     <main>
-      <h1>Tabs (Follows focus)</h1>
-
+      <h1>Tabs With Automatic Activation</h1>
       <p>
           This example section demonstrates a tabs widget that implements the  <a href="../../../#tabpanel">design pattern for tabs</a>.
           In this example panels are automatically activated when its tab receives focus.
       </p>
       <p>Similar examples include: </p>
       <ul>
-        <li><a href="../tabs-2/tabs.html">Tabs (Manual activation)</a>: a version of the tabs widget where tabs have to be manually activated via <kbd>space</kbd> or <kbd>enter</kbd>.</li>
-        <!--  list other examples that implement the same design pattern. -->
+        <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>
       </ul>
 
       <section>
diff --git a/examples/tabs/tabs-2/tabs.html b/examples/tabs/tabs-2/tabs.html
@@ -12,7 +12,7 @@
     <!--  Give this example implementation a name and put it in the title element, e.g., "Checkbox" if implementing the checkbox pattern.
     The name should be unique if the pattern will have multiple implementations, e.g., "Simple Two-State Checkbox" or "Three-State Checkbox".
     -->
-    <title>Tabs (Manual activation) | WAI-ARIA Authoring Practices 1.1</title>
+    <title>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 href="../../css/core.css" rel="stylesheet">
@@ -38,7 +38,7 @@ <h1>Tabs (Manual activation)</h1>
 
       <p>Similar examples include: </p>
       <ul>
-        <li><a href="../tabs-1/tabs.html">Tabs (Follows focus)</a>: a version of the tabs widget where tabs are automatically activated when they receive focus.</li>
+        <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>
         <!--  list other examples that implement the same design pattern. -->
       </ul>
 
