ARIA compatible keyboard navigation

[vladimirivanoviliev]

Implement build-in keyboard navigation. Possible approaches that we discussed are:

1) Using browser default behavior to implement the navigation, where the PanelBar items are focusable elements:

• Tab and Shift + Tab keys to navigate back and forward in PanelBar items.

Pros:

• simple to implement - require only all titles to become anchors
• does not require higher-order component with state to handle it
• fast - does not require any additional logic

Cons:

• not fully Aria-compatible
• hard to navigate when expanded child have focusable elements - in this case the user should go through all of them to move to next PanelBar item. This might make hard to understand for the user if it's in the context of the component or inside it's content.

2) Using higher-order stateful component to handle the keyboard navigation, where the component root element is focusable (require review of exact implementation, example implementation here):

• Tab to focus the component, or focus the next focusable element (inside the current item content)
• Ctrl+ Up to focus current item from inside it's content
• Up, Down, Left and 'Right' to navigate through the actual items
• Space or Enter to select and expand / collapse current item
• Home or End to navigate to first or last item in PanelBar

Pros:

• Component can be fully ARIA compatible
• Easy to navigate between the items and their contents

Cons:

• Require higher-order stateful component which to hold the items as state (data)
• Require more calculations to keep the state updated

Related documentation:

• focus_tabindex
• managingfocus
• section 508 complaint (US gov) framework

[rusev]

You should rather call them high order components or simply components than wrappers if we are strict about the React naming conventions.

@rkonstantinov What do you think?