From b3fd876f3242602c1f8258d13e3460668ecdbd30 Mon Sep 17 00:00:00 2001 From: Adam Page Date: Fri, 6 Jun 2025 22:13:21 -0700 Subject: [PATCH 01/10] remove explicit role="row" declaration --- .../coverage-and-quality-report.html | 4 ++-- .../patterns/treegrid/examples/treegrid-1.html | 16 ++++++++-------- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/content/about/coverage-and-quality/coverage-and-quality-report.html b/content/about/coverage-and-quality/coverage-and-quality-report.html index 95f9be2669..8e6848b5c2 100644 --- a/content/about/coverage-and-quality/coverage-and-quality-report.html +++ b/content/about/coverage-and-quality/coverage-and-quality-report.html @@ -2095,11 +2095,11 @@

Coding Practices

ex1 - 3 + 2 3 7 5 - aria-activedescendant,aria-current + row,aria-activedescendant,aria-current File Directory Treeview Using Computed Properties diff --git a/content/patterns/treegrid/examples/treegrid-1.html b/content/patterns/treegrid/examples/treegrid-1.html index 0732a94b6d..4ffbf29b6d 100644 --- a/content/patterns/treegrid/examples/treegrid-1.html +++ b/content/patterns/treegrid/examples/treegrid-1.html @@ -112,42 +112,42 @@

Example

- + Treegrids are awesome Want to learn how to use them? aaron@thegoogle.rocks - + re: Treegrids are awesome I agree with you, they are the shizzle joe@blahblahblah.blahblah - + re: Treegrids are awesome They are great for showing a lot of data, like a grid billy@dangerous.fish - + re: Treegrids are awesome Cool, we've been needing an example and documentation doris@rufflazydogs.sleep - + re: Treegrids are awesome I hear the Fancytree library is going to align with this example! someone@please-do-it.company - + re: Treegrids are awesome Sometimes they are more like trees, others are more like grids mari@beingpractical.com - + re: Treegrids are awesome Cool, when it's a tree, let's keep left/right to collapse/expand issie@imadeadcatsadly.wascute - + re: Treegrids are awesome I see, sometimes right arrow moves by column kitten@kittenseason.future From 76e03725e1266c235c514f00ef523a82a0d440e4 Mon Sep 17 00:00:00 2001 From: Adam Page Date: Fri, 6 Jun 2025 22:34:49 -0700 Subject: [PATCH 02/10] update test --- test/tests/treegrid_treegrid-1.js | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) diff --git a/test/tests/treegrid_treegrid-1.js b/test/tests/treegrid_treegrid-1.js index b2fab07d0f..4adf57a0d8 100644 --- a/test/tests/treegrid_treegrid-1.js +++ b/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 tr', gridcellSelector: '#ex1 [role="gridcell"]', - threadSelector: '#ex1 [role="row"][aria-expanded]', - closedThreadSelector: '#ex1 [role="row"][aria-expanded]', + threadSelector: '#ex1 tr[aria-expanded]', + closedThreadSelector: '#ex1 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 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 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 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 From 8df790b07885460dd47984c24aa4f9f7353f42ed Mon Sep 17 00:00:00 2001 From: Adam Page Date: Fri, 6 Jun 2025 22:34:58 -0700 Subject: [PATCH 03/10] update documentation --- .../coverage-and-quality-report.html | 5 ++--- content/about/coverage-and-quality/role-coverage.csv | 2 +- content/index/index.html | 1 - content/patterns/treegrid/examples/treegrid-1.html | 11 ----------- content/patterns/treegrid/treegrid-pattern.html | 8 ++++---- 5 files changed, 7 insertions(+), 20 deletions(-) diff --git a/content/about/coverage-and-quality/coverage-and-quality-report.html b/content/about/coverage-and-quality/coverage-and-quality-report.html index 8e6848b5c2..f7c0de5af2 100644 --- a/content/about/coverage-and-quality/coverage-and-quality-report.html +++ b/content/about/coverage-and-quality/coverage-and-quality-report.html @@ -600,7 +600,6 @@

