Treegrid Example: Remove explicit role="row" declaration from "TR" elements

.vnurc

@@ -8,14 +8,14 @@ An “img” element with no “alt” attribute must not have a “role” attr
 An “img” element with no “alt” attribute must not have any “aria-\*” attributes other than “aria-hidden”.
 An “img” element must have an “alt” attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
 # Ignoring aria-posinset and aria-setsize on role row
-Attribute “aria-posinset” not allowed on element “tr” at this point.
-Attribute “aria-setsize” not allowed on element “tr” at this point.
+# Attribute “aria-posinset” not allowed on element “tr” at this point.
+# Attribute “aria-setsize” not allowed on element “tr” at this point.
 # Ignoring role meter
 Bad value “meter” for attribute “role” on element “div”.
 # https://github.com/w3c/aria-practices/issues/1675
 The “type” attribute is unnecessary for JavaScript resources.
 # https://github.com/w3c/aria-practices/issues/1676
-The “row” role is unnecessary for element “tr”.
+# The “row” role is unnecessary for element “tr”.
 # https://github.com/w3c/aria-practices/issues/1677
 Attribute “aria-activedescendant” value should either refer to a descendant element, or should be accompanied by attribute “aria-owns”.
 # https://github.com/w3c/aria-practices/issues/1678
@@ -31,4 +31,4 @@ Attribute “aria-actions” not allowed on element “button” at this point.
 Element “search” not allowed as child of element “div” in this context.*
 # https://github.com/validator/validator/issues/1364
 The “role” attribute must not be used on a “td” element which has a “table” ancestor with no “role” attribute, or with a “role” attribute whose value is “table”, “grid”, or “treegrid”.
-The “role” attribute must not be used on a “tr” element which has a “table” ancestor with no “role” attribute, or with a “role” attribute whose value is “table”, “grid”, or “treegrid”.
+# The “role” attribute must not be used on a “tr” element which has a “table” ancestor with no “role” attribute, or with a “role” attribute whose value is “table”, “grid”, or “treegrid”.

content/about/coverage-and-quality/coverage-and-quality-report.html

@@ -600,7 +600,6 @@ <h2 id="roles_with_more_than_one_label">Roles with More than One Guidance or Exa
                 <li><a href="../../../content/patterns/combobox/examples/grid-combo.html">Editable Combobox with Grid Popup</a></li>
                 <li><a href="../../../content/patterns/grid/examples/layout-grids.html">Layout Grid</a></li>
                 <li><a href="../../../content/patterns/table/examples/table.html">Table</a></li>
-                <li><a href="../../../content/patterns/treegrid/examples/treegrid-1.html">Treegrid Email Inbox</a></li>
             </ul>
 </td>
           </tr>
@@ -2095,8 +2094,8 @@ <h3 id="example_coding_practices">Coding Practices</h3>
             <td></td>
             <td></td>
             <td>ex1</td>
-            <td>3</td>
-            <td>3</td>
+            <td>2</td>
+            <td>2</td>
             <td>7</td>
             <td>5</td>
             <td>aria-activedescendant,aria-current</td>

content/about/coverage-and-quality/role-coverage.csv

@@ -54,7 +54,7 @@
 "radio","3","4","Guidance: Radio Group Pattern","Guidance: For Radio Groups Not Contained in a Toolbar","Guidance: For Radio Group Contained in a Toolbar","Example: Radio Group  Using aria-activedescendant","Example: Rating Radio Group","Example: Radio Group  Using Roving tabindex","Example: Toolbar"
 "radiogroup","0","4","Example: Radio Group  Using aria-activedescendant","Example: Rating Radio Group","Example: Radio Group  Using Roving tabindex","Example: Toolbar"
 "region","1","6","Guidance: Region","Example: Accordion","Example: Auto-Rotating Image Carousel  with Buttons for Slide Control","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Navigation Menubar","Example: Navigation Treeview","Example: Region Landmark"
-"row","0","4","Example: Editable Combobox with Grid Popup","Example: Layout Grid","Example: Table","Example: Treegrid Email Inbox"
+"row","0","3","Example: Editable Combobox with Grid Popup","Example: Layout Grid","Example: Table"
 "rowgroup","0","1","Example: Table"
 "rowheader","0","0"
 "scrollbar","0","0"

content/index/index.html

@@ -326,7 +326,6 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
                 <li><a href="../patterns/combobox/examples/grid-combo.html">Editable Combobox with Grid Popup</a></li>
                 <li><a href="../patterns/grid/examples/layout-grids.html">Layout Grid</a></li>
                 <li><a href="../patterns/table/examples/table.html">Table</a></li>
-                <li><a href="../patterns/treegrid/examples/treegrid-1.html">Treegrid Email Inbox</a></li>
               </ul>
             </td>
           </tr>

