diff --git a/examples/treegrid/css/expand-icon-highlighted.svg b/examples/treegrid/css/expand-icon-highlighted.svg index 343d562eff..4ee2b031f4 100644 --- a/examples/treegrid/css/expand-icon-highlighted.svg +++ b/examples/treegrid/css/expand-icon-highlighted.svg @@ -1,3 +1,3 @@ - + diff --git a/examples/treegrid/css/treegrid-1.css b/examples/treegrid/css/treegrid-1.css index 90a2e65185..7be628de02 100644 --- a/examples/treegrid/css/treegrid-1.css +++ b/examples/treegrid/css/treegrid-1.css @@ -6,6 +6,11 @@ } #treegrid tr { + display: table-row; + cursor: default; +} + +#treegrid tbody td { cursor: default; } @@ -30,18 +35,24 @@ padding-left: 3ch; } -#treegrid :focus { - background-color: hsl(230, 60%, 40%); - color: white; - outline: 0; +#treegrid a { + padding-left: .25ch; + padding-right: .25ch; } -#treegrid :focus a { - color: white; +#treegrid tr:focus, +#treegrid td:focus, +#treegrid a:focus { + outline: 2px solid hsl(216, 94%, 70%); + background-color: hsl(216, 80%, 97%); +} + +#treegrid a:focus { + border-bottom: none; } /* Hide collapsed rows */ -#treegrid tr[aria-hidden="true"] { +#treegrid tr.hidden { display: none; } @@ -59,6 +70,7 @@ padding-left: 10ch; } + /* Collapse/expand icons */ #treegrid tr > td:first-child::before { font-family: monospace; diff --git a/examples/treegrid/js/treegrid-1.js b/examples/treegrid/js/treegrid-1.js index 0f7c6d27b7..d21e6efe7c 100644 --- a/examples/treegrid/js/treegrid-1.js +++ b/examples/treegrid/js/treegrid-1.js @@ -66,7 +66,7 @@ function TreeGrid (treegridElem, doAllowRowFocus, doStartRowFocus) { } function getAllNavigableRows () { - var nodeList = treegridElem.querySelectorAll('tbody > tr:not([aria-hidden="true"])'); + var nodeList = treegridElem.querySelectorAll('tbody > tr:not([class~="hidden"])'); // Convert to array so that we can use array methods on it return Array.prototype.slice.call(nodeList); } @@ -341,10 +341,15 @@ function TreeGrid (treegridElem, doAllowRowFocus, doStartRowFocus) { doExpandLevel[rowLevel] && isExpanded(nextRow); var willHideRow = !doExpandLevel[rowLevel]; - var isRowHidden = nextRow.getAttribute('aria-hidden') === 'true'; + var isRowHidden = nextRow.classList.contains('hidden'); if (willHideRow !== isRowHidden) { - nextRow.setAttribute('aria-hidden', willHideRow); + if (willHideRow) { + nextRow.classList.add('hidden'); + } + else { + nextRow.classList.remove('hidden'); + } didChange = true; } } @@ -366,7 +371,7 @@ function TreeGrid (treegridElem, doAllowRowFocus, doStartRowFocus) { } } - function getAriaExpandedElem(row) { + function getAriaExpandedElem (row) { return doAllowRowFocus ? row : getNavigableCols(row)[0]; } diff --git a/examples/treegrid/treegrid-1.html b/examples/treegrid/treegrid-1.html index b3438bae35..38089db449 100644 --- a/examples/treegrid/treegrid-1.html +++ b/examples/treegrid/treegrid-1.html @@ -3,12 +3,6 @@ - Treegrid Email Inbox Example | WAI-ARIA Authoring Practices 1.1 @@ -72,8 +66,17 @@ +

Treegrid Email Inbox Example

+

NOTE: This example page is not yet complete. Development of this example is tracked by @@ -107,7 +110,7 @@

Example

The div for the rendered HTML source is in the last section of the page. -->
- +
@@ -131,32 +134,32 @@

Example

- + - + - + - + - + - + @@ -166,34 +169,23 @@

