From be7bc711528180fb35b43db995dce7df86e68eb6 Mon Sep 17 00:00:00 2001 From: William B <7444334+whabanks@users.noreply.github.com> Date: Wed, 22 May 2024 14:59:21 -0400 Subject: [PATCH] Convert menus to disclosure pattern (#1814) * Begin converting menues to disclosure pattern * Convert main menu botton to disclosure menu - Fix alignment issues with main menu sub menu items - Correct alignment issues between the account menu and main menu buttoms in their flex container - Standarize the nav_menu_item_mobile link styling * Handle keyboard navigation in disclosure menu - Adds support for navigating through menus with arrow keys left and right map to up and down the menu - Add support for going to the beginning / end of the menu via Home / End keys - Added focus control to prevent a situation where mutliple disclosure menus could be open at a time breaking the focus control * Add button role to element that opens the menu - Fixed an issue where home/end keys were not working properly with mac keys - Fixed an issue where using Tab / Shift+Tab could break focus out of the disclosure menu without closing the menu - Fixed an issue where pressing the spacebar while on a menu link would scroll the page down instead of following the focused menu link - Since the keydown events are bound to the window object if we preventDefault as soon as it fires it will prevent common hotkeys from working on the site * Check if menu is open before executing keypress logic * Add default width for disclosure menus - Menu widths are now limited to 20ch - Use nav_menu_item_mobile component for the mobile account menu instead of manually specifying list items and anchors - Corrected item alignment issues with the account menu - Regen tailwind * Close previously opened menu when opening a new menu - Opening another menu will now close any currently open menus and reset focus before opening the next menu requested - Regen CSS - Stubbed a blur event to handle closing the currently open menu when clicking anything other than the menu toggle itself, or any of the menu items * Add logic to ensure that only one menu can be open at a time - Implemented blur event that closes the currently open menu when a user clicks outside of the menu - Removed menuOverlay.js that is now no longer used and was interfering with the current implementation - Updated gulpfile - Added menu.css and styles to unify the disclosure menu max widths - Regened tailwind css * Fix focus bugs - Closing a menu now resets the property, ensuring that when the menu is re-opened navigation starts from the first item in the menu instead of the last item that was selected before the menu was closed - Opening a menu -> opening another menu -> then closing that menu will no longer return the focus to the button associated with the first menu that was opened. * task: add disclosure menu test suite * task: add disclosure menu tests to CI * fix: turn on test isolation in cypress * fix(app_pages tests): simplify code and rely on cy.session for login * fix(disclosure menu tests): use `cy.login` command for login; ensure test navigates to `/` at the start * test(disclosure_menu): add a11y test to suite * Fix cypress a11y violations - Removed redundant role=button - Added unique aria-label names for mobile menus - Fixed invalid descendant tags of \ No newline at end of file diff --git a/app/templates/partials/nav/gc_header_nav.html b/app/templates/partials/nav/gc_header_nav.html index 16473a6cec..ccd25f7d54 100644 --- a/app/templates/partials/nav/gc_header_nav.html +++ b/app/templates/partials/nav/gc_header_nav.html @@ -9,25 +9,25 @@ {% endif %}
-