Added tab focus to top banner and navigation to About/Support Modal

[j264415]

Issue:

#1718 - Accessibility Audit for Keyboard Navigation, Screen Reader and High Zoom

As documented in this issue I am solving:

• Explore top banner items - adding focus to top banner elements.

• Adding tabbing and arrow functionality within the About/Support menu modal.

Code changes:

• The tabindex for the search field has been changed to 0. This is to make sure it obeys tab order rules.
• CSS styles were updated to visually display focus in the top banner.
• When About/support modal is open, users can tab to the tab-list items (FAQS, Report etc), and arrow across them left and right.

User-facing changes:

Users can now see that components in the top banner are focused when tabbing through the application.
Users can now also navigate the About/support modal with tabbing and and arrow across them left and right.

Replication:

1. Navigate the web page using the Tab key till you get to that top banner.
2. Press Tab and you will see the elements focused.
3. The element in focus should have a black outline .

About/Support Replication:

1. Navigate the web page using the Tab key till you get to that top banner About/Support Element.
2. Press Enter to open the modal.
3. Press Tab till you have the FAQs tab-list highlighted (this will normally take 2 Tab presses).
4. Arrow Left or Right to navigate across the tab-list titles.
5. Press Enter or Space to open any of the tab-lists.
6. Press Tab to navigate through the contents of these Tab-list.
7. Press Enter or Space to open any contents that is highlighted.

[CLAassistant]

All committers have signed the CLA.