From 63cf9811c1d674a465c4fbb1c7cec66175323f26 Mon Sep 17 00:00:00 2001 From: Matt King Date: Sun, 12 Feb 2017 22:04:58 -0800 Subject: [PATCH] Revise features, keyboard, and states/properties for Navigation Treeview Example Using Declared Properties For issue #226, modified examples/treeview/treeview-2/treeview-2b.html: * Under accessibility features, removed redundant information about computed level, setsize, and posinset. * Under accessibility features, removed incorrect statement: "The expandable treeitem widgets cannot behave as links, their only action can be to open and close a leaf in the tree." * Added section summarizing treeview terminology with link to the pattern. * Corrected action defined for enter and space (had the action from the file tree example). * Revisions for editorial consistency to keyboard table. * Updated states/properties section header. * For the tree element, corrected row for label. It specified aria-label instead of aria-labelledby. * Revisions for editorial consistency to states and properties table. --- examples/treeview/treeview-2/treeview-2b.html | 327 +++++++++--------- 1 file changed, 168 insertions(+), 159 deletions(-) diff --git a/examples/treeview/treeview-2/treeview-2b.html b/examples/treeview/treeview-2/treeview-2b.html index 688eabdb6c..3dcbcb4dee 100644 --- a/examples/treeview/treeview-2/treeview-2b.html +++ b/examples/treeview/treeview-2/treeview-2b.html @@ -467,124 +467,118 @@

Foods

- +
-

Accessibility Features

- - +

+ The expandable nodes (parent items) in the tree have a custom focus and hover styling created using CSS focus and hover classes. + To do this, focus, blur, mouseover, and mouseout events trigger application of classes to the span element that contains the visible label of the treeitem. +

+
+ +
+

Terms Used to Describe Trees

+

+ A tree item that can be expanded to reveal child items is called a parrent node. + It is a closed node when the children are hidden and an open node when it is expanded. + An end node does not have any children. + For a complete list of terms and definitions, see the + Treeview Design Pattern. +

Keyboard Support

- - - - - - - - - - - + + + + + + + + + - - - - + + + - - - - - - - - - - - - + + + - - - - + + + - - - - + + + - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + +
KeyFunction
Up arrow +
KeyFunction
Enter
or Space
    -
  • Moves focus to previous visible sibling treeitem using a depth first algorithm on the visible treeitems. If on first treeitem, focus stays on first treeitem.
    • +
  • Performs the default action (e.g. onclick event) for the focused node.
    • +
  • In this example, the default action is to activate the link, opening its target page.
Down arrow +
Down arrow
    -
  • Moves focus to next visible sibling treeitem using a depth first algorithm on the visible treeitems. If on last treeitem, focus stays on the last treeitem.
    • +
  • Moves focus to the next node that is focusable without opening or closing a node.
    • +
  • If focus is on the last node, does nothing.
Left Arrow -
    -
  • For a treeitem that is an end node (e.g. no child treeitems) or is in the collapsed state (e.g. has [aria-expanded=false]), focus moves to the parent treeitem. - If a top level treeitem (e.g. parent is tree), focus stays on current treeitem. -
    • -
  • For a treeitem that is in the expanded state (e.g. has [aria-expanded=true]) it toogles to the collapsed state. Focus remains on the current treeitem.
    • -
-
Right Arrow -
    -
  • For a treeitem that is an end node (e.g. no child treeitems) focus stays on current treeitem.
    • -
  • For a treeitem that is in the collapsed state (e.g. has [aria-expanded=false]) it toogles to the expanded state and focus moves to the first child treeitem. If no child, focus stays on current treeitem.
    • -
  • For a treeitem is in the expanded state, focus moves to the first child treeitem. - If no child, focus stays on current treeitem. -
    • -
-
Return -
    -
  • Performs the default action (e.g. onclick event) on the current treeitem, in this example updating the "File or Folder Selected" textbox.
    • -
+
Up arrow +
    +
  • Moves focus to the previous node that is focusable without opening or closing a node.
    • +
  • If focus is on the first node, does nothing.
    • +
