From 2b07c4736e81fcaf0f4c8e7f661d6ec5180bad5c Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Thu, 14 Jun 2018 09:44:18 -0500 Subject: [PATCH 1/5] initial edits on treegrid pattern --- aria-practices.html | 195 +++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 192 insertions(+), 3 deletions(-) diff --git a/aria-practices.html b/aria-practices.html index bcd417fdc2..155df14df0 100644 --- a/aria-practices.html +++ b/aria-practices.html @@ -1227,7 +1227,7 @@

WAI-ARIA Roles, States, and Properties

Grids : Interactive Tabular Data and Layout Containers

- +

A grid widget is a container that enables users to navigate the information or interactive elements it contains using directional navigation keys, such as arrow keys, Home , and End. As a generic container widget that offers flexible keyboard navigation, it can serve a wide variety of needs. @@ -2288,7 +2288,7 @@

Table

If the number of widgets is large, replacing the table with a grid can dramatically reduce the length of the page tab sequence because a grid is a composite widget that can contain other widgets.

- As with other WAI-ARIA roles that have a native host language equivalent, + As with other WAI-ARIA roles that have a native host language equivalent, authors are strongly encouraged to use a native HTML table element whenever possible. This is especially important with role table because it is a new feature of WAI-ARIA 1.1. It is thus advisable to test implementations thoroughly with each browser and assistive technology combination that could be used by the target audience. @@ -2507,7 +2507,7 @@

WAI-ARIA Roles, States, and Properties

Tooltip Widget

NOTE: This design pattern is work in progress; it does not yet have task force consensus. - Progress and discussions are captured in + Progress and discussions are captured in issue 128.

@@ -2735,6 +2735,195 @@

WAI-ARIA Roles, States, and Properties

+
+

Treegrid

+

+ A treegrid can be used to present tabular information that has column titles, row titles, or both. + The grid pattern is particularly useful if the tabular information is editable or interactive. + For example, when data elements are links to more information, rather than presenting them in a static table and including the links in the tab sequence, implementing the grid pattern provides users with intuitive and efficient keyboard navigation of the grid contents as well as a shorter tab sequence for the page. + A grid may also offer functions, such as cell content editing, selection, cut, copy, and paste. +

+

+ In a grid, every cell contains a focusable element or is itself focusable, regardless of whether the cell content is editable or interactive. + There is one exception: if column or row header cells do not provide functions, such as sort or filter, they do not need to be focusable. + One reason it is important for all cells to be able to receive or contain keyboard focus is that screen readers will typically be in their application reading mode, rather than their document reading mode, when users are interacting with the grid. + While in application mode, a screen reader user hears only focusable elements and content that labels focusable elements. + So, screen reader users may unknowingly overlook elements contained in a grid that are either not focusable or not used to label a column or row. +

+

+ A treegrid widget presents a hierarchical data that is presented as a data grid. + Any item in the hierarchy may have child rows, and rows that have children may be expanded or collapsed to show or hide the child rows. + For example, a hierarchical e-mail list uses a treegrid to display messages and responses to that message, + an item representing a message with responses can be expanded to reveal the response messages. +

+

Terms for understanding treegrids include:

+
+
Node
+
An item in a tree.
+
Root Node
+
Node at the base of the tree; it may have one or more child nodes but does not have a parent node.
+
Child Node
+
Node that has a parent; any node that is not a root node is a child node.
+
End Node
+
Node that does not have any child nodes; an end node may be either a root node or a child node.
+
Parent Node
+
Node with one or more child nodes. It can be open (expanded) or closed (collapsed).
+
Open Node
+
Parent node that is expanded so its child nodes are visible.
+
Closed Node
+
Parent node that is collapsed so the child nodes are not visible.
+
+

+ When using a keyboard to navigate a treegrid, a visual keyboard indicator informs the user which cell is focused. + If the treegrid allows the user to choose just one item for an action, then it is known as a single-select treegrid, and the item with focus also has a selected state. + However, in multi-select treegrids, which enable the user to select more than one item for an action, the selected state is independent of the focus. + For example, in a typical hierarchical e-mail grid, the user can move focus to select any number of e-mails for an action, such as delete or move. + It is important that the visual design distinguish between items that are selected and the item that has focus. + For more details, see this description of differences between focus and selection. +

+ +
+

Examples

+ +
+ +
+

Keyboard Interaction