Example

-

Notes

-

In general, this type of treegrid acts mostly as a tree with cells. The interactions - are the same as a tree, until one begins navigating by cells (via tab to an interactive cell or - right arrow on an expanded row).

Accessibility Features

-

Markup used:

-
    -
  • roles used are treegrid, row, gridcell and columnheader.
    • -
  • aria-level: used to set the current level of an item, 1, 2, 3, etc.
    • -
  • aria-posinset, aria-setsize: used on a row to indicate the position of an item within it's local group, such as item 3 of 5. Unfortunately, aria-posinset and aria-setsize are not currently legal in the spec (bug filed). Therefore, aria-posinset and aria-setsize are not currently supported on role="row" in the Nu Validator (bug filed). We'll need to work that in as this is the most practical way of implementing ARIA in many existing treegrid libraries (as opposed to rearchitecting the - DOM structure to contain rowgroups). Note that the ARIA spec's text for rowgroup states that it cannot be parented by a treegrid (bug filed).
    • -
  • aria-expanded (tristate): this attribute must be removed (not present) if the item cannot be expanded. For expandable items, the value is "true" or "false".
    IMPORTANT: aria-expanded is set on the row unless rows cannot receive focus, because it is an indicator to the user that something is actionable. If only the cell can get focused, then pressing Enter on the cell is the only way to indicate this, so the attribute needs to go there so that screen readers will announce it. It is not added to the cell if rows can receive focus, as this provides a confusing/redundant experience where both the row and first cell announce the expanded state. In this example, JavaScript is used to move the aria-expanded attribute down to the first cell in the ?cell=force version.
    • -
  • aria-hidden: set to "true" for child items that are currently hidden because the parent is collapsed.
    • -
  • tabindex is set in the JS, as per the usual roving tabindex methodology. Specifically, we use tabindex="0" for the current item so that it is the subitem that gets focused if user tabs out and back in, and tabindex="-1" for all items where we want click-to-focus behavior enabled.
    • -
-

Not used in this example:

+

Focusable Elements in Current Row

    -
  • aria-rowindex, aria-rowcount, aria-colindex, aria-colcount are not currently used, as UA/AT can compute this for fully loaded table DOMs.
    • -
  • aria-owns: not currently used, as it would be confusing to have conceptual children (other rows) vs. layout children (cells) being on the same level.
    • -
  • aria-activedescendant: this example uses to roaming tabindex method instead.
    • -
  • aria-multiselectable and aria-selected: used on row in the case of a multiselectable treegrid where each row begins with a checkbox. Must be set to false or true so that it is clear that row is selectable. Unfortunately some screen readers will read "selected" for each row even in the single selection case.
    • -
  • aria-labelledby or aria-describedby for headers? Not currently used, awaiting discussion. Some UA + screen reader combinations seem to be determining this automatically via the table structure.
    • -
  • aria-readonly: in ARIA 1.0, a grid/treegrid is editable by default. However, there is no default in ARIA 1.1. Firefox currently implements the ARIA 1.0 concept for this, which means that "editable" is read for every cell unless aria-readonly="true" is used on the treegrid. A bug has been filed in Mozilla to not propagate the readonly/editable state to descendant gridcells unless it is specified via aria-readonly.
    • +
  • + This example uses the roving tabindex technique to manage the tabbing into and out of the treegrid and tabindex values are managed through javascript. +
    • +
  • + If a gridcell contains a focusable element (e.g. a, input), the focusable element gets focus instead of the gridcell. In this example the e-mail address column contains links, so the link receives focus when the user navigates to the gridcell. +
    • +
  • + The e-mail address link in the current message row with focus is included in the tabbing order (e.g. tabIndex=0) of the page, all other links in the treegrid are not in the tabbing order of the page (e.g. tabIndex=-1). +
@@ -201,9 +193,7 @@

Accessibility Features

Keyboard Support

-

Note (TBD): the behavior for Left arrow and Right arrow should be switched for right-to-left language content!!

