- Issue created by @spicy.werewolf
- Merge request !172Redo Header and main menu nav with final designs and without TBM → (Open) created by Unnamed author
- First commit to issue fork.
- 🇺🇸United States mherchel Gainesville, FL, US
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.
- First commit to issue fork.
- 🇪🇸Spain fjgarlin
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.
- 🇺🇸United States mherchel Gainesville, FL, US
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!
- 🇺🇸United States mherchel Gainesville, FL, US
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
- 🇺🇸United States mherchel Gainesville, FL, US
Just pushed styles for "Get started" at mobile widths. This will also need to be a
<button>
element instead of<nolink>
- 🇺🇸United States mherchel Gainesville, FL, US
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
- 🇪🇸Spain fjgarlin
Updated IS to use the new site MR: https://gitlab.com/drupal-infrastructure/sites/drupalorg/-/merge_request...
- 🇪🇸Spain fjgarlin
Work deployed here so far: https://drupalorg.dev.cluster.drupalsystems.org/home
- 🇪🇸Spain fjgarlin
Found a regression on the main menu when logged in. I added a comment and screenshot to the MR.
- Status changed to Needs review
about 2 hours ago 1:47pm 4 August 2025 - 🇪🇸Spain fjgarlin
I fixed the regression that I found. I think we should now be testing the browser/device matrix.
- 🇪🇸Spain fjgarlin
All the testing went well. There are some small discrepancies with the figma that can be addressed as follow-ups.