+
    +
  • When a single-select tree receives focus: +
      +
    • If none of the nodes are selected before the tree receives focus, focus is set on the first node.
      • +
    • If a node is selected before the tree receives focus, focus is set on the selected node.
      • +
    +
    • +
  • When a multi-select tree receives focus: +
      +
    • If none of the nodes are selected before the tree receives focus, focus is set on the first node.
      • +
    • If one or more nodes are selected before the tree receives focus, focus is set on the first selected node.
      • +
    +
    • +
  • Right arrow: +
      +
    • When focus is on a closed node, opens the node; focus does not move.
      • +
    • When focus is on a open node, moves focus to the first child node.
      • +
    • When focus is on an end node, does nothing.
      • +
    +
    • +
  • Left arrow: +
      +
    • When focus is on an open node, closes the node.
      • +
    • When focus is on a child node that is also either an end node or a closed node, moves focus to its parent node.
      • +
    • When focus is on a root node that is also either an end node or a closed node, does nothing.
      • +
    +
    • +
  • Down Arrow: Moves focus to the next node that is focusable without opening or closing a node.
    • +
  • Up Arrow: Moves focus to the previous node that is focusable without opening or closing a node.
    • +
  • Home: Moves focus to the first node in the tree without opening or closing a node.
    • +
  • End: Moves focus to the last node in the tree that is focusable without opening a node.
    • +
  • Enter: activates a node, i.e., performs its default action. For parent nodes, one possible default action is to open or close the node. In single-select trees where selection does not follow focus (see note below), the default action is typically to select the focused node.
    • +
  • Type-ahead is recommended for all trees, especially for trees with more than 7 root nodes: +
      +
    • Type a character: focus moves to the next node with a name that starts with the typed character.
      • +
    • Type multiple characters in rapid succession: focus moves to the next node with a name that starts with the string of characters typed.
      • +
    +
    • +
  • * (Optional): Expands all siblings that are at the same level as the current node.
    • +
  • Selection in multi-select trees: + Authors may implement either of two interaction models to support multiple selection: a recommended model that does not require the user to hold a modifier key, such as Shift or Control, while navigating the list + or an alternative model that does require modifier keys to be held while navigating in order to avoid losing selection states. +
      +
    • Recommended selection model -- holding a modifier key while moving focus is not necessary: +
        +
      • Space: Toggles the selection state of the focused node.
        • +
      • Shift + Down Arrow (Optional): Moves focus to and toggles the selection state of the next node.
        • +
      • Shift + Up Arrow (Optional): Moves focus to and toggles the selection state of the previous node.
        • +
      • Shift + Space (Optional): Selects contiguous nodes from the last selected node to the current node.
        • +
      • Control + Shift + Home (Optional): Selects the node with focus and all nodes up to the first node.
        • +
      • Control + Shift + End (Optional): Selects the node with focus and all nodes down to the last node.
        • +
      • Control + A (Optional): Selects all nodes in the tree. Optionally, if all nodes are selected, it can also unselect all nodes.
        • +
      +
      • +
    • Alternative selection model -- Moving focus without holding the Shift or Control modifier unselects all selected nodes except for the focused node: +
        +
      • Shift + Down Arrow: Moves focus to and toggles the selection state of the next node.
        • +
      • Shift + Up Arrow: Moves focus to and toggles the selection state of the previous node.
        • +
      • Control + Down Arrow: Without changing the selection state, moves focus to the next node.
        • +
      • Control + Up Arrow: Without changing the selection state, moves focus to the previous node.
        • +
      • Control + Space: Toggles the selection state of the focused node.
        • +
      • Shift + Space (Optional): Selects contiguous nodes from the most recently selected node to the current node.
        • +
      • Control + Shift + Home (Optional): Selects the node with focus and all nodes up to the first node.
        • +
      • Control + Shift + End (Optional): Selects the node with focus and all nodes down to the last node.
        • +
      • Control + A (Optional): Selects all nodes in the tree. Optionally, if all nodes are selected, it can also unselect all nodes.
        • +
      +
      • +
    +
    • +
+
    +
  1. DOM focus (the active element) is functionally distinct from the selected state. For more details, see this description of differences between focus and selection.
    2. +
  2. + The tree role supports the aria-activedescendant property, + which provides an alternative to moving DOM focus among treeitem elements when implementing keyboard navigation. + For details, see Managing Focus in Composites Using aria-activedescendant. +
    3. +
  3. + In a single-select tree, moving focus may optionally unselect the previously selected node and select the newly focused node. + This model of selection is known as "selection follows focus". + Having selection follow focus can be very helpful in some circumstances and can severely degrade accessibility in others. + For additional guidance, see Deciding When to Make Selection Automatically Follow Focus. +
    4. +
  4. If selecting or unselecting all nodes is an important function, implementing separate controls for these actions, such as buttons for "Select All" and "Unselect All", significantly improves accessibility.
    5. +
  5. + If the nodes in a tree are arranged horizontally: +
      +
    1. Down Arrow performs as Right Arrow is described above, and vice versa.
      2. +
    2. Up Arrow performs as Left Arrow is described above, and vice versa.
      3. +
    +
    6. +