- -
I agree with you, they are the shizzle joe@blahblahblah.blahblah
+
@@ -370,30 +360,169 @@

Role, Property, State, and Tabindex Attributes

- + - + - - + + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Key
RoleNametreegrid HTML_ELEMENTtable - Describe usage/purpose, e.g., indicates the focusable element that serves as the ... + Identifies the element as a treegrid.
- AttributeName=AttributeValueHTML_ELEMENTaria-label=ARIA Treegrid Exampletable
    -
  • explanation of usage, purpose, benefit, and/or guidance relevant to this implementation.
    • -
  • If making multiple statements, use list for brevity and clarity
    • -
  • Do not make a single item list.
    • +
  • Provides an accessible name for the treegrid.
    • +
  • treegrid requires an accessible name.
columnheaderth +
    +
  • Identifies the element as a columnheader.
    • +
  • Column headers provide context (e.g. label) for the values of the gridcells in the treegrid.
    • +
+
rowtr +
    +
  • Identifies the element as a row in the treegrid.
    • +
  • The accessible name for the row comes from concatenating the text content of the child gridcells.
    • +
tabindex=-1tr +
    +
  • Makes the row element focusable without including it in the tab sequence of the page.
    • +
  • All row and gridcell elements are focusable, but only one is included in the tab sequence.
    • +
+
tabindex=0tr +
    +
  • Includes the row element in the tab sequence.
    • +
  • Only one row or gridcell in the treegrid has tabindex="0".
    • +
  • In this implementation, the first row in the treegrid is included in the tab sequence when the page loads.
    • +
  • + When the user moves focus in the treegrid, the element included in the tab sequence changes to the element with focus as described in the section on + roving tabindex. +
    • +
+
+ aria-expanded=falsetr or td +
    +
  • Applied only to rows or cells elements that are parent rows. i.e., next set of rows are response to the message in this row
    • +
  • Indicates the parent row is closed, i.e., the descendant rows are not visible.
    • +
  • The visual indication of the collapsed state is synchronized by a CSS attribute selector.
    • +
  • When the treegrid is configured to support focus on rows aria-expanded is on the tr elements, but when the treegrid is configured to support focus on cells only, aria-expanded is on the first td element contained in each row.
    • +
+
+ aria-expanded=truetr or td +
    +
  • Applied only to rows or cells elements that are parent rows. i.e., next set of rows are response to the message in this row
    • +
  • Indicates the parent row is open, i.e., the descendant rows are visible.
    • +
  • The visual indication of the open state is synchronized by a CSS attribute selector.
    • +
  • When the treegrid is configured to support focus on rows aria-expanded is on the tr elements, but when the treegrid is configured to support focus on cells only, aria-expanded is on the first td element contained in each row.
    • +
+ aria-level=numbertr +
    +
  • Defines the level of the row in the hierarchical treegrid structure.
    • +
  • Counting is one-based.
    • +
  • Root rows have aria-level=“1”.
    • +
+
+ aria-setsize=numbertr + Defines the number of rows in the set of rows that are in the same branch and at the same level within the hierarchy. +
+ aria-posinset=numbertr +
    +
  • Defines the position of the row within the set of other rows that are in the same branch and at the same level within the hierarchy.
    • +
  • Counting is one-based, not zero-based.
    • +
+
gridcelltd + Identifies the element as a gridcell. +
tabindex=-1td +
    +
  • Makes the gridcell element focusable without including it in the tab sequence of the page.
    • +
  • All row and gridcell elements are focusable, but only one is included in the tab sequence.
    • +
+
tabindex=0td +
    +
  • Includes the gridcell element in the tab sequence.
    • +
  • Only one row or gridcell in the treegrid has tabindex="0".
    • +
  • In this implementation, the first row in the treegrid is included in the tab sequence when the page loads.
    • +
  • + When the user moves focus in the treegrid, the element included in the tab sequence changes to the element with focus as described in the section on + roving tabindex. +
    • +
+
@@ -403,11 +532,11 @@

Javascript and CSS Source Code

@@ -430,7 +559,7 @@

HTML Source Code