Recreate main menu

The header is ready for review! This is a comprehensive refactor that does the following:

• One monolith component was split into eight(!!!) components, which is much more manageable
• Greatly increases accessibility
• Changes the top level item element type from span to button, which is semantically correct
• Top level menu items implement aria-expanded. This was previously implemented on the spans, but that attribute is invalid for that role
• Mobile menu disclosure button is now a span
• Allows users with assistive tech to skip over menus if needed (currently submenus open and force users to tab through)
• Proper labels on all buttons
• Proper visible focus states
• Visual changes
• At wide widths, dropdowns are the full width of the header (per design)
• Submenus animate on open/close (note all animations respect prefers-reduced-motion media query)
• This works on all browsers (with great effort)
• Only one dropdown is visible at a time

Still to do

• Right now the “Support Drupal” special styling is controlled via checking for the text string in the twig template. This is a bit brittle
• The right hand “Get started” menu is not yet refactored, and still has a lot of accessibility issues.
• Submenus don’t respond to the ESC key. It’s a nice touch if they close when that’s hit.
• The designs for the mobile menu have a background overlay. I have some questions about this before we implement it (fixed? What if people scroll then hit it, etc)
• The user menu icon won’t change to the avatar of the logged in user
• Still needs various accessibility fixes for forced-colors (Windows high contrast)
• All font sizes (and most everything) are in PX. We should have a list of variables that are defined in REMs

Summary

Overall this is a huge improvement from the current version, and is the culmination of a lot of work from both Jayme and I.

This is incredible! Amazing job so far!

> The user menu icon won’t change to the avatar of the logged in user
That seems like a regression that should be easy to fix before we deploy. It's probably the one visual clue most users will have indicating that they are logged in vs not.

Also, some small things to drive the testing forward:
- It’d be great if we cross-link as well to the site MR and we have a list of deployment steps to go through (eg: we’ll need to add descriptions to menu items manually)
- Also, we could/should have a test matrix (browsers + widths to test) indicating whether the testing was ✅ or ❌ or ⚠️
- And there are some todos in the code.

I'd like to have the user avatar and todo's fixed first and then we can start with the detailed testing.

That seems like a regression that should be easy to fix before we deploy. It's probably the one visual clue most users will have indicating that they are logged in vs not.

This is now working!

Removed the commented out stuff from preprocess along with unused code.

Many of the @todo's are gone, but some still remain and will likely be either followup issues, or issues to fix when the underlining issues (could be either browser issues or core issues) are resolved.

Once I have time, I'll get a matrix somewhere so we can comprehensively test, but in the meantime, I'd love as many eyes on this as possible so setting back to NR

Added testing steps (original doc here)

Just pushed styles for "Get started" at mobile widths. This will also need to be a <button> element instead of <nolink>

Opened followup issues:

• 📌 Refactor “Get started” menu at desktop Postponed
• 🐛 Menus items should close on focus out (both at desktop and mobile) Postponed
• 🐛 Menu not accessible in forced colors mode Postponed
• 🐛 Mobile menu should have overlay when open Postponed
• 📌 Menus should close on ESC Postponed

Added deployment steps.

Updated IS to use the new site MR: https://gitlab.com/drupal-infrastructure/sites/drupalorg/-/merge_request...

Work deployed here so far: https://drupalorg.dev.cluster.drupalsystems.org/home

Found a regression on the main menu when logged in. I added a comment and screenshot to the MR.

I fixed the regression that I found. I think we should now be testing the browser/device matrix.

Chrome / Firefox / Safari on Wide screens.

Chrome / Firefox / Safari on narrow screens ✅

Also tested on Safari and iPhone ✅

All the testing went well. There are some small discrepancies with the figma that can be addressed as follow-ups.

Updated IS to include link to figma

Updated testing matrix.

The MR is now merged. I will deploy everything to the live site within the next 1-2h.

Everything is deployed to the live site and the figma was updated with the suggestion from this MR.

Big thanks @spiry.werewolf and @mherchel!!

Automatically closed - issue fixed for 2 weeks with no activity.