Implement keyboard navigation

[petesfrench]

Done

• Implement keyboard navigation for both mobile and desktop view. The behaviourof which is based around the current keyboard navigaiton that exists at https://ubuntu.com. The code is also vaguely based on the same logic used, see code
• Some js-hooks were added and some rendering logic altered to handle tab index better

QA

• Go to [the demo]() and try to navigate the navigation using only the keyboard. You should be able to access all links and dropdowns on both mobile and desktop.
• If you are unsure if a behavior is intentional, check it against https://ubuntu.com.

Overview of expected behavior on DESKTOP: Escape - close all drop-downs Tab - go to next focus-able link. If it is the last item in the tab panel, jump inside the content panel. if it is the last item in the content panel, close all drop-downs and return focus to main navigation. Shift+Tab - It is the first item in a panel, close all drop-downs and return focus to main navigation

Overview of expected behavior on MOBILE: Escape - close all drop-downs Tab - go to next focus-able link. If it is the last link, loop back to the top of the list. Shift+Tab - go to next focus-able link. If it is the first link, loop back to the bottom of the list.

Issue / Card

Fixes https://warthogs.atlassian.net/browse/WD-12084

[webteam-app]

Demo

Jenkins

demos.haus

[petesfrench]

@britneywwc Thank you for volunteering to review!

[akbarkz]

@petesfrench Found one bug on big screen which can be reproduced as follows:

• Click on Tab to focus on one of the Menu items (not the last one though, so any of Products, Solutions, Career would do)
• Click Enter to open that menu
• Click Enter again to close it
• Click on Tab again, it will focus on Search icon, not on the next Menu item
• Click on Shift + Tab from the Search icon, it will focus on Canonical logo. So basically you won't be able to focus on Menu items after that any more, until you refresh the page.