+
+ +
+

WAI-ARIA Roles, States, and Properties

+
    +
  • All tree nodes are contained in or owned by an element with role tree.
    • +
  • Each element serving as a tree node has role treeitem.
    • +
  • Each root node is contained in the element with role tree or referenced by an aria-owns property set on the tree element.
    • +
  • Each parent node contains or owns an element with role group.
    • +
  • Each child node is contained in or owned by an element with role group that is contained in or owned by the node that serves as the parent of that child.
    • +
  • + Each element with role treeitem that serves as a parent node has aria-expanded + set to false when the node is in a closed state and set to true when the node is in an open state. + End nodes do not have the aria-expanded attribute because, if they were to have it, they would be incorrectly described to assistive technologies as parent nodes. +
    • +
  • If the tree supports selection of more than one node, the element with role tree has aria-multiselectable set to true. Otherwise, aria-multiselectable is either set to false or the default value of false is implied.
    • +
  • If the tree does not support multiple selection, aria-selected is set to true for the selected node and it is not present on any other node in the tree.
    • +
  • if the tree supports multiple selection: + +
    • +
  • The element with role tree has either a visible label referenced by aria-labelledby or a value specified for aria-label.
    • +
  • If the complete set of available nodes is not present in the DOM due to dynamic loading as the user moves focus in or scrolls the tree, each node has aria-level, aria-setsize, and aria-posinset specified.
    • +
  • + If the tree element is horizontally oriented, it has aria-orientation + set to horizontal. + The default value of aria-orientation for a tree is vertical. +
    • +
+

+ If aria-owns is set on the tree container to include elements that are not DOM children of the container, + those elements will appear in the reading order in the sequence they are referenced and after any items that are DOM children. + Scripts that manage focus need to ensure the visual focus order matches this assistive technology reading order. +

+
+
+

Window Splitter

From b82ebe9faacf1aeeb24fd16d0a1fe7a71bb917ad Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Thu, 14 Jun 2018 14:47:06 -0500 Subject: [PATCH 2/5] initial treegrid pattern --- aria-practices.html | 263 +++++++++++++++++++------------------------- 1 file changed, 114 insertions(+), 149 deletions(-) diff --git a/aria-practices.html b/aria-practices.html index 155df14df0..0beb7a2fa2 100644 --- a/aria-practices.html +++ b/aria-practices.html @@ -2738,46 +2738,22 @@

WAI-ARIA Roles, States, and Properties

Treegrid

- A treegrid can be used to present tabular information that has column titles, row titles, or both. - The grid pattern is particularly useful if the tabular information is editable or interactive. - For example, when data elements are links to more information, rather than presenting them in a static table and including the links in the tab sequence, implementing the grid pattern provides users with intuitive and efficient keyboard navigation of the grid contents as well as a shorter tab sequence for the page. - A grid may also offer functions, such as cell content editing, selection, cut, copy, and paste. + A treegrid widget presents a hierarchical data grid consisting of tabular information that is editable or interactive. + Any row in the hierarchy may have child rows, and rows with children may be expanded or collapsed to show or hide the children. + For example, a hierarchical e-mail discussion list uses a treegrid to display messages and responses to that message, a message row with responses can be expanded to reveal the response messages.

- In a grid, every cell contains a focusable element or is itself focusable, regardless of whether the cell content is editable or interactive. - There is one exception: if column or row header cells do not provide functions, such as sort or filter, they do not need to be focusable. + In a treegrid both rows and cells are focusable. Every row and cell contains a focusable element or is itself focusable, regardless of whether individual cell content is editable or interactive. + There is one exception: if column cells do not provide functions, such as sort or filter, they do not need to be focusable. One reason it is important for all cells to be able to receive or contain keyboard focus is that screen readers will typically be in their application reading mode, rather than their document reading mode, when users are interacting with the grid. While in application mode, a screen reader user hears only focusable elements and content that labels focusable elements. - So, screen reader users may unknowingly overlook elements contained in a grid that are either not focusable or not used to label a column or row. + So, screen reader users may unknowingly overlook elements contained in a treegrid that are either not focusable or not used to label a column or row.

- A treegrid widget presents a hierarchical data that is presented as a data grid. - Any item in the hierarchy may have child rows, and rows that have children may be expanded or collapsed to show or hide the child rows. - For example, a hierarchical e-mail list uses a treegrid to display messages and responses to that message, - an item representing a message with responses can be expanded to reveal the response messages. -

-

Terms for understanding treegrids include:

-
-
Node
-
An item in a tree.
-
Root Node
-
Node at the base of the tree; it may have one or more child nodes but does not have a parent node.
-
Child Node
-
Node that has a parent; any node that is not a root node is a child node.
-
End Node
-
Node that does not have any child nodes; an end node may be either a root node or a child node.
-
Parent Node
-
Node with one or more child nodes. It can be open (expanded) or closed (collapsed).
-
Open Node
-
Parent node that is expanded so its child nodes are visible.
-
Closed Node
-
Parent node that is collapsed so the child nodes are not visible.
-
-

- When using a keyboard to navigate a treegrid, a visual keyboard indicator informs the user which cell is focused. - If the treegrid allows the user to choose just one item for an action, then it is known as a single-select treegrid, and the item with focus also has a selected state. - However, in multi-select treegrids, which enable the user to select more than one item for an action, the selected state is independent of the focus. - For example, in a typical hierarchical e-mail grid, the user can move focus to select any number of e-mails for an action, such as delete or move. + When using a keyboard to navigate a treegrid, a visual keyboard indicator informs the user which row or cell is focused. + If the treegrid allows the user to choose just one item for an action, then it is known as a single-select treegrid, and the item with focus also has a selected state. + However, in multi-select treegrids, which enable the user to select more than one row or cell for an action, the selected state is independent of the focus. + For example, in a hierarchical e-mail discussion grid, the user can move focus to select any number of rows for an action, such as delete or move. It is important that the visual design distinguish between items that are selected and the item that has focus. For more details, see this description of differences between focus and selection.

@@ -2786,143 +2762,132 @@

Treegrid

Examples

+ +
+

Keyboard Interaction For Data Grids

+

+ The following keys provide treegrid navigation by moving focus among rows and cells of the grid. + Implementations of treegrid make these key commands available when an element in the grid has received focus, e.g., after a user has moved focus to the grid with Tab. Moving focus into the grid may result in the first cell or the first row being focused. Whether focus goes to a cell or the row depends on author preferences and whether row focus is supported, since some treegrids may not provide focus to rows. +

+
    +
  • + Enter: If focus is on a row or cell with the aria-expanded property it will will open or close the child rows, otherwise performs the default action for the cell.
    • +
  • + Tab: If there are focusable elements in the current row (e.g. inputs, buttons, links, ..) focus moves to the next input in the row. If on the last input in the row, focus moves out of the treegrid widget to the next focusable control on the page.
    • +
  • + Right Arrow: +
      +
    • If focus is on a row, focus moves to the first cell in the row. (e.g. row focus supported)
      • +
    • If focus is on the right-most cell in the row, focus does not move.
      • +
    • If focus is on any other cell, focus one cell to the right.
      • +
    +
    • +
  • Left Arrow: +
      +
    • If focus is on a row, focus does not move. (e.g. row focus supported)
      • +
    • If focus is on a first cell in the row and row focus is supported, focus moves to the row.
      • +
    • If focus is on a first cell in the row and row focus is not supported,focus does not move.
      • +
    • If focus is on a any other cell, focus one cell to the left.
      • +
    +
    • +
  • Down Arrow: Moves focus one cell down. If focus is on the bottom cell in the column, focus does not move.
    • +
  • Up Arrow: Moves focus one cell Up. If focus is on the top cell in the column, focus does not move.
    • +
  • Page Down: Moves focus down an author-determined number of rows, typically scrolling so the bottom row in the currently visible set of rows becomes one of the first visible rows. If focus is in the last row of the grid, focus does not move.
    • +
  • Page Up: Moves focus up an author-determined number of rows, typically scrolling so the top row in the currently visible set of rows becomes one of the last visible rows. If focus is in the first row of the grid, focus does not move.
    • +
  • Home: moves focus to the first cell in the row that contains focus.
    • +
  • End: moves focus to the last cell in the row that contains focus.
    • +
  • Control + Home: moves focus to the first cell in the first row.
    • +
  • Control + End: moves focus to the last cell in the last row.
    • +
+
    +
  • + When the above treegrid navigation keys move focus, whether the focus is set on an element inside the cell or the grid cell depends on cell content. + See Whether to Focus on a Cell or an Element Inside It. +
    • +
  • + While navigation keys, such as arrow keys, are moving focus from cell to cell, they are not available to do something like operate a combobox or move an editing caret inside of a cell. + If this functionality is needed, see Editing and Navigating Inside a Cell. +
    • +
  • If navigation functions can dynamically add more rows or columns to the DOM, key events that move focus to the beginning or end of the grid, such as control + End, may move focus to the last row in the DOM rather than the last available row in the back-end data.
    • +
+

If a grid supports selection of cells, rows, or columns, the following keys are commonly used for these functions.

