From ed9137ea10c357ca3a4372e7f96efba70e14f599 Mon Sep 17 00:00:00 2001
From: Valerie Young <spectranaut@gmail.com>
Date: Thu, 13 Sep 2018 12:29:32 -0400
Subject: [PATCH] Regression testing: Add data-test-id to example pages (pull
 #881)

---
 examples/grid/dataGrids.html                | 38 ++++++++++-----------
 examples/listbox/listbox-collapsible.html   | 32 ++++++++---------
 examples/menu-button/menu-button-links.html | 34 +++++++++---------
 examples/slider/slider-2.html               | 32 ++++++++---------
 examples/tabs/tabs-2/tabs.html              |  2 +-
 5 files changed, 69 insertions(+), 69 deletions(-)

diff --git a/examples/grid/dataGrids.html b/examples/grid/dataGrids.html
index ba0d07e62a..dd565cbfbc 100644
--- a/examples/grid/dataGrids.html
+++ b/examples/grid/dataGrids.html
@@ -531,7 +531,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
         <th>key</th>
         <th>Function</th>
       </tr>
-      <tr>
+      <tr data-test-id="key-right-arrow">
         <th scope="row">
           <kbd>Right Arrow</kbd>
         </th>
@@ -542,7 +542,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
           </ul>
         </td>
       </tr>
-      <tr>
+      <tr data-test-id="key-left-arrow">
         <th scope="row">
           <kbd>Left Arrow</kbd>
         </th>
@@ -553,7 +553,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
           </ul>
         </td>
       </tr>
-      <tr>
+      <tr data-test-id="key-down-arrow">
         <th scope="row">
           <kbd>Down Arrow</kbd>
         </th>
@@ -564,7 +564,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
           </ul>
         </td>
       </tr>
-      <tr>
+      <tr data-test-id="key-up-arrow">
         <th scope="row">
           <kbd>Up Arrow</kbd>
         </th>
@@ -575,7 +575,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
           </ul>
         </td>
       </tr>
-      <tr>
+      <tr data-test-id="key-page-down">
         <th scope="row">
           <kbd>Page Down</kbd>
         </th>
@@ -587,7 +587,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
           </ul>
         </td>
       </tr>
-      <tr>
+      <tr data-test-id="key-page-up">
         <th scope="row">
           <kbd>Page Up</kbd>
         </th>
@@ -599,25 +599,25 @@ <h2 id="kbd_label">Keyboard Support</h2>
           </ul>
         </td>
       </tr>
-      <tr>
+      <tr data-test-id="key-home">
         <th scope="row">
           <kbd>Home</kbd>
         </th>
         <td>moves focus to the first cell in the row that contains focus.</td>
       </tr>
-      <tr>
+      <tr data-test-id="key-end">
         <th scope="row">
           <kbd>End</kbd>
         </th>
         <td>moves focus to the last cell in the row that contains focus.</td>
       </tr>
-      <tr>
+      <tr data-test-id="key-control-home">
         <th scope="row">
           <kbd>Control + Home</kbd>
         </th>
         <td>moves focus to the first cell in the first row.</td>
       </tr>
-      <tr>
+      <tr data-test-id="key-control-end">
         <th scope="row">
           <kbd>Control + End</kbd>
         </th>
@@ -638,7 +638,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
         </tr>
       </thead>
       <tbody>
-        <tr>
+        <tr data-test-id="grid-role">
           <th scope="row">
             <code>grid</code>
           </th>
@@ -663,7 +663,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
             </ul>
           </td>
         </tr>
-        <tr>
+        <tr data-test-id="aria-labelledby">
           <td></td>
           <th scope="row">
             <code>aria-labelledby=&quot;ID_REF&quot;</code>
@@ -673,7 +673,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
           </td>
           <td>Refers to the heading element that labels the grid.</td>
         </tr>
-        <tr>
+        <tr data-test-id="aria-rowcount">
           <td></td>
           <th scope="row">
             <code>aria-rowcount=&quot;16&quot;</code>
@@ -696,7 +696,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
             </ul>
           </td>
         </tr>
-        <tr>
+        <tr data-test-id="aria-colcount">
           <td></td>
           <th scope="row">
             <code>aria-colcount=&quot;6&quot;</code>
@@ -716,7 +716,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
             </ul>
           </td>
         </tr>
-        <tr>
+        <tr data-test-id="aria-rowindex">
           <td></td>
           <th scope="row">
             <code>aria-rowindex=&quot;INDEX_VALUE&quot;</code>
@@ -733,7 +733,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
             </ul>
           </td>
         </tr>
-        <tr>
+        <tr data-test-id="aria-sort">
           <td></td>
           <th scope="row">
             <code>aria-sort=&quot;ascending&quot;</code>
@@ -743,7 +743,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
           </td>
           <td>In example 2, applied when a column is sorted in ascending order.</td>
         </tr>
-        <tr>
+        <tr data-test-id="aria-sort">
           <td></td>
           <th scope="row">
             <code>aria-sort=&quot;descending&quot;</code>
@@ -753,7 +753,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
           </td>
           <td>In example 2, applied when a column is sorted in descending order.</td>
         </tr>
-        <tr>
+        <tr data-test-id="aria-sort">
           <td></td>
           <th scope="row">
             <code>aria-sort=&quot;none&quot;</code>
@@ -763,7 +763,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
           </td>
           <td>In example 2, applied when a column is sortable but not sorted.</td>
         </tr>
-        <tr>
+        <tr data-test-id="aria-colindex">
           <td></td>
           <th scope="row">
             <code>aria-colindex=&quot;INDEX_VALUE&quot;</code>
diff --git a/examples/listbox/listbox-collapsible.html b/examples/listbox/listbox-collapsible.html
index 4129df45b4..94fe7911ef 100644
--- a/examples/listbox/listbox-collapsible.html
+++ b/examples/listbox/listbox-collapsible.html
@@ -122,7 +122,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
         </tr>
       </thead>
       <tbody>
-        <tr>
+        <tr data-test-id="key-enter">
           <th><kbd>Enter</kbd></th>
           <td>
             <ul>
@@ -131,11 +131,11 @@ <h2 id="kbd_label">Keyboard Support</h2>
             </ul>
           </td>
         </tr>
-        <tr>
+        <tr data-test-id="key-escape">
           <th><kbd>Escape</kbd></th>
           <td>If the listbox is displayed, collapses the listbox and moves focus to the button.</td>
         </tr>
-        <tr>
+        <tr data-test-id="key-down-arrow">
           <th><kbd>Down Arrow</kbd></th>
           <td>
             <ul>
@@ -144,7 +144,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
             </ul>
           </td>
         </tr>
-        <tr>
+        <tr data-test-id="key-up-arrow">
           <th><kbd>Up Arrow</kbd></th>
           <td>
             <ul>
@@ -153,15 +153,15 @@ <h2 id="kbd_label">Keyboard Support</h2>
             </ul>
           </td>
         </tr>
-        <tr>
+        <tr data-test-id="key-home">
           <th><kbd>Home</kbd></th>
           <td>If the listbox is displayed, moves focus to and selects the first option.</td>
         </tr>
-        <tr>
+        <tr data-test-id="key-end">
           <th><kbd>End</kbd></th>
           <td>If the listbox is displayed, moves focus to and selects the last option.</td>
         </tr>
-        <tr>
+        <tr data-test-id="key-character">
           <th>Printable Characters</th>
           <td>
           <ul>
@@ -191,7 +191,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
         </tr>
       </thead>
       <tbody>
-        <tr>
+        <tr data-test-id="button-aria-labelledby">
           <td></td>
           <th scope="row"><code>aria-labelledby=&quot;ID_REF1 ID_REF2&quot;</code></th>
           <td><code>button</code></td>
@@ -203,13 +203,13 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
             </ul>
           </td>
         </tr>
-        <tr>
+        <tr data-test-id="button-aria-haspopup">
           <td></td>
           <th scope="row"><code>aria-haspopup=&quot;listbox&quot;</code></th>
           <td><code>button</code></td>
           <td>Indicates that activating the button displays a listbox.</td>
         </tr>
-        <tr>
+        <tr data-test-id="button-aria-expanded">
           <td></td>
           <th scope="row"><code>aria-expanded=&quot;true&quot;</code></th>
           <td><code>button</code></td>
@@ -220,19 +220,19 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
             </ul>
           </td>
         </tr>
-        <tr>
+        <tr data-test-id="listbox-role">
           <th scope="row"><code>listbox</code></th>
           <td></td>
           <td><code>ul</code></td>
           <td>Identifies the focusable element that has listbox behaviors and contains the listbox options. </td>
         </tr>
-        <tr>
+        <tr data-test-id="listbox-aria-labelledby">
           <td></td>
           <th scope="row"><code>aria-labelledby=&quot;ID_REF&quot;</code></th>
           <td><code>ul</code></td>
           <td>Refers to the element containing the listbox label.</td>
         </tr>
-        <tr>
+        <tr data-test-id="listbox-tabindex">
           <td></td>
           <th scope="row"><code>tabindex=&quot;-1&quot;</code></th>
           <td><code>ul</code></td>
@@ -243,7 +243,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
             </ul>
           </td>
         </tr>
-        <tr>
+        <tr data-test-id="listbox-aria-activedescendant">
           <td></td>
           <th scope="row"><code>aria-activedescendant=&quot;ID_REF&quot;</code></th>
           <td><code>ul</code></td>
@@ -260,13 +260,13 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
             </ul>
           </td>
         </tr>
-        <tr>
+        <tr data-test-id="option-role">
           <th scope="row"><code>role=&quot;option&quot;</code></th>
           <td></td>
           <td><code>li</code></td>
           <td>Identifies each selectable element containing the name of an option.</td>
         </tr>
-        <tr>
+        <tr data-test-id="option-aria-selected">
           <td></td>
           <th scope="row"><code>aria-selected=&quot;true&quot;</code></th>
           <td><code>li</code></td>
diff --git a/examples/menu-button/menu-button-links.html b/examples/menu-button/menu-button-links.html
index c2fb5d8b0d..6022d3e85f 100644
--- a/examples/menu-button/menu-button-links.html
+++ b/examples/menu-button/menu-button-links.html
@@ -118,11 +118,11 @@ <h3 id="kbd1_label">Menu Button</h3>
             </tr>
           </thead>
           <tbody>
-            <tr>
+            <tr data-test-id="button-down-arrow-or-space-or-enter">
               <th><kbd>Down Arrow</kbd><br><kbd>Space</kbd><br><kbd>Enter</kbd></th>
               <td>Opens <code>menu</code> and moves focus to first <code>menuitem</code></td>
             </tr>
-            <tr>
+            <tr data-test-id="button-up-arrow">
               <th><kbd>Up Arrow</kbd></th>
               <td>Opens <code>menu</code> and moves focus to last <code>menuitem</code></td>
             </tr>
@@ -137,7 +137,7 @@ <h3 id="kbd2_label" class="widget">Menu</h3>
             </tr>
           </thead>
           <tbody>
-            <tr>
+            <tr data-test-id="menu-enter">
               <th><kbd>Enter</kbd></th>
               <td>
                 <ul>
@@ -147,7 +147,7 @@ <h3 id="kbd2_label" class="widget">Menu</h3>
                 </ul>
               </td>
             </tr>
-            <tr>
+            <tr data-test-id="menu-escape">
               <th><kbd>Escape</kbd></th>
               <td>
                 <ul>
@@ -156,7 +156,7 @@ <h3 id="kbd2_label" class="widget">Menu</h3>
                 </ul>
               </td>
             </tr>
-            <tr>
+            <tr data-test-id="menu-up-arrow">
               <th><kbd>Up Arrow</kbd></th>
               <td>
                 <ul>
@@ -165,7 +165,7 @@ <h3 id="kbd2_label" class="widget">Menu</h3>
                 </ul>
               </td>
             </tr>
-             <tr>
+             <tr data-test-id="menu-down-arrow">
               <th><kbd>Down Arrow</kbd></th>
               <td>
                 <ul>
@@ -174,15 +174,15 @@ <h3 id="kbd2_label" class="widget">Menu</h3>
                 </ul>
               </td>
             </tr>
-            <tr>
+            <tr data-test-id="menu-home">
               <th><kbd>Home</kbd></th>
               <td>Moves focus to the first menu item.</td>
             </tr>
-            <tr>
+            <tr data-test-id="menu-end">
               <th><kbd>End</kbd></th>
               <td>Moves focus to the last menu item.</td>
             </tr>
-            <tr>
+            <tr data-test-id="menu-character">
               <th><kbd>A-Z</kbd><br><kbd>a-z</kbd></th>
               <td>
                 <ul>
@@ -208,7 +208,7 @@ <h3 id="rps1_label">Menu Button</h3>
             </tr>
           </thead>
           <tbody>
-            <tr>
+            <tr data-test-id="button-aria-haspopup">
               <td></td>
               <th scope="row"><code>aria-haspopup=&quot;true&quot;</code></th>
               <td>
@@ -224,7 +224,7 @@ <h3 id="rps1_label">Menu Button</h3>
                 </ul>
               </td>
             </tr>
-            <tr>
+            <tr data-test-id="button-aria-controls">
               <td></td>
               <th scope="row"><code>aria-controls=&quot;IDREF&quot;</code></th>
               <td>
@@ -237,7 +237,7 @@ <h3 id="rps1_label">Menu Button</h3>
                 </ul>
               </td>
             </tr>
-            <tr>
+            <tr data-test-id="button-aria-expanded">
                 <td></td>
                 <th scope="row"><code>aria-expanded=&quot;true&quot;</code></th>
                 <td><code>button</code></td>
@@ -265,7 +265,7 @@ <h3 id="rps2_label">Menu</h3>
             </tr>
           </thead>
           <tbody>
-            <tr>
+            <tr data-test-id="menu-role">
               <th scope="row">
                 <code>menu</code>
               </th>
@@ -275,7 +275,7 @@ <h3 id="rps2_label">Menu</h3>
               </td>
               <td>Identifies the <code>ul</code> element as a <code>menu</code>.</td>
             </tr>
-            <tr>
+            <tr data-test-id="menu-aria-labelledby">
               <td>
                 <code></code>
               </td>
@@ -290,7 +290,7 @@ <h3 id="rps2_label">Menu</h3>
                 </ul>
               </td>
             </tr>
-            <tr>
+            <tr data-test-id="none-role">
               <th scope="row">
                 <code>none</code>
               </th>
@@ -305,7 +305,7 @@ <h3 id="rps2_label">Menu</h3>
                 </ul>
               </td>
             </tr>
-            <tr>
+            <tr data-test-id="menuitem-role">
               <th scope="row">
                 <code>menuitem</code>
               </th>
@@ -320,7 +320,7 @@ <h3 id="rps2_label">Menu</h3>
                 </ul>
               </td>
             </tr>
-            <tr>
+            <tr data-test-id="menuitem-tabindex">
               <td></td>
               <th scope="row"><code>tabindex=&quot;-1&quot;</code></th>
               <td>
diff --git a/examples/slider/slider-2.html b/examples/slider/slider-2.html
index 3f657ea4c6..b02e9942bc 100644
--- a/examples/slider/slider-2.html
+++ b/examples/slider/slider-2.html
@@ -91,49 +91,49 @@ <h2 id="kbd_label" style="clear: both;">Keyboard Support</h2>
           </tr>
         </thead>
         <tbody>
-          <tr>
+          <tr data-test-id="key-right-arrow">
             <th>
               <kbd>Right Arrow</kbd>
             </th>
             <td>Increases slider value one step.</td>
           </tr>
-          <tr>
+          <tr data-test-id="key-up-arrow">
             <th>
               <kbd>Up Arrow</kbd>
             </th>
             <td>Increases slider value one step.</td>
           </tr>
-          <tr>
+          <tr data-test-id="key-left-arrow">
             <th>
               <kbd>Left Arrow</kbd>
             </th>
             <td>Decreases slider value one step.</td>
           </tr>
-          <tr>
+          <tr data-test-id="key-down-arrow">
             <th>
               <kbd>Down Arrow</kbd>
             </th>
             <td>Decreases slider value one step.</td>
           </tr>
-          <tr>
+          <tr data-test-id="key-page-up">
             <th>
               <kbd>Page Up</kbd>
             </th>
             <td>Increases temperature slider value multiple steps. In this slider, jumps ten steps.</td>
           </tr>
-          <tr>
+          <tr data-test-id="key-page-down">
             <th>
               <kbd>Page Down</kbd>
             </th>
             <td>Decreases temperature slider value multiple steps. In this slider, jumps ten steps.</td>
           </tr>
-          <tr>
+          <tr data-test-id="key-home">
             <th>
               <kbd>Home</kbd>
             </th>
             <td>Sets slider to its minimum value.</td>
           </tr>
-          <tr>
+          <tr data-test-id="key-end">
             <th>
               <kbd>End</kbd>
             </th>
@@ -155,7 +155,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
           </tr>
         </thead>
         <tbody>
-          <tr>
+          <tr data-test-id="slider-role">
             <th scope="row">
               <code>slider</code>
             </th>
@@ -170,7 +170,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
               </ul>
             </td>
           </tr>
-          <tr>
+          <tr data-test-id="tabindex">
             <td></td>
             <th scope="row">
               <code>tabindex=<q>0</q></code>
@@ -180,7 +180,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
             </td>
             <td>Includes the slider thumb in the page tab sequence.</td>
           </tr>
-          <tr>
+          <tr data-test-id="aria-orientation">
             <td></td>
             <th scope="row">
               <code>aria-orientation</code>
@@ -196,7 +196,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
               </ul>
             </td>
           </tr>
-          <tr>
+          <tr data-test-id="aria-valuemax">
             <td></td>
             <th scope="row">
               <code>aria-valuemax=<q>NUMBER</q></code>
@@ -206,7 +206,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
             </td>
             <td>Specifies a numeric value that is the maximum value the slider can have.</td>
           </tr>
-          <tr>
+          <tr data-test-id="aria-valuemin">
             <td></td>
             <th scope="row">
               <code>aria-valuemin=<q>NUMBER</q></code>
@@ -216,7 +216,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
             </td>
             <td>Specifies a numeric value that is the minimum value the slider can have.</td>
           </tr>
-          <tr>
+          <tr data-test-id="aria-valuenow">
             <td></td>
             <th scope="row">
               <code>aria-valuenow=<q>NUMBER</q></code>
@@ -226,7 +226,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
             </td>
             <td>A numeric value that is the current value of the slider.</td>
           </tr>
-          <tr>
+          <tr data-test-id="aria-valuetext">
             <td></td>
             <th scope="row">
               <code>aria-valuetext=<q>STRING</q></code>
@@ -242,7 +242,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
               </ul>
             </td>
           </tr>
-          <tr>
+          <tr data-test-id="aria-labelledby">
             <td></td>
             <th scope="row">
               <code>aria-labelledby=<q>IDREF</q></code>
diff --git a/examples/tabs/tabs-2/tabs.html b/examples/tabs/tabs-2/tabs.html
index 53c7d4c54e..d7ff7e01bb 100644
--- a/examples/tabs/tabs-2/tabs.html
+++ b/examples/tabs/tabs-2/tabs.html
@@ -91,7 +91,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
                 </ul>
               </td>
             </tr>
-            <tr data-test-id="key-enter">
+            <tr data-test-id="key-enter-or-space">
               <th><kbd>Enter</kbd><br><kbd>Space</kbd></th>
               <td>
                 When a tab has focus, activates the tab, causing its associated panel to be displayed.