Space +
Right Arrow
    -
  • Performs the default action (e.g. onclick event) on the current treeitem, in this example updating the "File or Folder Selected" textbox.
    • +
  • 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.
Home -
    -
  • Moves focus to first treeitem in the tree.
    • -
+
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.
    • +
End -
    -
  • Moves focus to last visible treeitem (e.g. depth first) in the tree.
    • -
-
a-z, A-Z -
    -
  • Moves focus to next visible treeitem that starts with letter character.
    • -
  • Search wraps to first treeitem if not found after current treeitem.
    • -
-
* -
    -
  • Opens all the expandable treeitems in the current leaf (e.g. siblings of the current treeitem), keyboard focus does not change.
    • -
-
HomeMoves focus to first node.
EndMoves focus to the last node that can be focused without expanding any nodes that are closed.
a-z, A-Z +
    +
  • Focus moves to the next node with a name that starts with the typed character.
    • +
  • Search wraps to first node if a matching name is not found among the nodes that follow the focused node.
    • +
  • Search ignores nodes that are descendants of closed nodes.
    • +
+
+ * + +
    +
  • Expands all closed sibling nodes that are at the same level as the focused node.
    • +
  • Focus does not move.
    • +
+
- +
-

ARIA Roles, Properties and States

- +

Role, Property, State, and Tabindex Attributes

@@ -601,68 +595,75 @@

ARIA Roles, Properties and States

- + - + - + - + - + - + - + @@ -672,8 +673,9 @@

ARIA Roles, Properties and States

@@ -682,63 +684,70 @@

ARIA Roles, Properties and States

- + + + + + + + - - + + + - - + + + + + + + - - - - - -
ul
    -
  • The role="tree" attribute identifies the ul element as an ARIA tree widget.
    • -
  • Accessible name for the tree widget comes from aria-label attribute.
    • -
  • The tree widget does not need a tabindex value, since the ul[role"tree"] element never receives keyboard focus.
    • +
  • Identifies the ul element as a tree widget.
    • +
  • A tree is a container widget for focusable, interactive treeitem elements.
    • +
  • + The tree is not made focusable with a tabindex value because a + roving tabindex + is used to control which descendant treeitem receives focus. +
aria-label="string"aria-labelledby="IDREF" ul -
    -
  • Defines an accessible name (e.g. label) for the tree widget.
    • -
  • The accessible name is important to identify the purpose of the tree in the page and uniquely identify the tree widget from other trees on the same page.
    • -
- 		Refers to the heading element that contains the label that identifies the purpose of the tree.
grouptreeitem ulli
or a
    -
  • The role="group" attribute identifies the ul element as a container of treeitem widgets for a sub-leaf of a tree.
    • -
  • The group role is important for the browser to compute aria-level, aria-setsize and aria-posinset.
    • -
  • The group is not required to have an accessible name.
    • -
  • The group widget does not need a tabindex value, since the ul[role"group"] element never receives keyboard focus.
    • +
  • Identifies the element as a treeitem.
    • +
  • The role is set on either the li or on an a element contained in the li.
    • +
  • The role is set on the element that is interactive and focusable: +
      +
    • If the node is a parent node that does not contain a link, the li element has the treeitem role.
      • +
    • If the node is an end node that contains a link, the a element has the treeitem role.
      • +
    +
treeitem aria-label="string" li
    -
  • The role="treeitem" attribute identifies the li element as an ARIA tree widget.
    • -
  • Accessible name for the treeitem widget comes from child text content of the li element or an aria-label attribute.
    • -