+
    +
  • Control + Space: selects the column that contains the focus.
    • +
  • Shift + Space: Selects the row that contains the focus. If the grid includes a column with checkboxes for selecting rows, this key can serve as a shortcut for checking the box when focus is not on the checkbox.
    • +
  • Control + A: Selects all cells.
    • +
  • Shift + Right Arrow: Extends selection one cell to the right.
    • +
  • Shift + Left Arrow: Extends selection one cell to the left.
    • +
  • Shift + Down Arrow: Extends selection one cell down.
    • +
  • Shift + Up Arrow: Extends selection one cell Up.
    • +
+

See for cut, copy, and paste key assignments.

+
-
-

Keyboard Interaction

+
+

WAI-ARIA Roles, States, and Properties

    -
  • When a single-select tree receives focus: -
      -
    • If none of the nodes are selected before the tree receives focus, focus is set on the first node.
      • -
    • If a node is selected before the tree receives focus, focus is set on the selected node.
      • -
    -
    • -
  • When a multi-select tree receives focus: +
  • 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 cell is either a DOM descendant of or owned by a row element and has one of the following roles:
      -
    • If none of the nodes are selected before the tree receives focus, focus is set on the first node.
      • -
    • If one or more nodes are selected before the tree receives focus, focus is set on the first selected node.
      • +
    • 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.
      • +
    • gridcell if the cell does not contain column or row header information.
    • -
  • Right arrow: -
      -
    • When focus is on a closed node, opens the node; focus does not move.
      • -
    • When focus is on a open node, moves focus to the first child node.
      • -
    • When focus is on an end node, does nothing.
      • -
    -
    • -
  • Left arrow: -
      -
    • When focus is on an open node, closes the node.
      • -
    • When focus is on a child node that is also either an end node or a closed node, moves focus to its parent node.
      • -
    • When focus is on a root node that is also either an end node or a closed node, does nothing.
      • -
    -
    • -
  • Down Arrow: Moves focus to the next node that is focusable without opening or closing a node.
    • -
  • Up Arrow: Moves focus to the previous node that is focusable without opening or closing a node.
    • -
  • Home: Moves focus to the first node in the tree without opening or closing a node.
    • -
  • End: Moves focus to the last node in the tree that is focusable without opening a node.
    • -
  • Enter: activates a node, i.e., performs its default action. For parent nodes, one possible default action is to open or close the node. In single-select trees where selection does not follow focus (see note below), the default action is typically to select the focused node.
    • -
  • Type-ahead is recommended for all trees, especially for trees with more than 7 root nodes: -
      -
    • Type a character: focus moves to the next node with a name that starts with the typed character.
      • -
    • Type multiple characters in rapid succession: focus moves to the next node with a name that starts with the string of characters typed.
      • -
    +
  • + Each row with the aria-expanded state or that contains a gridcell with the aria-expanded state identifies the row as a parent row. + Set to aria-expanded to false when the child rows are in a closed state and set to true when the child rows are in an open state. + End rows cannot have the aria-expanded attribute because, if they were to have it, they would be incorrectly described to assistive technologies as parent nodes.
    • -
  • * (Optional): Expands all siblings that are at the same level as the current node.
    • -
  • Selection in multi-select trees: - Authors may implement either of two interaction models to support multiple selection: a recommended model that does not require the user to hold a modifier key, such as Shift or Control, while navigating the list - or an alternative model that does require modifier keys to be held while navigating in order to avoid losing selection states. -
      -
    • Recommended selection model -- holding a modifier key while moving focus is not necessary: -
        -
      • Space: Toggles the selection state of the focused node.
        • -
      • Shift + Down Arrow (Optional): Moves focus to and toggles the selection state of the next node.
        • -
      • Shift + Up Arrow (Optional): Moves focus to and toggles the selection state of the previous node.
        • -
      • Shift + Space (Optional): Selects contiguous nodes from the last selected node to the current node.
        • -
      • Control + Shift + Home (Optional): Selects the node with focus and all nodes up to the first node.
        • -
      • Control + Shift + End (Optional): Selects the node with focus and all nodes down to the last node.
        • -
      • Control + A (Optional): Selects all nodes in the tree. Optionally, if all nodes are selected, it can also unselect all nodes.
        • -
      -
      • -
    • Alternative selection model -- Moving focus without holding the Shift or Control modifier unselects all selected nodes except for the focused node: -
        -
      • Shift + Down Arrow: Moves focus to and toggles the selection state of the next node.
        • -
      • Shift + Up Arrow: Moves focus to and toggles the selection state of the previous node.
        • -
      • Control + Down Arrow: Without changing the selection state, moves focus to the next node.
        • -
      • Control + Up Arrow: Without changing the selection state, moves focus to the previous node.
        • -
      • Control + Space: Toggles the selection state of the focused node.
        • -
      • Shift + Space (Optional): Selects contiguous nodes from the most recently selected node to the current node.
        • -
      • Control + Shift + Home (Optional): Selects the node with focus and all nodes up to the first node.
        • -
      • Control + Shift + End (Optional): Selects the node with focus and all nodes down to the last node.
        • -
      • Control + A (Optional): Selects all nodes in the tree. Optionally, if all nodes are selected, it can also unselect all nodes.
        • -
      -
      • -
    +
  • If the treegrid supports selection of more than one row or cell, the element with role treegrid has aria-multiselectable set to true. Otherwise, aria-multiselectable is either set to false or the default value of false is implied.
    • +
  • If the treegrid does not support multiple selection, aria-selected is set to true for the selected row or cell and it is not present on any other row or cell in the treegrid.
    • +
  • if the treegrid supports multiple selection: +
      +
    • All selected rows or cells have aria-selected set to true.
      • +
    • All rows and cells that are not selected have aria-selected set to false.
      • +
    • -
