Recreate main menu

Created on 3 June 2025, 2 months ago

Problem/Motivation

Over time the menu design has evolved and made more precise. Also, the module being used currently has some aspects that feel fragile, particularly the way it captures and stores menu config. Moreover, it doesn't seem to provide a no js fallback.

Proposed resolution

Using the most recent approved menu designs, theme the main menu without using the contrib module that is being used now.

📌 Task
Status

Active

Version

2.0

Component

Code

Created by

🇺🇸United States spicy.werewolf

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @spicy.werewolf
  • First commit to issue fork.
  • Pipeline finished with Success
    20 days ago
    Total: 150s
    #548343
  • Pipeline finished with Success
    20 days ago
    Total: 160s
    #548348
  • Pipeline finished with Success
    18 days ago
    #550229
  • Pipeline finished with Running
    18 days ago
    #550324
  • Pipeline finished with Success
    18 days ago
    #550354
  • Pipeline finished with Success
    18 days ago
    #550382
  • Pipeline finished with Success
    18 days ago
    #550404
  • Pipeline finished with Success
    18 days ago
    Total: 167s
    #550671
  • Pipeline finished with Success
    16 days ago
    Total: 143s
    #551958
  • Pipeline finished with Success
    16 days ago
    Total: 212s
    #551976
  • Pipeline finished with Success
    16 days ago
    Total: 180s
    #551981
  • Pipeline finished with Success
    16 days ago
    Total: 180s
    #552041
  • Pipeline finished with Success
    14 days ago
    #553554
  • Pipeline finished with Success
    13 days ago
    #553954
  • Pipeline finished with Success
    13 days ago
    Total: 130s
    #554352
  • Pipeline finished with Success
    13 days ago
    Total: 147s
    #554385
  • Pipeline finished with Success
    12 days ago
    Total: 153s
    #554918
  • Pipeline finished with Success
    12 days ago
    Total: 128s
    #554929
  • 🇺🇸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.

  • Pipeline finished with Success
    12 days ago
    Total: 180s
    #554936
  • 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!

  • Pipeline finished with Success
    12 days ago
    Total: 143s
    #555471
  • Pipeline finished with Success
    11 days ago
    Total: 195s
    #556069
  • 🇺🇸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
  • 🇺🇸United States mherchel Gainesville, FL, US

    Added testing steps (original doc here)

  • 🇺🇸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>

  • Pipeline finished with Success
    10 days ago
    #557120
  • 🇪🇸Spain fjgarlin

    Added deployment steps.

  • 🇪🇸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
  • 🇪🇸Spain fjgarlin

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

  • 🇪🇸Spain fjgarlin

    Chrome / Firefox / Safari on Wide screens.

  • 🇪🇸Spain fjgarlin

    Chrome / Firefox / Safari on narrow screens ✅

  • 🇪🇸Spain fjgarlin

    Also tested on Safari and iPhone ✅

  • 🇪🇸Spain fjgarlin

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

  • 🇪🇸Spain fjgarlin

    Updated IS to include link to figma

  • 🇪🇸Spain fjgarlin

    Updated testing matrix.

Production build 0.71.5 2024