+
  • Defines the accessible name for the treeitem.
    • +
  • Applied only to treeitem elements that are parent nodes, i.e., they contain a ul with the group role.
    • +
  • Overrides browser calculation of the name from the elements contained inside of the li element to avoid having a long, confusing name composed of the names of every node in the branch.
    • +
    tabindex="-1"li, ali
    or a
      -
    • Identifies the treeitem as an elememt that can receive keyboard focus, but will not be included in the tab order of the page.
      • -
    • tabindex="-1" is the default value for a treeitem widget.
      • +
    • Makes the element with the treeitem role focusable without including it in the tab sequence of the page.
      • +
    • All treeitem elements are focusable, but only one is included in the tab sequence.
    tabindex="0"li, ali
    or a
      -
    • Only one treeitem in the same tree has a tabindex="0".
      • -
    • Identifies the treeitem that last had keyboard focus.
      • -
    • The default treeitem with tabindex="0" is the first treeitem in the tree.
      • -
    • See roving tabindex for more information.
      • +
    • Includes the element with the treeitem role in the tab sequence.
      • +
    • Only one treeitem in the tree has tabindex="0".
      • +
    • In this implementation, the first treeitem in the tree is included in the tab sequence when the page loads.
      • +
    • + When the user moves focus in the tree, the element included in the tab sequence changes to the element with focus as described in the section on + roving tabindex. +
    li
      -
    • Indicates the treeitem descendants of the current treeitems are not visible (e.g. tree sub-leaf is collapsed).
      • -
    • The visual state of being collapsed is synchronized with aria-expanded value using CSS attribute selector [aria-expanded="false"] with the CSS :before psuedo selector and the CSS content property for displaying an image of the collapsed state.
      • +
    • Applied only to treeitem elements that are parent nodes, i.e., they contain a ul with the group role.
      • +
    • Indicates the parent node is closed, i.e., the descendant elements are not visible.
      • +
    • The visual indication of the collapsed state is synchronized by a CSS attribute selecter.
    aria-expanded="true" li -
      -
    • Indicates the treeitem descendants of the current treeitem widgets are visible e.g. tree sub-leaf is expanded).
      • -
    • The visual state of being expanded is synchronized with aria-expanded value using CSS attribute selector [aria-expanded="true"] with the CSS :before psuedo selector and the CSS content property for displaying an image of the expanded state.
      • +
        +
      • Applied only to treeitem elements that are parent nodes, i.e., they contain a ul with the group role.
        • +
      • Indicates the parent node is open, i.e., the descendant elements are visible.
        • +
      • The visual indication of the expanded state is synchronized by a CSS attribute selecter.
    aria-setsize="number"li, aliDefines the number of treeitem elements in the set of treeitem elements that are in the same branch and at the same level within the hierarchy.
    aria-posinset="number"li
      -
    • aria-setsize is used to indicate the number of treeitems in the current leaf of the tree.
      • -
    • This example explicitly sets the aria-setsize, for each treeitem.
      • -
    • Explicitly setting aria-setsize will override any computed values by the browser.
      • +
    • Defines the position of the element within the set of other treeitem elements that are in the same branch and at the same level within the hierarchy.
      • +
    • Counting is one-based, not zero-based.
    aria-posinset="number"li, aaria-level="number"li
      -
    • aria-posinset is used to indicate the position of treeitems in the current leaf of the tree.
      • -
    • This example explicitly sets the aria-posinset, for each treeitem.
      • -
    • Explicitly setting aria-posinset will override any computed values by the browser.
      • +
    • Defines the level of the treeitem in the hierarchical tree structure.
      • +
    • Counting is one-based.
      • +
    • Root treeitem elements have aria-level=1.
    group aria-level="number"li, aul
      -
    • aria-level is used to indicate the depth of treeitems in the tree structure.
      • -
    • This example explicitly sets the aria-level, for each treeitem.
      • -
    • Explicitly setting aria-level will override any computed values by the browser.
      • +
    • Identifies the ul element as a container of treeitem elements that form a branch of the tree.
      • +
    • The group is contained in the element that serves as the parent treeitem.
      • +
    • Browsers use the grouping to compute aria-level, aria-setsize and aria-posinset values for the nodes contained in the branch.
      • +
    +
    + none + + li + +
      +
    • Hides the implicit listitem role of the li element from assistive technologies.
      • +
    • A listitem is required to be contained by a list, but the containing element is no longer a list; it is a tree or a group.
      • +
    • Removing the listitem semantic from the browser's accessibility tree eliminates the potential for confusing rendering by assistive technologies.
    - none - - li - -
      -
    • Hides li element native role semantics of listiem from assistive technologies.
      • -
    • If native role semantics of the li element are not removed, it could confuse some users of assistive technologies since listitems and treeitems would be interspersed with each other.
      • -
    -