Implement application / navigation area patterns

Created by: quinnkeast

As part of our effort to improve accessibility and usability, we're looking at systemizing and improving how we handle focus states and keyboard navigation across Sourcegraph.

To improve keyboard usability, specific areas of Sourcegraph need additional or modified functionality to change how navigation behaviour works.

Action items based on quick wins that an be done in isolation:

• Search query input should be escapable with esc key.
• Autocomplete suggestions should be selectable with both tab and enter.
• In the context selector, arrow keys should select the text input or the context items. Tab should change focus between the text input and the buttons. User should not be able to tab “out” of the contexts selector.
• Filters and repositories should be application areas. Once the area is focused, arrow keys are used to select the item within.
• Tabs should be an application area and internally navigable with arrow keys.
• Files / symbols tab should be an application area and internally navigable with arrow keys.
• Definition / references / history tabs should be an application area and internally navigable with arrow keys.
• User menu should be an application area and internally navigable with arrow keys.
• Home page panels (Repositories, recent searches, etc.) should be an application area and internally navigable with arrow keys.
• Other quick wins I've missed?

Elements that need doing, but need more scope / consideration in a separate issue:

• File view (navigating tokens with arrow keys and triggering tooltip with enter)
• Search result items (code, diffs, commits, symbols, repositories, filenames)
• Code intel pane items (definition, references, history)
• Admin and setting areas