feat(left-nav): refactor into left-nav-sections and include animations

[annawen1]

Related Ticket(s)

Web Component: Change Mega Menu to include animation (back button & forward motion) #4831
[Left Nav: Web Components]: L1 items are visible when on L2 menu items #6209
Web component: Masthead-With custom data - Hybrid cloud options are missing from the menu options. #5135

Description

Refactor left-nav so all menu panels/sections are on the same level instead of nested.

Align animations for forward and backward movement.

Changelog

New

• left-nav-menu-section component that handles all the focus of first element, back button functionality
• add L1 platform name to the left-nav

Changed

• set tabindex to -1 for left-nav-menu and left-nav-menu-item
• reduced logic of left-nav-menu to only render menu items that have a menu
• move cloud profile and cta menu items to within a menu section in cloud-masthead-composite
• add conditional to focuswrap utility when focus doesn't hit start or end sentinel which allows the first menu item to focus when left-nav is expanded

Removed

• styles that are no longer needed

[ibmdotcom-bot]

Deploy preview created for package React:
https://ibmdotcom-react.s3.us-south.cloud-object-storage.appdomain.cloud/deploy-previews/6393/index.html

Built with commit: 63743fdc6ca7770cc04eb3df0041e73ac764c125

[ibmdotcom-bot]

Deploy preview created for package Web Components - React Wrapper:
https://ibmdotcom-web-components-react.s3-web.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/6393/index.html

Built with commit: 63743fdc6ca7770cc04eb3df0041e73ac764c125

[ibmdotcom-bot]

Deploy preview created for package Web Components:
https://ibmdotcom-webcomponents.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/6393/index.html

Built with commit: 63743fdc6ca7770cc04eb3df0041e73ac764c125

[shixiedesign]

Thank you so much for taking this one!

1. Focus state of Back button should keep the blue color. Currently it becomes black on focus
   

2. When I tab through all the options in the panel, the focus state disappears and next panel appears, however I cannot get the focus state back, and left and right arrow keys slide the panels back and forth. I imagine the disappearing focus state is important to fix. In react, the focus state returns to menu's top item.
   

3. In both web comp & react: how do I navigate to x button with keyboard? Tab never gets there it seems.

4. In both web comp & react, md breakpoint: clicking outside the menu on page with an overlay should close the menu. Currently it doesn't do anything.

5. At the bottom of the menu, there should always be 48px spacing. Currently missing bottom spacing at the end of the menu:
   
   Spec:
   

6. Panels allow me the scroll left-and-right:
   

[ibmdotcom-bot]

Deploy preview created for package "React (experimental)":
https://ibmdotcom-react-experimental.s3.us-south.cloud-object-storage.appdomain.cloud/deploy-previews/6393/index.html

Built with commit: 63743fdc6ca7770cc04eb3df0041e73ac764c125

[ibmdotcom-bot]

Deploy preview created for package "Web Components (experimental)":
https://ibmdotcom-web-components-experimental.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/6393/index.html

Built with commit: 63743fdc6ca7770cc04eb3df0041e73ac764c125

[annawen1]

Thank you so much for taking this one!

1. Focus state of Back button should keep the blue color. Currently it becomes black on focus

Done

2. When I tab through all the options in the panel, the focus state disappears and next panel appears, however I cannot get the focus state back, and left and right arrow keys slide the panels back and forth. I imagine the disappearing focus state is important to fix. In react, the focus state returns to menu's top item.

It should now focus on the back button when on the next panel. Also the left and right arrow keys should not allow for the panels to slide back and forth anymore.

3. In both web comp & react: how do I navigate to x button with keyboard? Tab never gets there it seems.

In web components, you should be able to get to the x button when tabbing through the menu items now, it should jump to the x button when tabbing past the last menu item.

For React, it's coded a bit differently and user has to go back to the initial menu panel to access the x.

4. In both web comp & react, md breakpoint: clicking outside the menu on page with an overlay should close the menu. Currently it doesn't do anything.

hmm yeah that's been like that since we created the left nav I believe. We can address this in another ticket.

5. At the bottom of the menu, there should always be 48px spacing. Currently missing bottom spacing at the end of the menu:

Done

6. Panels allow me the scroll left-and-right:

Addressed!

[shixiedesign]

1. shift+Tab allows users to access the Profile and Search buttons. Expecting keyboard access to not reach there just like mouse is unable to interact with those:
   

2. Both react & web components: the background overlay should fade out over time with the menu moving out. Currently the background overlay just disappears.
   

[kennylam]

Nice one @annawen1! Just some really small fixes.

[annawen1]

@shixiedesign The first issue is now addressed. The second one we can open a new ticket for.

1. shift+Tab allows users to access the Profile and Search buttons. Expecting keyboard access to not reach there just like mouse is unable to interact with those:

2. Both react & web components: the background overlay should fade out over time with the menu moving out. Currently the background overlay just disappears.

[jeffchew]

LGTM!

[shixiedesign]

🌶️ 🌶️ 🌶️