content/patterns/treegrid/examples/treegrid-1.html

@@ -112,42 +112,42 @@ <h2 id="ex_label">Example</h2>
               </tr>
             </thead>
             <tbody>
-              <tr role="row" aria-level="1" aria-posinset="1" aria-setsize="1" aria-expanded="true">
+              <tr aria-level="1" aria-posinset="1" aria-setsize="1" aria-expanded="true">
                 <td role="gridcell">Treegrids are awesome</td>
                 <td role="gridcell">Want to learn how to use them?</td>
                 <td role="gridcell"><a href="mailto:[email protected]">[email protected]</a></td>
               </tr>
-              <tr role="row" aria-level="2" aria-posinset="1" aria-setsize="3">
+              <tr aria-level="2" aria-posinset="1" aria-setsize="3">
                 <td role="gridcell">re: Treegrids are awesome</td>
                 <td role="gridcell">I agree with you, they are the shizzle</td>
                 <td role="gridcell"><a href="mailto:[email protected]">[email protected]</a></td>
               </tr>
-              <tr role="row" aria-level="2" aria-posinset="2" aria-setsize="3" aria-expanded="false">
+              <tr aria-level="2" aria-posinset="2" aria-setsize="3" aria-expanded="false">
                 <td role="gridcell">re: Treegrids are awesome</td>
                 <td role="gridcell">They are great for showing a lot of data, like a grid</td>
                 <td role="gridcell"><a href="mailto:[email protected]">[email protected]</a></td>
               </tr>
-              <tr role="row" aria-level="3" aria-posinset="1" aria-setsize="1" class="hidden">
+              <tr aria-level="3" aria-posinset="1" aria-setsize="1" class="hidden">
                 <td role="gridcell">re: Treegrids are awesome</td>
                 <td role="gridcell">Cool, we've been needing an example and documentation</td>
                 <td role="gridcell"><a href="mailto:[email protected]">[email protected]</a></td>
               </tr>
-              <tr role="row" aria-level="2" aria-posinset="3" aria-setsize="3" aria-expanded="false">
+              <tr aria-level="2" aria-posinset="3" aria-setsize="3" aria-expanded="false">
                 <td role="gridcell">re: Treegrids are awesome</td>
                 <td role="gridcell">I hear the Fancytree library is going to align with this example!</td>
                 <td role="gridcell"><a href="mailto:[email protected]">[email protected]</a></td>
               </tr>
-              <tr role="row" aria-level="3" aria-posinset="1" aria-setsize="1" aria-expanded="false" class="hidden">
+              <tr aria-level="3" aria-posinset="1" aria-setsize="1" aria-expanded="false" class="hidden">
                 <td role="gridcell">re: Treegrids are awesome</td>
                 <td role="gridcell">Sometimes they are more like trees, others are more like grids</td>
                 <td role="gridcell"><a href="mailto:[email protected]">[email protected]</a></td>
               </tr>
-              <tr role="row" aria-level="4" aria-posinset="1" aria-setsize="2" class="hidden">
+              <tr aria-level="4" aria-posinset="1" aria-setsize="2" class="hidden">
                 <td role="gridcell">re: Treegrids are awesome</td>
                 <td role="gridcell">Cool, when it's a tree, let's keep left/right to collapse/expand</td>
                 <td role="gridcell"><a href="mailto:[email protected]">[email protected]</a></td>
               </tr>
-              <tr role="row" aria-level="4" aria-posinset="2" aria-setsize="2" class="hidden">
+              <tr aria-level="4" aria-posinset="2" aria-setsize="2" class="hidden">
                 <td role="gridcell">re: Treegrids are awesome</td>
                 <td role="gridcell">I see, sometimes right arrow moves by column</td>
                 <td role="gridcell"><a href="mailto:[email protected]">[email protected]</a></td>
@@ -327,17 +327,6 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
               <td><code>table</code></td>
               <td>Provides an accessible name for the <code>treegrid</code>.</td>
             </tr>
-            <tr data-test-id="row-role">
-              <th scope="row"><code>row</code></th>
-              <td></td>
-              <td><code>tr</code></td>
-              <td>
-                <ul>
-                  <li>Identifies the element as a <code>row</code>.</li>
-                  <li>The <code>row</code> role is not an implicit semantic for the <code>tr</code> element when in a <code>treegrid</code>.</li>
-                </ul>
-              </td>
-            </tr>
             <tr data-test-id="row-tabindex">
               <td></td>
               <th scope="row"><code>tabindex="-1"</code></th>

content/patterns/treegrid/treegrid-pattern.html

