carousel Example with buttons for slide control: Improve High Contras…

…t Support and implementation of APG Programming Practices (pull #1387)

Updated the carousel example that uses buttons for slide control as follows:
1. Added view options equivalent to options available for the tabbed carousel example.
2. Improved color contrast support.
3. Improved keyboard focus styling.
4. Updated Javascript to conform with latest APG code style guidelines.
5. Updated documentation.

Co-authored-by: Matt King <a11yThinker@Gmail.com>
Co-authored-by: Carolyn MacLeod <Carolyn_MacLeod@ca.ibm.com>

examples/carousel/carousel-2-tablist.html

@@ -279,7 +279,7 @@ <h3>
                       </h3>
 
                       <div>
-                        <p><span class="contrast">8 pm Sunday, March 8, on TV: Sneak peak at the final season.</span></p>
+                        <p><span class="contrast">8 pm Sunday, March 8, on TV: Sneak peek at the final season.</span></p>
                       </div>
                     </div>  <!-- .carousel-caption -->
                   </div>   <!-- .item -->
@@ -373,12 +373,12 @@ <h3>Controlling Automatic Slide Rotation</h3>
             <ul>
               <li>The rotation control button is the first element in the screen reader reading order.</li>
               <li>The rotation control button is always visible so it is available to all users whether they are interacting via a mouse, keyboard, assistive technology, or touch.</li>
-              <li>If the carousel is rotating, its accessible name is <q>Stop Automatic Slide Show</q>, informing screen reader users that the slides are changing in addition to providing a way to stop the changes.</li>
+              <li>If the carousel is rotating, the button's accessible name is <q>Stop Automatic Slide Show</q>, informing screen reader users that the slides are changing in addition to providing a way to stop the changes.</li>
               <li>If the carousel is not rotating, the accessible name of the button is <q>Start Automatic Slide Show</q>.</li>
-              <li>If a user has activated the button to stop the show, the rotation will only restart if the button is activated. Moving keyboard focus or the mouse out of the carousel will not restart rotation.</li>
-              <li>If keyboard focus is inside the carousel, or if the mouse is hovering over the carousel, the button is disabled; it cannot be used to start rotation.</li>
+              <li>If a user activates the rotation control button to start rotation it is assumed the user wants auto-rotation to start immediately and focus or hover states within the carousel are ignored..  The rotation will only stop if the button is activated again, </li>
             </ul>
           </li>
+          <li>The example includes an option to completely disable automatic slide rotation.  When this option is selected the start/stop button is not rendered and slides can only be rotated through activation of the tab controls.</li>
         </ul>
         <h3>Color Contrast of Text and Rotation Controls</h3>
         <p>
@@ -551,7 +551,7 @@ <h3 id="rps_label_2">Tabs</h3>
                 <td>
                   <ul>
                     <li>Role <code>region</code> is implied for any <code>section</code> element that has an accessible name.</li>
-                    <li>Defines the carousel and its controls as a land mark region.</li>
+                    <li>Defines the carousel and its controls as a landmark region.</li>
                   </ul>
                 </td>
               </tr>
@@ -566,7 +566,7 @@ <h3 id="rps_label_2">Tabs</h3>
                 <td>
                   <ul>
                     <li>Informs assistive technologies to identify the element as a "carousel" rather than as a "region".</li>
-                    <li>Effects how assistive technologies render the role but does not effect functionality, such as commands for navigating to landmark regions.</li>
+                    <li>Affects how assistive technologies render the role but does not affect functionality, such as commands for navigating to landmark regions.</li>
                   </ul>
                 </td>
               </tr>
@@ -744,7 +744,7 @@ <h3 id="rps_label_2">Tabs</h3>
                 <td>
                   <ul>
                     <li>Informs assistive technologies to identify the element as a "slide" rather than as a "tabpanel".</li>
-                    <li>Effects how assistive technologies render the role but does not effect assistive technology functionality.</li>
+                    <li>Affects how assistive technologies render the role but does not affect assistive technology functionality.</li>
                   </ul>
                 </td>
               </tr>