diff --git a/examples/treeview/treeview-1/treeview-1b.html b/examples/treeview/treeview-1/treeview-1b.html index e0d63915e4..fe2f17fbcc 100644 --- a/examples/treeview/treeview-1/treeview-1b.html +++ b/examples/treeview/treeview-1/treeview-1b.html @@ -417,120 +417,119 @@

File Viewer

- -
-

Accessibility Features

- -
+ + +
+

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 update the File or Folder Selected textbox.
-
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 +
Up arrow
    -
  • Performs the default action (e.g. onclick event) on the current treeitem, in this example updating the "File or Folder Selected" textbox.
    • +
  • 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 -
    -
  • Performs the default action (e.g. onclick event) on the current treeitem, in this example updating the "File or Folder Selected" textbox.
    • -
-
Home +
Right Arrow
    -
  • Moves focus to first treeitem in the tree.
    • +
  • 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.
-
End +
Left Arrow
    -
  • Moves focus to last visible treeitem (e.g. depth first) in the tree.
    • +
  • 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.
-
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.
    • -
-
* +
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.
    • +
+
+ * +
    -
  • Opens all the expandable treeitems in the current leaf (e.g. siblings of the current treeitem), keyboard focus does not change.
    • +
  • 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

@@ -547,9 +546,12 @@

ARIA Roles, Properties and States

@@ -558,34 +560,25 @@

ARIA Roles, Properties and States

- + - - + + - + @@ -594,8 +587,8 @@

ARIA Roles, Properties and States

@@ -605,10 +598,13 @@

ARIA Roles, Properties and States

@@ -618,8 +614,9 @@

ARIA Roles, Properties and States

@@ -628,9 +625,10 @@

ARIA Roles, Properties and States

@@ -638,35 +636,40 @@

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 an tree widget.
    • +
  • + Is not made focusable with a tabindex value because a + roving tabindex + is used to control which descendant treeitem receives focus. +
aria-label="string" 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.
    • -
+ Defines an accessible name, i.e., label, that identifies the purpose of the tree.
grouptreeitem ul -
    -
  • 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.
    • -
- 		liIdentifies the element as a treeitem.
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.
    • +
    li
      -
    • 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 treeitem element 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.
    li
      -
    • 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 treeitem element 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" liDefines 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"aria-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"liul
      -
    • 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.