Review Navigation Treeview Example Using Declared Properties

[mcking65]

This issue is for collecting feedback on and tracking editorial revisions to the
Navigation Treeview Example Using Declared Properties.

Required Updates

• Editorial cleanup
• Issue Navigation Tree View examples: enter key and modifier keys are not correctly handled #364: Navigation Tree View examples: enter key and modifier keys are not correctly handled
• Issue Tree View Examples: Fix Incorrect Left Arrow Behavior #365: Tree View Examples: Fix Incorrect Left Arrow Behavior
• Issue Treeview Examples: fix incorrect right arrow behavior #385: fix incorrect right arrow behavior
• Issue Navigation Treeview example: Unused treeitemClick.js file #386: Unused treeitemClick.js file

[carmacleod]

Typo: compuuted

[carmacleod]

Note that the tree is a keyboard trap in Firefox (Mac and Windows), however this must be a Firefox problem, because tab navigation works fine in both Safari on Mac, and Chrome on Mac and Windows.

[carmacleod]

Ctrl+click on link (which opens link in new tab) should not collapse tree.

[carmacleod]

Note that keyboard shortcut Shift+F10 does not bring up a context menu for the treeitem links in Firefox (even though right-clicking on the treeitem link opens a link-related context menu).
Shift+F10 works as I would expect for treeitem links in Chrome (i.e. context menu contains "Open link in new tab", and other link-related menu items).
In Safari, VO+Shift+M opens a context menu on a treeitem link when VoiceOver is running, but it is not the link-related context menu.

I personally prefer the Chrome behavior, because in this example, the tree items really are links. We want the user to know that they are links, and that they can be navigated with enter, or opened in a new tab, or opened in a new Window, or whatever other link-related things are in the context menu.

I agree that we don't want a Screen Reader user to be overwhelmed by all of the (potentially many) treeitem links in the tree. That would make navigation by links, and a List Links dialog almost useless.

[carmacleod]

The entries for the Return and Space key behavior say, "Performs the default action (e.g. onclick event) on the current treeitem, in this example updating the "File or Folder Selected" textbox."
However, for this example, the default action for a "branch" treeitem is expand/collapse, and the default action of a "leaf" treeitem is to open the link.

[carmacleod]

Typo: "relies on the browser to computer values"
should be: "relies on the browser to compute values"

[carmacleod]

Typo: "his example implements "
should be: "This example implements "

[carmacleod]

For left arrow when focus is on a child node that is also either an end node or a closed node, did you intend to close the parent node after moving focus to it? In other words, the APG says left arrow should move focus to the parent, but the APG does not say to then collapse the parent. It feels a bit unexpected in this example to have the parent collapse when I am just navigating left.

[carmacleod]

Typo in the right arrow function description: "For a treeitem is in the expanded state"
should be: "For a treeitem that is in the expanded state"

[carmacleod]

I find the description of the * (asterisk) behavior somewhat confusing.
It currently says: "Opens all the expandable treeitems in the current leaf (e.g. siblings of the current treeitem)"
Can we change it to: "Opens all expandable treeitems that are siblings of the current treeitem"?

[carmacleod]

Typo in the second Usage note for tree role: "Accessible name for the tree widget comes from aria-label attribute."
should say, "Accessible name for the tree widget comes from aria-labelledby="tree1" attribute."