-
    -
  1. DOM focus (the active element) is functionally distinct from the selected state. For more details, see this description of differences between focus and selection.
  2. - The tree role supports the aria-activedescendant property, - which provides an alternative to moving DOM focus among treeitem elements when implementing keyboard navigation. - For details, see Managing Focus in Composites Using aria-activedescendant. + If there is an element in the user interface that serves as a label for the treegrid, aria-labelledby is set on the grid element with a value that refers to the labeling element. + Otherwise, a label is specified for the grid element using aria-label.
    3. +
  3. If the treegrid has a caption or description, aria-describedby is set on the grid element with a value referring to the element containing the description.
    4. +
  4. If the treegrid provides sort functions, aria-sort is set to an appropriate value on the header cell element for the sorted column or row as described in the section on grid and table properties.
    5. +
  5. If the treegrid supports selection, when a cell or row is selected, the selected element has aria-selected set true.
  6. - In a single-select tree, moving focus may optionally unselect the previously selected node and select the newly focused node. - This model of selection is known as "selection follows focus". - Having selection follow focus can be very helpful in some circumstances and can severely degrade accessibility in others. - For additional guidance, see Deciding When to Make Selection Automatically Follow Focus. + If the treegrid provides content editing functionality and contains cells that may have edit capabilities disabled in certain conditions, aria-readonly may be set true on cells where editing is disabled. + If edit functions are disabled for all cells, aria-readonly may be set true on the grid element. + Grids that do not provide editing functions do not include the aria-readonly attribute on any of their elements.
    7. -
  7. If selecting or unselecting all nodes is an important function, implementing separate controls for these actions, such as buttons for "Select All" and "Unselect All", significantly improves accessibility.
    8. -
  8. - If the nodes in a tree are arranged horizontally: -
      -
    1. Down Arrow performs as Right Arrow is described above, and vice versa.
      2. -
    2. Up Arrow performs as Left Arrow is described above, and vice versa.
      3. -
    +
  9. + If there are conditions where some rows or columns are hidden or not present in the DOM, e.g., data is dynamically loaded when scrolling or the grid provides functions for hiding rows or columns, the following properties are applied as described in the section on grid and table properties. +
    10. -
