diff --git a/examples/index.html b/examples/index.html index 6ee05ca274..b0dc661f50 100644 --- a/examples/index.html +++ b/examples/index.html @@ -817,6 +817,8 @@

Examples By Properties and States

  • Scrollable Listbox
  • Tabs with Automatic Activation
  • Tabs with Manual Activation
    • +
  • File Directory Treeview Using Computed Properties
    • +
  • File Directory Treeview Using Declared Properties
    • diff --git a/examples/treeview/treeview-1/css/tree.css b/examples/treeview/treeview-1/css/tree.css index b615369e17..19fe295dd0 100644 --- a/examples/treeview/treeview-1/css/tree.css +++ b/examples/treeview/treeview-1/css/tree.css @@ -5,6 +5,20 @@ ul[role="tree"] { font-size: 120%; } +ul[role="tree"] li { + margin: 0; + padding: 0; + list-style: none; +} + +[role="treeitem"][aria-expanded="false"] + [role="group"] { + display: none; +} + +[role="treeitem"][aria-expanded="true"] + [role="group"] { + display: block; +} + [role="treeitem"].doc::before { font-family: "Font Awesome 5 Free"; content: "\f15c"; @@ -45,7 +59,6 @@ ul[role="tree"] { width: 9em; margin: 0; padding: 0.125em; - border: 2px transparent solid; display: block; } @@ -55,6 +68,11 @@ ul[role="tree"] { outline: 0; } +[role="treeitem"][aria-selected="true"] { + padding-left: 4px; + border-left: 5px solid #005a9c; +} + [role="treeitem"].focus, [role="treeitem"] span.focus { border-color: black; @@ -63,5 +81,7 @@ ul[role="tree"] { [role="treeitem"].hover, [role="treeitem"] span:hover { + padding-left: 4px; background-color: #ddd; + border-left: 5px solid #333; } diff --git a/examples/treeview/treeview-1/js/tree.js b/examples/treeview/treeview-1/js/tree.js index e1caec4d06..7609da941d 100644 --- a/examples/treeview/treeview-1/js/tree.js +++ b/examples/treeview/treeview-1/js/tree.js @@ -52,6 +52,7 @@ var Tree = function (node) { this.firstTreeitem = null; this.lastTreeitem = null; + this.selectedItem = null; }; Tree.prototype.init = function () { @@ -87,6 +88,14 @@ Tree.prototype.init = function () { this.firstTreeitem.domNode.tabIndex = 0; }; +Tree.prototype.setSelectedToItem = function (treeitem) { + if (this.selectedItem) { + this.selectedItem.domNode.setAttribute('aria-selected', 'false'); + } + treeitem.domNode.setAttribute('aria-selected', 'true'); + this.selectedItem = treeitem; +}; + Tree.prototype.setFocusToItem = function (treeitem) { for (var i = 0; i < this.treeitems.length; i++) { var ti = this.treeitems[i]; diff --git a/examples/treeview/treeview-1/js/treeitem.js b/examples/treeview/treeview-1/js/treeitem.js index 1f1a348b65..4a8f7564d6 100644 --- a/examples/treeview/treeview-1/js/treeitem.js +++ b/examples/treeview/treeview-1/js/treeitem.js @@ -100,10 +100,8 @@ Treeitem.prototype.isExpanded = function () { /* EVENT HANDLERS */ Treeitem.prototype.handleKeydown = function (event) { - var tgt = event.currentTarget, - flag = false, - char = event.key, - clickEvent; + var flag = false, + char = event.key; function isPrintableCharacter(str) { return str.length === 1 && str.match(/\S/); @@ -131,16 +129,18 @@ Treeitem.prototype.handleKeydown = function (event) { } } else { switch (event.keyCode) { - case this.keyCode.SPACE: case this.keyCode.RETURN: - // Create simulated mouse event to mimic the behavior of ATs - // and let the event handler handleClick do the housekeeping. - clickEvent = new MouseEvent('click', { - view: window, - bubbles: true, - cancelable: true, - }); - tgt.dispatchEvent(clickEvent); + case this.keyCode.SPACE: + var treeitem = event.currentTarget; + var label = treeitem.getAttribute('aria-label'); + if (!label) { + var child = treeitem.firstElementChild; + label = child ? child.innerText : treeitem.innerText; + } + document.getElementById('last_action').value = label.trim(); + + if (!this.isExpandable) this.tree.setFocusToItem(this); + this.tree.setSelectedToItem(this); flag = true; break; @@ -212,6 +212,7 @@ Treeitem.prototype.handleClick = function (event) { } else { this.tree.setFocusToItem(this); } + this.tree.setSelectedToItem(this); }; Treeitem.prototype.handleFocus = function () { diff --git a/examples/treeview/treeview-1/treeview-1a.html b/examples/treeview/treeview-1/treeview-1a.html index df94dc2a0d..bcc379c240 100644 --- a/examples/treeview/treeview-1/treeview-1a.html +++ b/examples/treeview/treeview-1/treeview-1a.html @@ -33,87 +33,92 @@

    File Directory Treeview Example Using Computed Properties

    - The below example implements the - Treeview Design Pattern - to simulate a file selector. - When users activate an item that represents a file name in the below tree, the name of the selected file appears in the read-only edit field next to the tree. + The following example implementation of the + Tree View Design Pattern + simulates a widget for selecting a file or folder from within a hierarchical file system for viewing in a file viewer. + In the My Documents tree, each parent node represents a folder and each end node represents a file. + Activating a node selects the node and puts the name of the folder or file in the read-only edit field that represents the file viewer.

    This example relies on the browser to compute values for aria-setsize, aria-posinset, and aria-level. - The ARIA 1.0 specification for these properties states that browsers can, but are not required to, compute their values. + The ARIA specification for these properties states that browsers can, but are not required to, compute their values. So, some browser and assistive technology combinations may not compute or report correct position and level information if it is not explicitly declared. If testing reveals gaps in support for these properties, override automatic computation by explicitly declaring their values as demonstrated in the example of a File Directory Treeview using declared properties. -

    +

    Similar examples include:

    -
    -
    -

    Example

    -
    + +
    +
    +

    Example

    +
    -

    - File Viewer +

    + My Documents

    - +

    @@ -260,7 +273,7 @@

    Accessibility Features

    - To make the focus indicator easier to see, nodes in the tree have a custom focus and hover styling created using CSS focus and hover pseudo-classes. + To make the focus indicator easier to see, nodes in the tree have custom focus and hover styling created using CSS focus and hover pseudo-classes.

    @@ -277,6 +290,11 @@

    Terms Used to Describe Trees

    Keyboard Support

    +

    + Note that in this example, selection and focus are distinct; moving focus does not change which node is selected. + Because selection does not follow focus, keyboard and screen reader users can navigate and explore the tree without changing the content of the file viewer. + To learn more about this aspect of the design, read the guidance section about Deciding When to Make Selection Automatically Follow Focus. +

    @@ -285,14 +303,13 @@

    Keyboard Support

    - - - + + + + + + + @@ -363,7 +380,7 @@

    Keyboard Support
    Enter
    or Space    		 -
      -
    • 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.
      • -
    -
    EnterPerforms the default action, which is to select the node, causing the name of the node to appear in the File or Folder Selected textbox.
    SpacePerforms the default action, which is to select the node, causing the name of the node to appear in the File or Folder Selected textbox.
    Down arrow
    -
    +

    Role, Property, State, and Tabindex Attributes

    @@ -394,7 +411,7 @@

    Role, Property, State, and Tabindex Attributes

    - aria-labelledby="IDREF" + aria-labelledby="ID_REFERENCE" ul Refers to the heading element that contains the label that identifies the purpose of the tree. @@ -406,7 +423,7 @@

    Role, Property, State, and Tabindex Attributes

    - tabindex="-1" + tabindex="-1" li
      @@ -417,12 +434,12 @@

      Role, Property, State, and Tabindex Attributes

      - tabindex="0" + tabindex="0" li
      • Includes the treeitem element in the tab sequence.
        • -
      • Only one treeitem in the tree has tabindex="0".
        • +
      • 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 @@ -433,7 +450,7 @@

        Role, Property, State, and Tabindex Attributes

        - aria-expanded="false" + aria-expanded="false" li
          @@ -445,7 +462,7 @@

          Role, Property, State, and Tabindex Attributes

          - aria-expanded="true" + aria-expanded="true" li
            @@ -455,6 +472,28 @@

            Role, Property, State, and Tabindex Attributes

          + + + aria-selected="false" + li + +
            +
          • Applied to treeitem elements.
            • +
          • Indicates the file or folder for the item is not currently selected.
            • +
          + + + + + aria-selected="true" + li + +
            +
          • Applied to treeitem elements.
            • +
          • Indicates the file or folder for the item is currently selected.
            • +
          + + group @@ -464,15 +503,15 @@

          Role, Property, State, and Tabindex Attributes

        • 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.
          • +
        • The grouping also prevents browsers from including the content of the nodes in the group in the accessible name for the parent node.
        -
    -
    +

    Javascript and CSS Source Code

    • diff --git a/examples/treeview/treeview-1/treeview-1b.html b/examples/treeview/treeview-1/treeview-1b.html index 4cc681a4fd..36e2b55fcc 100644 --- a/examples/treeview/treeview-1/treeview-1b.html +++ b/examples/treeview/treeview-1/treeview-1b.html @@ -12,6 +12,9 @@ + + @@ -28,15 +31,16 @@

      File Directory Treeview Example Using Declared Properties

      - The below example implements the - Treeview Design Pattern - to simulate a file selector. - When users activate an item that represents a file name in the below tree, the name of the selected file appears in the read-only edit field next to the tree. + The following example implementation of the + Tree View Design Pattern + simulates a widget for selecting a file or folder from within a hierarchical file system for viewing in a file viewer. + In the My Documents tree, each parent node represents a folder and each end node represents a file. + Activating a node selects the node and puts the name of the folder or file in the read-only edit field that represents the file viewer.

      The code in this example explicitly declares values for aria-setsize, aria-posinset and aria-level, which overrides browser computation of values for these properties. - The ARIA 1.0 specification for these properties states that browsers can, but are not required to, compute these values. -

      + The ARIA specification for these properties states that browsers can, but are not required to, compute these values. +

      Similar examples include:

      • File Directory Treeview using computed properties
        • @@ -48,369 +52,414 @@

        Example

        -

        File Viewer

        -
          - - - -
        -

        +

        My Documents

        +
          + + + +
        +

    @@ -418,7 +467,7 @@

    File Viewer

    Accessibility Features

    - To make the focus indicator easier to see, nodes in the tree have a custom focus and hover styling created using CSS focus and hover pseudo-classes. + To make the focus indicator easier to see, nodes in the tree have custom focus and hover styling created using CSS focus and hover pseudo-classes.

    @@ -435,6 +484,11 @@

    Terms Used to Describe Trees

    Keyboard Support

    +

    + Note that in this example, selection and focus are distinct; moving focus does not change which node is selected. + Because selection does not follow focus, keyboard and screen reader users can navigate and explore the tree without changing the content of the file viewer. + To learn more about this aspect of the design, read the guidance section about Deciding When to Make Selection Automatically Follow Focus. +

    @@ -443,14 +497,13 @@

    Keyboard Support

    - - - + + + + + + + @@ -552,7 +605,7 @@

    Role, Property, State, and Tabindex Attributes

    - + @@ -564,7 +617,7 @@

    Role, Property, State, and Tabindex Attributes

    - + - + - + - + + + + + + + + + + + + + - + - + - + @@ -650,16 +725,16 @@

    Role, Property, State, and Tabindex Attributes

    • 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.
      • +
    • Browsers use the grouping to compute aria-level, aria-setsize and aria-posinset values for the nodes contained in the branch if those properties are not specified explicitly in the code.
      • +
    • The grouping also prevents browsers from including the content of the nodes in the group in the accessible name for the parent node.
    Enter
    or Space    		 -
      -
    • 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.
      • -
    -
    EnterPerforms the default action, which is to select the node, causing the name of the node to appear in the File or Folder Selected textbox.
    SpacePerforms the default action, which is to select the node, causing the name of the node to appear in the File or Folder Selected textbox.
    Down arrow
    aria-labelledby="IDREF"aria-labelledby="ID_REFERENCE" ul Refers to the heading element that contains the label that identifies the purpose of the tree.
    tabindex="-1"tabindex="-1" li
      @@ -575,12 +628,12 @@

      Role, Property, State, and Tabindex Attributes

    tabindex="0"tabindex="0" li
    • Includes the treeitem element in the tab sequence.
      • -
    • Only one treeitem in the tree has tabindex="0".
      • +
    • 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 @@ -591,7 +644,7 @@

      Role, Property, State, and Tabindex Attributes

    aria-expanded="false"aria-expanded="false" li
      @@ -603,7 +656,7 @@

      Role, Property, State, and Tabindex Attributes

    aria-expanded="true"aria-expanded="true" li
      @@ -613,15 +666,37 @@

      Role, Property, State, and Tabindex Attributes
    aria-selected="false"li +
      +
    • Applied to treeitem elements.
      • +
    • Indicates the file or folder for the item is not currently selected.
      • +
    +
    aria-selected="true"li +
      +
    • Applied to treeitem elements.
      • +
    • Indicates the file or folder for the item is currently selected.
      • +
    +
    aria-setsize="number"aria-setsize="number" li Defines 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"aria-posinset="number" li
      @@ -632,13 +707,13 @@

      Role, Property, State, and Tabindex Attributes

    aria-level="number"aria-level="number" li
    • Defines the level of the treeitem in the hierarchical tree structure.
    • Counting is one-based.
      • -
    • Root treeitem elements have aria-level=1.
      • +
    • Root treeitem elements have aria-level="1".
    -
    -
    +

    Javascript and CSS Source Code

    • @@ -686,7 +761,6 @@

      HTML Source Code

      -