Tab behavior

[idoros]

The way Tab navigation is handled at the moment is by listening to key presses and manually preventing default focus while setting the focus to the next logical tabbable element.

The simplified process is (for backwards or forwards):

• if the next element is in the current layer then focus it
• If the next element is a layer origin then focus the layer "first element"
• If the current element is the last element of a layer then go a layer up and continue to the next element after the origin element.
  • unless the layer is a blocking layer (backdrop!=none) - then act like a focus trap and rollback to the first tabbable element (or last, depending on direction).

The focus trap is a known approach for modal UI, However currently there is an unexpected focus trap on the main UI as well. Normally when the last tabbable element is focused, pressing [Tab] moved the user focus to the browser chrome (select the URL). The only way to reach this focus is to allow the default behavior of [Tab] on the last element or [Shift+Tab] on the first element.

In the current implementation, all layers are flattened on the DOM one after the other, and since a layer can be non-blocking, then when the focus is on the last element in the main layer, pressing [Tab] again (without preventDefault()) will jump into a layer instead of moving the the browser URL. To prevent the default behavior the focus is trapped and re-focused on the first element again.

Currently this override is only for tabbing forwards. This override behavior is not implemented on Shift+Tab Since the main layer is the first layer in the DOM, and navigating backwards will focus the browser URL as expected.

Several ideas to improve the current behavior:

1. reverse layer order order in the DOM (or at list move the main layer to be last in DOM) to swap the behavior so that moving after the last element on the main layer can jump to browser chrome.
2. add a focusable element after the last layer to jump to after the actual last element in the main layer. this can allow to click another Tab to get the native behavior and focus the URL, and even allow to Enter and move to the first element again (present a visual and accessible screen reader information).

[idoros]

This also affects the behavior of tabbing out of an iframe (when the application running zeejs is in an iframe).