-
+
  • If the treegrid includes cells that span multiple rows or multiple columns, and if the treegrid role is NOT applied to an HTML table element, then aria-rowspan or aria-colspan is applied as described in grid and table properties.
    • + -
    -

    WAI-ARIA Roles, States, and Properties

    -
      -
    • All tree nodes are contained in or owned by an element with role tree.
      • -
    • Each element serving as a tree node has role treeitem.
      • -
    • Each root node is contained in the element with role tree or referenced by an aria-owns property set on the tree element.
      • -
    • Each parent node contains or owns an element with role group.
      • -
    • Each child node is contained in or owned by an element with role group that is contained in or owned by the node that serves as the parent of that child.
      • +
      • - Each element with role treeitem that serves as a parent node has aria-expanded - set to false when the node is in a closed state and set to true when the node is in an open state. - End nodes do not have the aria-expanded attribute because, if they were to have it, they would be incorrectly described to assistive technologies as parent nodes. -
        • -
      • If the tree supports selection of more than one node, the element with role tree has aria-multiselectable set to true. Otherwise, aria-multiselectable is either set to false or the default value of false is implied.
        • -
      • If the tree does not support multiple selection, aria-selected is set to true for the selected node and it is not present on any other node in the tree.
        • -
      • if the tree supports multiple selection: - + If the element with the treegrid role is an HTML table element, then it is not necessary to use ARIA roles for rows and cells because the HTML elements have implied ARIA semantics. + For example, an HTML <TR> has an implied ARIA role of row. + A treegrid built from an HTML table that includes cells that span multiple rows or columns must use HTML rowspan and colspan and must not use aria-rowspan or aria-colspan.
        • -
      • The element with role tree has either a visible label referenced by aria-labelledby or a value specified for aria-label.
        • -
      • If the complete set of available nodes is not present in the DOM due to dynamic loading as the user moves focus in or scrolls the tree, each node has aria-level, aria-setsize, and aria-posinset specified.
      • - If the tree element is horizontally oriented, it has aria-orientation - set to horizontal. - The default value of aria-orientation for a tree is vertical. + If rows or cells are included in a treegrid via aria-owns, + they will be presented to assistive technologies after the DOM descendants of the treegrid element unless the DOM descendants are also included in the aria-owns attribute.
      -

      - If aria-owns is set on the tree container to include elements that are not DOM children of the container, - those elements will appear in the reading order in the sequence they are referenced and after any items that are DOM children. - Scripts that manage focus need to ensure the visual focus order matches this assistive technology reading order. -

    -
    + +

    Window Splitter

    From 25264ea9ea4574498ca3cff7637780d4a102853a Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Thu, 14 Jun 2018 15:17:09 -0500 Subject: [PATCH 3/5] initial draft of treegrid design pattern --- aria-practices.html | 110 ++++++++++++++++++++++++++++++++++++++------ 1 file changed, 96 insertions(+), 14 deletions(-) diff --git a/aria-practices.html b/aria-practices.html index 0beb7a2fa2..3c893371cf 100644 --- a/aria-practices.html +++ b/aria-practices.html @@ -2793,14 +2793,60 @@

    Keyboard Interaction For Data Grids

  • If focus is on a any other cell, focus one cell to the left.
    • -
  • Down Arrow: Moves focus one cell down. If focus is on the bottom cell in the column, focus does not move.
    • -
  • Up Arrow: Moves focus one cell Up. If focus is on the top cell in the column, focus does not move.
    • -
  • Page Down: Moves focus down an author-determined number of rows, typically scrolling so the bottom row in the currently visible set of rows becomes one of the first visible rows. If focus is in the last row of the grid, focus does not move.
    • -
  • Page Up: Moves focus up an author-determined number of rows, typically scrolling so the top row in the currently visible set of rows becomes one of the last visible rows. If focus is in the first row of the grid, focus does not move.
    • -
  • Home: moves focus to the first cell in the row that contains focus.
    • -
  • End: moves focus to the last cell in the row that contains focus.
    • -
  • Control + Home: moves focus to the first cell in the first row.
    • -
  • Control + End: moves focus to the last cell in the last row.
    • +
  • + Down Arrow: +
      +
    • If focus is on a row, moves focus one row down. If focus is on the last row, focus does not move.
      • +
    • If focus is on a cell, moves focus one cell down. If focus is on the bottom cell in the column, focus does not move.
      • +
    +
  • + Up Arrow: +
      +
    • If focus is on a row, moves focus one row up. If focus is on the first row, focus does not move.
      • +
    • If focus is on a cell, moves focus one cell up. If focus is on the top cell in the column, focus does not move.
      • +
    +
  • + Page Down: +
      +
    • If focus is on a row, moves focus down an author-determined number of rows, typically scrolling so the bottom row in the currently visible set of rows becomes one of the first visible rows. If focus is in the last row of the grid, focus does not move.
      • +
    • If focus is on a cell, moves focus down an author-determined number of cells, typically scrolling so the bottom row in the currently visible set of rows becomes one of the first visible rows. If focus is in the last row of the grid, focus does not move.
      • +
    +
    • +
  • + Page Up: +
      +
    • If focus is on a row, moves focus up an author-determined number of rows, typically scrolling so the top row in the currently visible set of rows becomes one of the last visible rows. If focus is in the first row of the grid, focus does not move.
      • +
    • If focus is on a cell, moves focus up an author-determined number of cells, typically scrolling so the top row in the currently visible set of rows becomes one of the last visible rows. If focus is in the first row of the grid, focus does not move.
      • +
    +
    • +
  • + Home: +
      +
    • If focus is on a row, moves focus up to the first row. If focus is in the first row of the grid, focus does not move.
      • +
    • If focus is on a cell, moves focus to the first cell in the row. If focus is in the first cell of the row, focus does not move.
      • +
    +
    • +
  • + End: +
      +
    • If focus is on a row, moves focus to the last row. If focus is in the last row of the grid, focus does not move.
      • +
    • If focus is on a cell, moves focus to the last cell in the row. If focus is in the last cell of the row, focus does not move.
      • +
    +
    • +
  • + Control + Home: +
      +
    • If focus is on a row, moves focus up to the first row. If focus is in the first row of the grid, focus does not move.
      • +
    • If focus is on a cell, moves focus to the first cell in the column. If focus is in the first row of the grid, focus does not move.
      • +
    +
    • +
  • + Control + End: +
      +
    • If focus is on a row, moves focus to the last row. If focus is in the last row of the grid, focus does not move.
      • +
    • If focus is on a cell, moves focus to the last cell in the column. If focus is in the last row of the grid, focus does not move.
      • +
    +
    • @@ -2815,13 +2861,49 @@

      Keyboard Interaction For Data Grids

    If a grid supports selection of cells, rows, or columns, the following keys are commonly used for these functions.

      -
    • Control + Space: selects the column that contains the focus.
      • -
    • Shift + Space: Selects the row that contains the focus. If the grid includes a column with checkboxes for selecting rows, this key can serve as a shortcut for checking the box when focus is not on the checkbox.
      • +
    • + Control + Space: +
        +
      • If focus on a row, selects all cells.
        • +
      • If focus is on a call, selects the column that contains the focus.
        • +
      +
      • +
    • + Shift + Space: +
        +
      • If focus on a row, no change in selection.
        • +
      • If focus on a cell, selects the row that contains the focus. If the grid includes a column with checkboxes for selecting rows, this key can serve as a shortcut for checking the box when focus is not on the checkbox.
        • +
      +
    • Control + A: Selects all cells.
      • -
    • Shift + Right Arrow: Extends selection one cell to the right.
      • -
    • Shift + Left Arrow: Extends selection one cell to the left.
      • -
    • Shift + Down Arrow: Extends selection one cell down.
      • -
    • Shift + Up Arrow: Extends selection one cell Up.
      • +
    • + Shift + Right Arrow: +
        +
      • If focus on a row, no change in selection.
        • +
      • if focus on a cell, extends selection one cell to the right.
        • +
      +
      • +
    • + Shift + Left Arrow: +
        +
      • If focus on a row, no change in selection.
        • +
      • if focus on a cell, extends selection one cell to the left.
        • +
      +
      • +
    • + Shift + Down Arrow: +
        +
      • If focus on a row, extends selection to all the cells in the next row.
        • +
      • If focus on a cell, extends selection one cell down.
        • +
      +
      • +
    • + Shift + Up Arrow: +
        +
      • If focus on a row, extends selection to all the cells in the previous row.
        • +
      • If focus on a cell, extends selection one cell up.
        • +
      +

    See for cut, copy, and paste key assignments.

    From d5a846059a549e209fb3a33a0e61c8b075e9ac6e Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Thu, 14 Jun 2018 15:18:34 -0500 Subject: [PATCH 4/5] initial draft of treegrid design pattern --- aria-practices.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aria-practices.html b/aria-practices.html index 3c893371cf..89023bde1c 100644 --- a/aria-practices.html +++ b/aria-practices.html @@ -2735,7 +2735,7 @@

    WAI-ARIA Roles, States, and Properties

    -
    +

    Treegrid

    A treegrid widget presents a hierarchical data grid consisting of tabular information that is editable or interactive. From 9dfba29d5fbf2ae8f3cc2b288f6c77aef0492f2d Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Fri, 15 Jun 2018 20:18:59 -0500 Subject: [PATCH 5/5] updated keyboard support section --- aria-practices.html | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/aria-practices.html b/aria-practices.html index 89023bde1c..c6d173c1a3 100644 --- a/aria-practices.html +++ b/aria-practices.html @@ -2774,20 +2774,22 @@

    Keyboard Interaction For Data Grids

    • - Enter: If focus is on a row or cell with the aria-expanded property it will will open or close the child rows, otherwise performs the default action for the cell.
      • + Enter: If cell only focus is enabled and focus is on the first cell with the aria-expanded property it will will open or close the child rows, otherwise performs the default action for the cell.
    • Tab: If there are focusable elements in the current row (e.g. inputs, buttons, links, ..) focus moves to the next input in the row. If on the last input in the row, focus moves out of the treegrid widget to the next focusable control on the page.
    • Right Arrow:
        -
      • If focus is on a row, focus moves to the first cell in the row. (e.g. row focus supported)
        • +
      • If focus is on a row and the row is expandable, but not expanded, the row is expanded.
        • +
      • If focus is on a row and the row is not expandable or is expanded, focus moves to the first cell in the row.
      • If focus is on the right-most cell in the row, focus does not move.
      • If focus is on any other cell, focus one cell to the right.
    • Left Arrow:
        -
      • If focus is on a row, focus does not move. (e.g. row focus supported)
        • +
      • If focus is on a row and the row is expanded, the row is collapsed.
        • +
      • If focus is on a row and the row is not expandable or is collapsed, focus does not move.
      • If focus is on a first cell in the row and row focus is supported, focus moves to the row.
      • If focus is on a first cell in the row and row focus is not supported,focus does not move.
      • If focus is on a any other cell, focus one cell to the left.