Review File Directory Treeview Example Using Computed Properties

[mcking65]

This issue is for collecting feedback on and tracking editorial revisions to the
File Directory Treeview Example Using Computed Properties.

Required updates

• Fix tab trap issue reported by @stevelove
• Issue File Directory Tree View examples: modifier keys are not correctly handled #367: File Directory Tree View examples: modifier keys are not correctly handled
• Issue Tree View Examples: Fix Incorrect Left Arrow Behavior #365: Tree View Examples: Fix Incorrect Left Arrow Behavior

[stevelove]

The tab key is getting trapped in Firefox and I am unable to navigate away from the File Directory Treeview via the keyboard. I was not able to reproduce the issue in the other browsers I tested (Chrome and Edge).

Browser: Firefox 50.1.0 and Firefox 51 beta
Operating System: Centos 7.3

Steps to reproduce:

1. Visit https://www.w3.org/TR/wai-aria-practices/examples/treeview/treeview-1/treeview-1a.html in the latest Firefox.
2. Press tab until the Treeview has focus.
3. Press tab again.
4. Observe that tab focus is trapped on the Treeview.

Details
The problem seems to be in Treeitem.prototype.handleKeypress, which is triggered by pressing Tab in Firefox. In this case, the KeyboardEvent gives us charCode: 0 and keyCode: 9.

As a result:
var char = String.fromCharCode(event.charCode); // ""
isPrintableCharacter(char) // [""]

The code goes into the printable character condition and event.stopPropagation() and event.preventDefault() are both called, trapping the Tab key.

Since pressing a printable key reverses the usable properties in the event, i.e. "s" results in charCode: 115 and keyCode: 0, I found that doing something along the lines of String.fromCharCode(event.charCode || event.keyCode) fixes the problem, though there may be a better solution.

[mcking65]

@stevelove

Thank you for the feedback! I can reproduce the bug.