@@ -258,18 +258,18 @@ <h3>Note</h3>
         <h2>WAI-ARIA Roles, States, and Properties</h2>
         <ul>
           <li>The treegrid container has role <a href="#treegrid" class="role-reference">treegrid</a>.</li>
-          <li>Each row container has role <a href="#row" class="role-reference">row</a> and is either a DOM descendant of or owned by the <code>treegrid</code> element or an element with role <a href="#rowgroup" class="role-reference">rowgroup</a>.</li>
+          <li>Each row container has an implicit role of <a href="#row" class="role-reference">row</a> and is either a DOM descendant of or owned by the <code>treegrid</code> element or an element with role <a href="#rowgroup" class="role-reference">rowgroup</a>.</li>
           <li>
-            Each cell is either a DOM descendant of or owned by a <code>row</code> element and has one of the following roles:
+            Each cell is either a DOM descendant of or owned by a row element and has one of the following roles:
             <ul>
               <li><a href="#columnheader" class="role-reference">columnheader</a> if the cell contains a title or header information for the column.</li>
               <li><a href="#rowheader" class="role-reference">rowheader</a> if the cell contains title or header information for the row.</li>
               <li><a href="#gridcell" class="role-reference">gridcell</a> if the cell does not contain column or row header information.</li>
             </ul>
           </li>
           <li>
-            A <code>row</code> that can be expanded or collapsed to show or hide a set of child rows is a parent row.
-            Each parent <code>row</code> has the <a class="property-reference" href="#aria-expanded">aria-expanded</a> state set on either the <code>row</code> element or on a cell contained in the<code>row</code>.
+            A row that can be expanded or collapsed to show or hide a set of child rows is a parent row.
+            Each parent row has the <a class="property-reference" href="#aria-expanded">aria-expanded</a> state set on either the row element or on a cell contained in the row.
             The <code>aria-expanded</code> state is set to <code>false</code> when the child rows are not displayed and set to <code>true</code> when the child rows are displayed.
             Rows that do not control display of child rows do not have the <code>aria-expanded</code> attribute because, if they were to have it, they would be incorrectly described to assistive technologies as parent rows.
           </li>

test/tests/treegrid_treegrid-1.js

@@ -9,10 +9,10 @@ const exampleFile = 'content/patterns/treegrid/examples/treegrid-1.html';
 
 const ex = {
   treegridSelector: '#ex1 [role="treegrid"]',
-  emailRowSelector: '#ex1 [role="row"]',
+  emailRowSelector: '#ex1 tbody tr',
   gridcellSelector: '#ex1 [role="gridcell"]',
-  threadSelector: '#ex1 [role="row"][aria-expanded]',
-  closedThreadSelector: '#ex1 [role="row"][aria-expanded]',
+  threadSelector: '#ex1 tbody tr[aria-expanded]',
+  closedThreadSelector: '#ex1 tbody tr[aria-expanded]',
   emailLinkSelector: '#ex1 td a',
   lastRowIndex: 7,
   // For each row, the aria-level, aria-setsize and aria-posinset values
@@ -117,7 +117,7 @@ const isClosedThread = async function (el) {
 
 const checkFocusOnGridcell = async function (t, rowIndex, gridcellIndex) {
   let gridcellsSelector =
-    '#ex1 [role="row"]:nth-of-type(' + (rowIndex + 1) + ') [role="gridcell"]';
+    '#ex1 tbody tr:nth-of-type(' + (rowIndex + 1) + ') [role="gridcell"]';
 
   // If the gridcell is index 0 or 1, it does not contain a widget, focus
   // should be on the gridcell itself
@@ -138,7 +138,7 @@ const sendKeyToGridcellAndWait = async function (
   key
 ) {
   let gridcellSelector =
-    '#ex1 [role="row"]:nth-of-type(' + (rowIndex + 1) + ') [role="gridcell"]';
+    '#ex1 tbody tr:nth-of-type(' + (rowIndex + 1) + ') [role="gridcell"]';
   gridcellSelector =
     gridcellSelector + ':nth-of-type(' + (gridcellIndex + 1) + ')';
 
@@ -220,10 +220,6 @@ ariaTest(
   }
 );
 
-ariaTest('row role on tr element', exampleFile, 'row-role', async (t) => {
-  await assertAriaRoles(t, 'ex1', 'row', 8, 'tr');
-});
-
 ariaTest(
   'roving tabindex on rows and links',
   exampleFile,
@@ -807,7 +803,7 @@ ariaTest.failing(
 
     // INTERACTIVE ITEM 1: Enter sent while focus is email gridcell should trigger link
 
-    const selector = '#ex1 [role="row"]:nth-of-type(1) a';
+    const selector = '#ex1 tbody tr:nth-of-type(1) a';
     const newUrl = t.context.url + '#test-url-change';
 
     // Reset the href to not be an email link in order to test