[terra-application] Create F6 framework

[dkasper-was-taken]

Feature Request

Create a framework of F6 navigation within terra-application.

Description

This framework should allow regions to be included within a navigable order (similar to tab functionality). The currently identified regions within terra-application v2 are:

• root-page/primary nav
• secondary nav
• demographics region
• main content
• workspace

Documented Behavior:

• Chrome
  • Toggled focus between the webpage, bookmark bar, and the address bar.”
• Mozilla:
  • Move to Next Frame or Pop-up
• Safari:
• Edge:
  • Mirrors chrome driver
• IE:
  • F6  ::  Cycle through screen elements in a window or on the desktop
  • Move forward through frames and browser elements
  • F6 = selects the web address

Expectations:

• F6 & Shit+F6 keys navigate between regions
• The current focused element within an F6 region is stored on press of the F6 key
• If a store value exists set focus to that instead of the region
• A visual indicator should be present for a region for both the first navigation and when no stored child value
• Frames & iframes should count as child F6 regions
• If child regions inside region is allowed it should function similar to tab nesting
• Cross-browser should prioritize on the web-content, the return to the url bar can be reached with a combination of usages of F6 & Tab if F6 is not viable
• Undetermined if we should allow consumers to create their own regions
• role=“landmark" is the current expectation of role
• F6 current region should follow the users actions of click, tab, etc

Notables:

• In order for F6 navigate from the URL bar into the web view and maintain it’s focus listener a -1 tab-index needs to be present on the HTML document element.
• Managing the order of navigation gets very complex if we allow dynamic region inclusion
• Event capture is needed to circumvent consumer halting of propagation
• The goal is 1 listener, but distinguishing between containers on capture
  • Could focus “contains” checks?
  • Use context scoping and layered providers to establish hierarchy?
  • May use data-attribute to retrieve results for navigation, could use parsed order of results

Prototype Branch:
https://github.com/cerner/terra-application/tree/f6-test-bed

@ Mentions

@ryanthemanuel @mjhenkes @scottwilmarth