diff --git a/content/about/coverage-and-quality/coverage-and-quality-report.html b/content/about/coverage-and-quality/coverage-and-quality-report.html index a632cd3b6b..4301184eb0 100644 --- a/content/about/coverage-and-quality/coverage-and-quality-report.html +++ b/content/about/coverage-and-quality/coverage-and-quality-report.html @@ -369,7 +369,7 @@

Roles with More than One Guidance or Exa
  • Switch Using HTML Button (HC)
  • File Directory Treeview Using Computed Properties
  • File Directory Treeview Using Declared Properties
    • -
  • [Experimental] File Directory Treeview Using Declared Properties
    • +
  • [Experimental] File Directory Treeview Using Computed Properties
  • Navigation Treeview (HC)
    • @@ -704,7 +704,7 @@

    Roles with More than One Guidance or Exa @@ -715,7 +715,7 @@

    Roles with More than One Guidance or Exa @@ -963,7 +963,7 @@

    Properties and States with More than One
  • Treegrid Email Inbox
  • File Directory Treeview Using Computed Properties
  • File Directory Treeview Using Declared Properties
    • -
  • [Experimental] File Directory Treeview Using Declared Properties
    • +
  • [Experimental] File Directory Treeview Using Computed Properties
  • Navigation Treeview (HC)
    • @@ -1071,7 +1071,7 @@

    Properties and States with More than One
  • Tabs with Manual Activation (HC)
  • File Directory Treeview Using Computed Properties
  • File Directory Treeview Using Declared Properties
    • -
  • [Experimental] File Directory Treeview Using Declared Properties
    • +
  • [Experimental] File Directory Treeview Using Computed Properties
  • Navigation Treeview (HC)
  • Complementary Landmark
  • Form Landmark
    • @@ -1088,7 +1088,6 @@

    Properties and States with More than One @@ -1122,7 +1121,6 @@

    Properties and States with More than One
  • Feed
  • Treegrid Email Inbox
  • File Directory Treeview Using Declared Properties
    • -
  • [Experimental] File Directory Treeview Using Declared Properties
    • @@ -1185,7 +1183,7 @@

    Properties and States with More than One
  • Tabs with Manual Activation (HC)
  • File Directory Treeview Using Computed Properties
  • File Directory Treeview Using Declared Properties
    • -
  • [Experimental] File Directory Treeview Using Declared Properties
    • +
  • [Experimental] File Directory Treeview Using Computed Properties
    • @@ -1196,7 +1194,6 @@

    Properties and States with More than One
  • Feed
  • Treegrid Email Inbox
  • File Directory Treeview Using Declared Properties
    • -
  • [Experimental] File Directory Treeview Using Declared Properties
    • @@ -2108,7 +2105,7 @@

    Coding Practices

    heading,aria-busy,aria-describedby,aria-errormessage,aria-hidden,aria-label,aria-roledescription - [Experimental] File Directory Treeview Using Declared Properties + [Experimental] File Directory Treeview Using Computed Properties prototype Yes Yes @@ -2116,8 +2113,8 @@

    Coding Practices

    ex1 4 3 - 12 - 6 + 9 + 3 heading,aria-busy,aria-describedby,aria-errormessage,aria-hidden,aria-label,aria-roledescription @@ -2631,7 +2628,7 @@

    Graphics Techniques

    Yes - [Experimental] File Directory Treeview Using Declared Properties + [Experimental] File Directory Treeview Using Computed Properties @@ -2953,7 +2950,7 @@

    Mouse and Pointer Events

    Yes - [Experimental] File Directory Treeview Using Declared Properties + [Experimental] File Directory Treeview Using Computed Properties Yes Yes diff --git a/content/about/coverage-and-quality/prop-coverage.csv b/content/about/coverage-and-quality/prop-coverage.csv index b23a21a550..976416dfee 100644 --- a/content/about/coverage-and-quality/prop-coverage.csv +++ b/content/about/coverage-and-quality/prop-coverage.csv @@ -14,7 +14,7 @@ "aria-disabled","0","3","Example: Alert Dialog","Example: Editor Menubar","Example: Toolbar" "aria-dropeffect","0","0" "aria-errormessage","0","0" -"aria-expanded","0","23","Example: Accordion","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: Disclosure (Show/Hide) for Answers to Frequently Asked Questions","Example: Disclosure (Show/Hide) for Image Description","Example: Disclosure Navigation Menu with Top-Level Links","Example: Disclosure Navigation Menu","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Actions Menu Button Using aria-activedescendant","Example: Actions Menu Button Using element.focus()","Example: Navigation Menu Button","Example: Editor Menubar","Example: Navigation Menubar","Example: Toolbar","Example: Treegrid Email Inbox","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties","Example: [Experimental] File Directory Treeview Using Declared Properties","Example: Navigation Treeview" +"aria-expanded","0","23","Example: Accordion","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: Disclosure (Show/Hide) for Answers to Frequently Asked Questions","Example: Disclosure (Show/Hide) for Image Description","Example: Disclosure Navigation Menu with Top-Level Links","Example: Disclosure Navigation Menu","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Actions Menu Button Using aria-activedescendant","Example: Actions Menu Button Using element.focus()","Example: Navigation Menu Button","Example: Editor Menubar","Example: Navigation Menubar","Example: Toolbar","Example: Treegrid Email Inbox","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties","Example: [Experimental] File Directory Treeview Using Computed Properties","Example: Navigation Treeview" "aria-flowto","0","0" "aria-grabbed","0","0" "aria-haspopup","0","9","Example: Date Picker Combobox","Example: Editable Combobox with Grid Popup","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Actions Menu Button Using aria-activedescendant","Example: Actions Menu Button Using element.focus()","Example: Navigation Menu Button","Example: Editor Menubar","Example: Navigation Menubar","Example: Toolbar" @@ -22,8 +22,8 @@ "aria-invalid","0","0" "aria-keyshortcuts","0","0" "aria-label","1","18","Guidance: Naming with a String Attribute Via aria-label","Example: Breadcrumb","Example: Auto-Rotating Image Carousel with Buttons for Slide Control","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Date Picker Dialog","Example: Link","Example: Editor Menubar","Example: Navigation Menubar","Example: Rating Radio Group","Example: Horizontal Multi-Thumb Slider","Example: Date Picker Spin Button","Example: Table","Example: Toolbar","Example: Treegrid Email Inbox","Example: Navigation Treeview" -"aria-labelledby","1","41","Guidance: Naming with Referenced Content Via aria-labelledby","Example: Accordion","Example: Alert Dialog","Example: Checkbox (Two State)","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: Date Picker Dialog","Example: Modal Dialog","Example: Feed","Example: Data Grid","Example: Layout Grid","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Listbox with Grouped Options","Example: Listboxes with Rearrangeable Options","Example: Scrollable Listbox","Example: Actions Menu Button Using aria-activedescendant","Example: Actions Menu Button Using element.focus()","Example: Navigation Menu Button","Example: Navigation Menubar","Example: Meter","Example: Radio Group Using aria-activedescendant","Example: Rating Radio Group","Example: Radio Group Using Roving tabindex","Example: Color Viewer Slider","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Date Picker Spin Button","Example: Switch Using HTML Button","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties","Example: [Experimental] File Directory Treeview Using Declared Properties","Example: Navigation Treeview","Example: Complementary Landmark","Example: Form Landmark","Example: Main Landmark","Example: Navigation Landmark","Example: Region Landmark","Example: Search Landmark" -"aria-level","0","3","Example: Treegrid Email Inbox","Example: File Directory Treeview Using Declared Properties","Example: [Experimental] File Directory Treeview Using Declared Properties" +"aria-labelledby","1","41","Guidance: Naming with Referenced Content Via aria-labelledby","Example: Accordion","Example: Alert Dialog","Example: Checkbox (Two State)","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: Date Picker Dialog","Example: Modal Dialog","Example: Feed","Example: Data Grid","Example: Layout Grid","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Listbox with Grouped Options","Example: Listboxes with Rearrangeable Options","Example: Scrollable Listbox","Example: Actions Menu Button Using aria-activedescendant","Example: Actions Menu Button Using element.focus()","Example: Navigation Menu Button","Example: Navigation Menubar","Example: Meter","Example: Radio Group Using aria-activedescendant","Example: Rating Radio Group","Example: Radio Group Using Roving tabindex","Example: Color Viewer Slider","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Date Picker Spin Button","Example: Switch Using HTML Button","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties","Example: [Experimental] File Directory Treeview Using Computed Properties","Example: Navigation Treeview","Example: Complementary Landmark","Example: Form Landmark","Example: Main Landmark","Example: Navigation Landmark","Example: Region Landmark","Example: Search Landmark" +"aria-level","0","2","Example: Treegrid Email Inbox","Example: File Directory Treeview Using Declared Properties" "aria-live","0","5","Example: Alert","Example: Auto-Rotating Image Carousel with Buttons for Slide Control","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Date Picker Combobox","Example: Date Picker Dialog" "aria-modal","0","4","Example: Alert Dialog","Example: Date Picker Combobox","Example: Date Picker Dialog","Example: Modal Dialog" "aria-multiline","0","0" @@ -31,7 +31,7 @@ "aria-orientation","0","1","Example: Vertical Temperature Slider" "aria-owns","0","1","Example: Navigation Treeview" "aria-placeholder","0","0" -"aria-posinset","0","4","Example: Feed","Example: Treegrid Email Inbox","Example: File Directory Treeview Using Declared Properties","Example: [Experimental] File Directory Treeview Using Declared Properties" +"aria-posinset","0","3","Example: Feed","Example: Treegrid Email Inbox","Example: File Directory Treeview Using Declared Properties" "aria-pressed","0","3","Example: Button (IDL Version)","Example: Button","Example: Toolbar" "aria-readonly","0","0" "aria-relevant","0","0" @@ -40,8 +40,8 @@ "aria-rowcount","1","2","Guidance: Using aria-rowcount and aria-rowindex","Example: Data Grid","Example: Layout Grid" "aria-rowindex","1","2","Guidance: Using aria-rowcount and aria-rowindex","Example: Data Grid","Example: Layout Grid" "aria-rowspan","1","0","Guidance: Defining cell spans using aria-colspan and aria-rowspan" -"aria-selected","0","17","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: Date Picker Dialog","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Listbox with Grouped Options","Example: Listboxes with Rearrangeable Options","Example: Scrollable Listbox","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties","Example: [Experimental] File Directory Treeview Using Declared Properties" -"aria-setsize","0","4","Example: Feed","Example: Treegrid Email Inbox","Example: File Directory Treeview Using Declared Properties","Example: [Experimental] File Directory Treeview Using Declared Properties" +"aria-selected","0","17","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: Date Picker Dialog","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Listbox with Grouped Options","Example: Listboxes with Rearrangeable Options","Example: Scrollable Listbox","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties","Example: [Experimental] File Directory Treeview Using Computed Properties" +"aria-setsize","0","3","Example: Feed","Example: Treegrid Email Inbox","Example: File Directory Treeview Using Declared Properties" "aria-sort","1","2","Guidance: Indicating sort order with aria-sort","Example: Data Grid","Example: Sortable Table" "aria-valuemax","1","8","Guidance: Using aria-valuemin, aria-valuemax and aria-valuenow","Example: Meter","Example: Horizontal Multi-Thumb Slider","Example: Color Viewer Slider","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Date Picker Spin Button","Example: Toolbar" "aria-valuemin","0","8","Example: Meter","Example: Horizontal Multi-Thumb Slider","Example: Color Viewer Slider","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Date Picker Spin Button","Example: Toolbar" diff --git a/content/about/coverage-and-quality/role-coverage.csv b/content/about/coverage-and-quality/role-coverage.csv index c9f893361b..d94e3adcd5 100644 --- a/content/about/coverage-and-quality/role-coverage.csv +++ b/content/about/coverage-and-quality/role-coverage.csv @@ -25,7 +25,7 @@ "generic","0","0" "grid","3","5","Guidance: Grid Popup Keyboard Interaction","Guidance: Grid (Interactive Tabular Data and Layout Containers) Pattern","Guidance: Grid and Table Properties","Example: Date Picker Combobox","Example: Editable Combobox with Grid Popup","Example: Date Picker Dialog","Example: Data Grid","Example: Layout Grid" "gridcell","0","3","Example: Editable Combobox with Grid Popup","Example: Layout Grid","Example: Treegrid Email Inbox" -"group","2","11","Guidance: Radio Group Pattern","Guidance: For Radio Group Contained in a Toolbar","Example: Auto-Rotating Image Carousel with Buttons for Slide Control","Example: Checkbox (Two State)","Example: Listbox with Grouped Options","Example: Editor Menubar","Example: Color Viewer Slider","Example: Date Picker Spin Button","Example: Switch Using HTML Button","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties","Example: [Experimental] File Directory Treeview Using Declared Properties","Example: Navigation Treeview" +"group","2","11","Guidance: Radio Group Pattern","Guidance: For Radio Group Contained in a Toolbar","Example: Auto-Rotating Image Carousel with Buttons for Slide Control","Example: Checkbox (Two State)","Example: Listbox with Grouped Options","Example: Editor Menubar","Example: Color Viewer Slider","Example: Date Picker Spin Button","Example: Switch Using HTML Button","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties","Example: [Experimental] File Directory Treeview Using Computed Properties","Example: Navigation Treeview" "heading","0","0" "img","0","0" "input","0","0" @@ -74,6 +74,6 @@ "timer","0","0" "toolbar","3","1","Guidance: For Radio Groups Not Contained in a Toolbar","Guidance: For Radio Group Contained in a Toolbar","Guidance: Toolbar Pattern","Example: Toolbar" "tooltip","1","0","Guidance: Tooltip Pattern" -"tree","2","4","Guidance: Tree Popup Keyboard Interaction","Guidance: Tree View Pattern","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties","Example: [Experimental] File Directory Treeview Using Declared Properties","Example: Navigation Treeview" +"tree","2","4","Guidance: Tree Popup Keyboard Interaction","Guidance: Tree View Pattern","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties","Example: [Experimental] File Directory Treeview Using Computed Properties","Example: Navigation Treeview" "treegrid","1","1","Guidance: Treegrid Pattern","Example: Treegrid Email Inbox" -"treeitem","0","4","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties","Example: [Experimental] File Directory Treeview Using Declared Properties","Example: Navigation Treeview" +"treeitem","0","4","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties","Example: [Experimental] File Directory Treeview Using Computed Properties","Example: Navigation Treeview" diff --git a/content/index/index.html b/content/index/index.html index d239f5f4ea..efbab442ae 100644 --- a/content/index/index.html +++ b/content/index/index.html @@ -167,6 +167,7 @@

    Examples by Role

  • Switch Using HTML Button (HC)
  • File Directory Treeview Using Computed Properties
  • File Directory Treeview Using Declared Properties
    • +
  • [Experimental] File Directory Treeview Using Computed Properties
  • Navigation Treeview (HC)
    • @@ -417,6 +418,7 @@

    Examples by Role

    @@ -431,6 +433,7 @@

    Examples by Role

    @@ -597,6 +600,7 @@

    Examples By Properties and States

  • Treegrid Email Inbox
  • File Directory Treeview Using Computed Properties
  • File Directory Treeview Using Declared Properties
    • +
  • [Experimental] File Directory Treeview Using Computed Properties
  • Navigation Treeview (HC)
    • @@ -702,6 +706,7 @@

    Examples By Properties and States

  • Tabs with Manual Activation (HC)
  • File Directory Treeview Using Computed Properties
  • File Directory Treeview Using Declared Properties
    • +
  • [Experimental] File Directory Treeview Using Computed Properties
  • Navigation Treeview (HC)
  • Complementary Landmark
  • Form Landmark
    • @@ -823,6 +828,7 @@

    Examples By Properties and States

  • Tabs with Manual Activation (HC)
  • File Directory Treeview Using Computed Properties
  • File Directory Treeview Using Declared Properties
    • +
  • [Experimental] File Directory Treeview Using Computed Properties
    • @@ -907,8 +913,7 @@

    Examples By Properties and States

    Experimental Examples

    NOTE: The HC abbreviation means example has High Contrast support.
    - +
    diff --git a/content/patterns/treeview/examples/treeview-1c.html b/content/patterns/treeview/examples/treeview-1c.html index 83d134dd23..e3a8ce9308 100644 --- a/content/patterns/treeview/examples/treeview-1c.html +++ b/content/patterns/treeview/examples/treeview-1c.html @@ -1,35 +1,22 @@ - - - - [Experimental] File Directory Treeview Example Using Declared Properties - + + + [Experimental] File Directory Treeview Example Using Computed Properties - - + + - + - - + + @@ -37,60 +24,32 @@ -
    -

    - [Experimental] File Directory Treeview Example Using Declared Properties -

    +
    +

    [Experimental] File Directory Treeview Example Using Computed Properties

    About This Experimental Example

    - +

    - This experimental version of the File Directory Treeview Example Using - Declared Properties example is not intended to ever be released or - shown to the public. It exists merely to ensure that experimental - content support can be adequately developed and tested. When support - is fully implemented, this example can be deleted. + This experimental version of the File Directory Treeview Example Using Declared Properties example is not intended to ever be released or shown to the public. + It exists merely to ensure that experimental content support can be adequately developed and tested. + When support is fully implemented, this example can be deleted.

    - The following example implementation of the - Tree View 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 specification for these properties - states that browsers can, but are not required to, compute these - values. + This example relies on the browser to compute values for aria-setsize, aria-posinset, and aria-level. + 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:

    @@ -98,536 +57,130 @@

    About This Experimental Example

    Experimental Example

    - +
    -

    My Documents

    -
      -
    - +

    Accessibility Features

    -

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

    +

    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.

    Terms Used to Describe Trees

    - A tree item that can be expanded to reveal child items is called a - parent 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 - Tree View Pattern. + A tree item that can be expanded to reveal child items is called a parent 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 Pattern.

    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. + 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, see + Deciding When to Make Selection Automatically Follow Focus.

    @@ -639,28 +192,17 @@

    Keyboard Support

    - + - + @@ -669,10 +211,7 @@

    Keyboard Support

    @@ -681,14 +220,8 @@

    Keyboard Support

    @@ -698,45 +231,26 @@

    Keyboard Support

    - + - + @@ -744,10 +258,7 @@

    Keyboard Support

    @@ -774,18 +285,10 @@

    Role, Property, State, and Tabindex Attributes

    @@ -794,10 +297,7 @@

    Role, Property, State, and Tabindex Attributes

    - + @@ -811,14 +311,8 @@

    Role, Property, State, and Tabindex Attributes

    @@ -828,28 +322,12 @@

    Role, Property, State, and Tabindex Attributes

    @@ -860,19 +338,9 @@

    Role, Property, State, and Tabindex Attributes

    @@ -882,19 +350,9 @@

    Role, Property, State, and Tabindex Attributes

    @@ -905,10 +363,7 @@

    Role, Property, State, and Tabindex Attributes

    @@ -919,83 +374,20 @@

    Role, Property, State, and Tabindex Attributes

    - - - - - - - - - - - - - - - - - - - + @@ -1020,28 +412,16 @@

    JavaScript and CSS Source Code

  • Javascript: - treeitemClick.js + treeitemClick.js

    • HTML Source Code

    - +
    - +
    Enter - Performs the default action, which is to select the node, - causing the name of the node to appear in the - File or Folder Selected textbox. - Performs the default action, which is to select the node, causing the name of the node to appear in the File or Folder Selected textbox.
    Space - Performs the default action, which is to select the node, - causing the name of the node to appear in the - File or Folder Selected textbox. - Performs 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
      -
    • - Moves focus to the next node that is focusable without - opening or closing a node. -
      • +
    • Moves focus to the next node that is focusable without opening or closing a node.
    • If focus is on the last node, does nothing.
    		 Up arrow
      -
    • - Moves focus to the previous node that is focusable without - opening or closing a node. -
      • +
    • Moves focus to the previous node that is focusable without opening or closing a node.
    • If focus is on the first node, does nothing.
    		 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 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.
    • 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. -
      • +
    • 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.
    Home - Moves focus to first node without opening or closing a node. - Moves focus to first node without opening or closing a node.
    End - Moves focus to the last node that can be focused without - expanding any nodes that are closed. - Moves 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. -
      • +
    • 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.
    * (asterisk)
      -
    • - Expands all closed sibling nodes that are at the same level - as the focused node. -
      • +
    • Expands all closed sibling nodes that are at the same level as the focused node.
    • Focus does not move.
    		 ul aria-labelledby="ID_REFERENCE" ul - Refers to the heading element that contains the label that - identifies the purpose of the tree. - Refers to the heading element that contains the label that identifies the purpose of the tree.
    treeitem li
      -
    • - 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. -
      • +
    • 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
      +
    • 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.
    • - 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 - Managing Focus Within Components Using a Roving - tabindex. + When the user moves focus in the tree, the element included in the tab sequence changes to the element with focus as described in + Managing Focus Within Components Using a Roving tabindex.
    		li
      -
    • - 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 selector. -
      • +
    • 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 selector.
    li
      -
    • - 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 selector. -
      • +
    • 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 selector.
    • Applied to treeitem elements.
      • -
    • - Indicates the file or folder for the item is not currently - selected. -
      • +
    • Indicates the file or folder for the item is not currently selected.
    • Applied to treeitem elements.
      • -
    • - Indicates the file or folder for the item is currently - selected. -
      • -
    -
    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"li -
      -
    • - 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.
      • +
    • Indicates the file or folder for the item is currently selected.
    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". -
      • -
    -
    group ul
      -
    • - 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 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. -
      • +
    • 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.