Treegrid Email Inbox Example | WAI-ARIA Authoring Practices 1.1

Treegrid Email Inbox Example

NOTE: This example page is not yet complete. Development of this example is tracked by issue 132.

The following example demonstrates how the treegrid design pattern (TBD) can be used to make an interactive tree that enables users to navigate the hierarchical structure of email conversations and also provides the ability to navigate to elements that describe each email, such as subject and sender.

This same example can be used in three ways.

Note: no row-only version is provided. A row-only navigation version could be useful when the columns are guaranteed to fit horizontally (no horizontal scrolling necessary), the columns are merely for attractive presentation, as opposed to addressing any need to visit them individually. However, in this case the author can simply follow the tree pattern and present the child treeitem data in columns.

Example

Subject Summary Email
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

Accessibility Features

Focusable Elements in Current Row

  • 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).

Keyboard Support

Key Function
Right Arrow
  • If a row is focused, and it is collapsed, expands the current row.
  • If a row is focused, and it is expanded, focuses the first cell in the row.
  • If a cell is focused, moves one cell to the right.
  • If focus is on the right most cell, focus does not move.
Left Arrow
  • If a row is focused, and it is expanded, collapses the current row.
  • If a row is focused, and it is collapsed, moves to the parent row (if there is one).
  • If a cell in the first column is focused, focuses the row.
  • If a cell in a different column is focused, moves focus one cell to the left.
Down Arrow
  • Moves focus one row or one cell down, depending on whether a row or cell is currently focused.
  • If focus is on the bottom row, focus does not move.
Up Arrow
  • Moves focus one row or one cell up, depending on whether a row or cell is currently focused.
  • If focus is on the top row, focus does not move.
Tab
  • Moves focus to the next interactive cell in the current row.
  • If there are no more interactive cells in the current row, moves out of the treegrid.
Shift + Tab
  • If a cell is focused, moves focus to the previous interactive cell in the current row.
  • If a row is focused, moves out of the treegrid.
Home
  • If a row is focused, moves to the first row.
  • If a cell is focused, moves focus to the row's first cell.
End
  • If a row is focused, moves to the last row.
  • If a cell is focused, moves focus to the row's last cell.
Control + Home
  • Moves focus to the first row.
  • If a cell was focused, focus is kept in the same column, otherwise the entire first row is focused.
Control + End
  • Moves focus to the last row.
  • If a cell was focused, focus is kept in the same column, otherwise the entire last row is focused.
Enter
  • Performs default action on row or cell, e.g. opens message or navigate to link.
  • If focus is on the cell with the expand/collapse button, and there is no other action, will toggle expansion of the current row.
Space
  • In the case of multiselect treegrid, can be used to check a selection checkbox

Role, Property, State, and Tabindex Attributes

Role Attribute Element Usage
treegrid table Identifies the element as a treegrid.
aria-label=ARIA Treegrid Example table
  • Provides an accessible name for the treegrid.
  • treegrid requires an accessible name.
columnheader th
  • Identifies the element as a columnheader.
  • Column headers provide context (e.g. label) for the values of the gridcells in the treegrid.
row tr
  • 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=-1 tr
  • 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=0 tr
  • 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=false tr 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=true tr 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=number tr
  • Defines the level of the row in the hierarchical treegrid structure.
  • Counting is one-based.
  • Root rows have aria-level=“1”.
aria-setsize=number tr 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=number tr
  • 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.
gridcell td Identifies the element as a gridcell.
tabindex=-1 td
  • 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=0 td
  • 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.

Javascript and CSS Source Code

HTML Source Code