Roles with More than One Guidance or Exa
  • Editable Combobox with Grid Popup
  • Layout Grid
  • Table
    • -
  • Treegrid Email Inbox
    • @@ -2096,10 +2095,10 @@

    Coding Practices

    ex1 2 - 3 + 2 7 5 - row,aria-activedescendant,aria-current + aria-activedescendant,aria-current File Directory Treeview Using Computed Properties diff --git a/content/about/coverage-and-quality/role-coverage.csv b/content/about/coverage-and-quality/role-coverage.csv index d3d2296440..f682b6a8d6 100644 --- a/content/about/coverage-and-quality/role-coverage.csv +++ b/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" diff --git a/content/index/index.html b/content/index/index.html index 43027a6d1a..f5f23cba2e 100644 --- a/content/index/index.html +++ b/content/index/index.html @@ -326,7 +326,6 @@

    Examples by Role

  • Editable Combobox with Grid Popup
  • Layout Grid
  • Table
    • -
  • Treegrid Email Inbox
    • diff --git a/content/patterns/treegrid/examples/treegrid-1.html b/content/patterns/treegrid/examples/treegrid-1.html index 4ffbf29b6d..3450c3ebf6 100644 --- a/content/patterns/treegrid/examples/treegrid-1.html +++ b/content/patterns/treegrid/examples/treegrid-1.html @@ -327,17 +327,6 @@

    Role, Property, State, and Tabindex Attributes

    table Provides an accessible name for the treegrid. - - row - - tr - -
      -
    • Identifies the element as a row.
      • -
    • The row role is not an implicit semantic for the tr element when in a treegrid.
      • -
    - - tabindex="-1" diff --git a/content/patterns/treegrid/treegrid-pattern.html b/content/patterns/treegrid/treegrid-pattern.html index 0b438b68e7..53848d9cbb 100644 --- a/content/patterns/treegrid/treegrid-pattern.html +++ b/content/patterns/treegrid/treegrid-pattern.html @@ -258,9 +258,9 @@

    Note

    WAI-ARIA Roles, States, and Properties

    • The treegrid container has role treegrid.
      • -
    • Each row container has role row and is either a DOM descendant of or owned by the treegrid element or an element with role rowgroup.
      • +
    • Each row container has an implicit role of row and is either a DOM descendant of or owned by the treegrid element or an element with role rowgroup.
    • - Each cell is either a DOM descendant of or owned by a row 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:
      • columnheader if the cell contains a title or header information for the column.
      • rowheader if the cell contains title or header information for the row.
        • @@ -268,8 +268,8 @@

        WAI-ARIA Roles, States, and Properties

    • - 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 aria-expanded state set on either the row element or on a cell contained in therow. + 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 aria-expanded state set on either the row element or on a cell contained in therow. The aria-expanded state is set to false when the child rows are not displayed and set to true when the child rows are displayed. Rows that do not control display of child rows do not have the aria-expanded attribute because, if they were to have it, they would be incorrectly described to assistive technologies as parent rows.
      • From a108e0633bc698d53cfb0e901152831ef0c9c018 Mon Sep 17 00:00:00 2001 From: Adam Page Date: Fri, 6 Jun 2025 22:42:37 -0700 Subject: [PATCH 04/10] fix typo --- content/patterns/treegrid/treegrid-pattern.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/patterns/treegrid/treegrid-pattern.html b/content/patterns/treegrid/treegrid-pattern.html index 53848d9cbb..d0243756d7 100644 --- a/content/patterns/treegrid/treegrid-pattern.html +++ b/content/patterns/treegrid/treegrid-pattern.html @@ -269,7 +269,7 @@

      WAI-ARIA Roles, States, and Properties

    • 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 aria-expanded state set on either the row element or on a cell contained in therow. + Each parent row has the aria-expanded state set on either the row element or on a cell contained in the row. The aria-expanded state is set to false when the child rows are not displayed and set to true when the child rows are displayed. Rows that do not control display of child rows do not have the aria-expanded attribute because, if they were to have it, they would be incorrectly described to assistive technologies as parent rows.
      • From 5fe72acb7e415df83392665e5e022c7d42f9b398 Mon Sep 17 00:00:00 2001 From: Adam Page Date: Fri, 6 Jun 2025 22:57:16 -0700 Subject: [PATCH 05/10] constrain test to tbody rows --- test/tests/treegrid_treegrid-1.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/test/tests/treegrid_treegrid-1.js b/test/tests/treegrid_treegrid-1.js index 4adf57a0d8..640549341f 100644 --- a/test/tests/treegrid_treegrid-1.js +++ b/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 tr', + emailRowSelector: '#ex1 tbody tr', gridcellSelector: '#ex1 [role="gridcell"]', - threadSelector: '#ex1 tr[aria-expanded]', - closedThreadSelector: '#ex1 tr[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 tr: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 tr:nth-of-type(' + (rowIndex + 1) + ') [role="gridcell"]'; + '#ex1 tbody tr:nth-of-type(' + (rowIndex + 1) + ') [role="gridcell"]'; gridcellSelector = gridcellSelector + ':nth-of-type(' + (gridcellIndex + 1) + ')'; @@ -803,7 +803,7 @@ ariaTest.failing( // INTERACTIVE ITEM 1: Enter sent while focus is email gridcell should trigger link - const selector = '#ex1 tr: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 From 04be94eee14f3e60697a6e68365efdb3eaf56c43 Mon Sep 17 00:00:00 2001 From: Adam Page Date: Fri, 6 Jun 2025 23:05:34 -0700 Subject: [PATCH 06/10] undo accidental reset --- .../coverage-and-quality/coverage-and-quality-report.html | 7 ++++--- content/about/coverage-and-quality/role-coverage.csv | 2 +- content/index/index.html | 1 + 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/content/about/coverage-and-quality/coverage-and-quality-report.html b/content/about/coverage-and-quality/coverage-and-quality-report.html index f7c0de5af2..6ad6a27dbe 100644 --- a/content/about/coverage-and-quality/coverage-and-quality-report.html +++ b/content/about/coverage-and-quality/coverage-and-quality-report.html @@ -600,6 +600,7 @@

      Roles with More than One Guidance or Exa
    • Editable Combobox with Grid Popup
    • Layout Grid
    • Table
      • +
    • Treegrid Email Inbox

    @@ -2094,8 +2095,8 @@

    Coding Practices

    ex1 - 2 - 2 + 3 + 3 7 5 aria-activedescendant,aria-current @@ -2644,4 +2645,4 @@

    Mouse and Pointer Events

    - \ No newline at end of file + diff --git a/content/about/coverage-and-quality/role-coverage.csv b/content/about/coverage-and-quality/role-coverage.csv index f682b6a8d6..d3d2296440 100644 --- a/content/about/coverage-and-quality/role-coverage.csv +++ b/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","3","Example: Editable Combobox with Grid Popup","Example: Layout Grid","Example: Table" +"row","0","4","Example: Editable Combobox with Grid Popup","Example: Layout Grid","Example: Table","Example: Treegrid Email Inbox" "rowgroup","0","1","Example: Table" "rowheader","0","0" "scrollbar","0","0" diff --git a/content/index/index.html b/content/index/index.html index f5f23cba2e..43027a6d1a 100644 --- a/content/index/index.html +++ b/content/index/index.html @@ -326,6 +326,7 @@

    Examples by Role

  • Editable Combobox with Grid Popup
  • Layout Grid
  • Table
    • +
  • Treegrid Email Inbox
    • From 2b03fc9efc302b96acddcebb32c865dc9918cf87 Mon Sep 17 00:00:00 2001 From: Adam Page Date: Fri, 6 Jun 2025 23:08:53 -0700 Subject: [PATCH 07/10] run coverage report and reference tables --- .../coverage-and-quality/coverage-and-quality-report.html | 7 +++---- content/about/coverage-and-quality/role-coverage.csv | 2 +- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/content/about/coverage-and-quality/coverage-and-quality-report.html b/content/about/coverage-and-quality/coverage-and-quality-report.html index 6ad6a27dbe..f7c0de5af2 100644 --- a/content/about/coverage-and-quality/coverage-and-quality-report.html +++ b/content/about/coverage-and-quality/coverage-and-quality-report.html @@ -600,7 +600,6 @@

    Roles with More than One Guidance or Exa
  • Editable Combobox with Grid Popup
  • Layout Grid
  • Table
    • -
  • Treegrid Email Inbox
    • @@ -2095,8 +2094,8 @@

    Coding Practices

    ex1 - 3 - 3 + 2 + 2 7 5 aria-activedescendant,aria-current @@ -2645,4 +2644,4 @@

    Mouse and Pointer Events

    - + \ No newline at end of file diff --git a/content/about/coverage-and-quality/role-coverage.csv b/content/about/coverage-and-quality/role-coverage.csv index d3d2296440..f682b6a8d6 100644 --- a/content/about/coverage-and-quality/role-coverage.csv +++ b/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" From 7a6464663cdf5dfe49078f7159c201cc9bdd517f Mon Sep 17 00:00:00 2001 From: Adam Page Date: Fri, 6 Jun 2025 23:14:31 -0700 Subject: [PATCH 08/10] re-run reference tabes --- content/index/index.html | 1 - 1 file changed, 1 deletion(-) diff --git a/content/index/index.html b/content/index/index.html index 43027a6d1a..f5f23cba2e 100644 --- a/content/index/index.html +++ b/content/index/index.html @@ -326,7 +326,6 @@

    Examples by Role

  • Editable Combobox with Grid Popup
  • Layout Grid
  • Table
    • -
  • Treegrid Email Inbox
    • From 2b1ce6a2138886068ded09d6415f95758c1a8631 Mon Sep 17 00:00:00 2001 From: Adam Page Date: Tue, 10 Jun 2025 11:56:35 -0700 Subject: [PATCH 09/10] disable tr-related validator suppressions --- .vnurc | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/.vnurc b/.vnurc index 48b2510f64..c826baf2b3 100644 --- a/.vnurc +++ b/.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 @@ -28,5 +28,5 @@ Element “input” is missing required attribute “aria-checked”. # https://github.com/w3c/aria-practices/issues/3070 Attribute “aria-actions” not allowed on element “button” at this point. # 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”. \ No newline at end of file +# 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”. From 39a60ad39f73d43d7142098cc244e2925818d1d5 Mon Sep 17 00:00:00 2001 From: Adam Page Date: Tue, 10 Jun 2025 13:01:53 -0700 Subject: [PATCH 10/10] restore vnurc td filter --- .vnurc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.vnurc b/.vnurc index 718face825..ed2e8bd8dc 100644 --- a/.vnurc +++ b/.vnurc @@ -30,5 +30,5 @@ Attribute “aria-actions” not allowed on element “button” at this point. # https://github.com/w3c/aria-practices/issues/3265 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 “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”.