[MWPW-163735] - Added Local Nav keyboard navigation for mobile GNAV redesign #3321
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Deva309
requested review from
salonijain3,
bandana147,
sharmrj,
nishantka and
sonawanesnehal3
as code owners
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## mobile-gnav #3321 +/- ##
==============================================
Coverage ? 98.84%
==============================================
Files ? 70
Lines ? 8660
Branches ? 0
==============================================
Hits ? 8560
Misses ? 100
Partials ? 0 ☔ View full report in Codecov by Sentry. |
Deva309
requested review from
nishantka,
sharmrj and
sonawanesnehal3
and removed request for
sharmrj,
nishantka and
sonawanesnehal3
mokimo
reviewed
Dec 6, 2024
| @@ -993,6 +995,18 @@ class Gnav { | |||
| const elements = [...document.querySelectorAll('.feds-localnav .feds-navItem')].find( | |||
| (el) => el.textContent.trim() === navItem.textContent, | |||
| ); | |||
| const allLocalnavLinks = [...document.querySelectorAll('.feds-localnav button, .feds-localnav a, .feds-localnav .feds-menu-headline')]; | |||
There was a problem hiding this comment.
There's a specific keyboard navigation file, should that go in here or the more general global nav file?
There was a problem hiding this comment.
@mokimo Moved this piece of code as part of keyboard navigation by creating a separate file specifically for LocalNav.
bandana147
pushed a commit
that referenced
this pull request
Dec 9, 2024
…edesign (#3321) * Added localnav keyboard navigation for mobile gnav redesign * Added fixes for Local nav along with keyboard navigation * lint fix
bandana147
pushed a commit
that referenced
this pull request
Dec 13, 2024
…edesign (#3321) * Added localnav keyboard navigation for mobile gnav redesign * Added fixes for Local nav along with keyboard navigation * lint fix
bandana147
pushed a commit
that referenced
this pull request
Jan 7, 2025
…edesign (#3321) * Added localnav keyboard navigation for mobile gnav redesign * Added fixes for Local nav along with keyboard navigation * lint fix
bandana147
pushed a commit
that referenced
this pull request
Jan 9, 2025
…edesign (#3321) * Added localnav keyboard navigation for mobile gnav redesign * Added fixes for Local nav along with keyboard navigation * lint fix
sharmrj
added a commit
that referenced
this pull request
Jan 10, 2025
* MWPW-161082 [Base Implementation] Mobile Global Nav Redesign Rollout (#3092) * basic functionality of mobile gnav * Made the localnav sticky, and the gnav not sticky when there is a local nav * Local nav now resides outside header to make it sticky correctly * fixed a few small css details when opening and closing the mega menu * render the mainmenu on non local nav pages and the brand icon on local nav pages on the mega menu * don't show local nav unless it's in the right place * Make mobile styles the default * Mobile Gnav Redesign for Adobe Home (#3151) * fix the popup showing up for a split second when the hamburger menu is first opened * Undid the previous commit because it didn't work * switched out animations to transitions for fedspopup * Made section buttons have a margin while regular navlinks occupy the whole space * Fixed section menu spacing * Spacing of section after navlink on adobe home * Like the previous commit but actually works * divider line * changed last of kind to last of type * fixed divider spacing * link spacing * we need to pad the last nav link as well * nav link font size * rules apply only to the links not the sections * fixed the selector for the previous commit * I sure hope it works this time * Fixed the navLinks in light mode * Mobile gnav breadcrumbs new design (#3155) * Breadcrumbs design change * Hide breadcrumbs on first sidebar * Fixing no breadcrumbs page * Fixing css * Fixing css for no breadcrumbs page * Adding main menu placeholder (#3157) * Adding main menu placeholder * Avoiding replaceText if localNav * Lint fix * Keyboard navigation for mobile gnav redesign (#3158) * Keyboard navigation for mobile gnav redesign * close main menu on escape * fixed lint issue * Localnav design and event listeners (#3164) * Localnav design and event listeners * Lint fix * Adding Overview title support * Handling CLS issue for localnav - mobile gnav redesign (#3198) * Handling CLS issue by preserving space for localnav * Adding localnav config * Adding overview text from placeholder * Adding meta data check for new mobile gnav feature flag * Lint fix * Adding localnav only when mobile gnav v2 is true * Adding image support for large menu and medium menus on gnav (#3235) * Adding image support on gnav * Decorating localnav only if it has one section * Lint fix * Fixing dropdown promise issue * Handle CLS issue on localnav: mobile redesign (#3253) * Check for localnav * Moving getGnanSource to utils * Awaiting gnav source * Adding lanalog when there is mismatch with content and name * Lint fixes * Changing height of localnav * Temp window url for testinf * Temp window url for testing * Added Analytics Attributes to Tabs and Tabpanels (#3275) * Added analytics attributes to tabs and tabpanels * Handle cases where we don't find daa attributes * [MWPW-159665] - Gnav redesign animations (#3234) * MWPW-161082 [Base Implementation] Mobile Global Nav Redesign Rollout (#3092) * basic functionality of mobile gnav * Made the localnav sticky, and the gnav not sticky when there is a local nav * Local nav now resides outside header to make it sticky correctly * fixed a few small css details when opening and closing the mega menu * render the mainmenu on non local nav pages and the brand icon on local nav pages on the mega menu * don't show local nav unless it's in the right place * Make mobile styles the default * Mobile Gnav Redesign for Adobe Home (#3151) * fix the popup showing up for a split second when the hamburger menu is first opened * Undid the previous commit because it didn't work * switched out animations to transitions for fedspopup * Made section buttons have a margin while regular navlinks occupy the whole space * Fixed section menu spacing * Spacing of section after navlink on adobe home * Like the previous commit but actually works * divider line * changed last of kind to last of type * fixed divider spacing * link spacing * we need to pad the last nav link as well * nav link font size * rules apply only to the links not the sections * fixed the selector for the previous commit * I sure hope it works this time * Fixed the navLinks in light mode * Mobile gnav breadcrumbs new design (#3155) * Breadcrumbs design change * Hide breadcrumbs on first sidebar * Fixing no breadcrumbs page * Fixing css * Fixing css for no breadcrumbs page * Adding main menu placeholder (#3157) * Adding main menu placeholder * Avoiding replaceText if localNav * Lint fix * Keyboard navigation for mobile gnav redesign (#3158) * Keyboard navigation for mobile gnav redesign * close main menu on escape * fixed lint issue * Localnav design and event listeners (#3164) * Localnav design and event listeners * Lint fix * Adding Overview title support * Added animations for mobile redesign * Polish animations * Polish animations * polish animations * Resolved comment --------- Co-authored-by: Raghav Sharma <118168183+sharmrj@users.noreply.github.com> Co-authored-by: Raghav Sharma <raghavs@adobe.com> Co-authored-by: Bandana Laishram <bandanalaishram@gmail.com> * Adding active column logic in a large menu (#3276) * Adding active column logic in a large menu * Apply suggestions from code review Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * [MWPW-159667] - Add dark mode fixes (#3285) * dark mode changes * lint-fix * small fix for animation * Fix spacing and dark mode things for localnav * Set page overlay for local nav * Added some pending fix for keyboard navigation * Added some pending fix for keyboard navigation * Added some pending fix for keyboard navigation * [MWPW-163735] - Added Local Nav keyboard navigation for mobile GNAV redesign (#3321) * Added localnav keyboard navigation for mobile gnav redesign * Added fixes for Local nav along with keyboard navigation * lint fix * Gnav bugs (#3346) * Fixing mega menu CTA height * Localnav z index and removing default makeActiveTab call * Localnav z index to 9 * Fix: georouting issue * [MWPW-164088] - UT for mobile GNAV redesign (#3359) * UT for mobile GNAV redesign * lint fix * lint fix * lint fix * lint fix * Added More UT's * Making localnav auto dismiss on click outside (#3368) * Making localnav auto dismiss on click outside * making active link in localnav bold * Fix for multi level localnav click * UT fixes * Making localnav close on curtain click * Fix: String check update for localnav * Adding disable-scroll when localnav is opened * Adding scroll for tabs * Update libs/blocks/global-navigation/utilities/utilities.js Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Added fix for UT and bug MWPW-163859 * Making the feature flag value to on * Lint Fix * Decorating localnav before adding events * MWPW-163912 * MWPW-163912 bug fix * MWPW-163912 bug fix * [mobile gnav] view plans and pricing CTA added is not seen visible in iphone 15 in landscape and portrait mode (#3390) * changed vh to dvh (for iphones) * made localnav curtain height lvh instead of dvh * gave localnav curtain a min height of webkit fill available * missed a semicolon * padded localnav curtain with safe-area-inset-bottom * made local nav curtain slightly larger than the view port to prevent a small space that allows clicking on the bottom * Changing the flag for new nav to off by default for standalone gnav * Removing list style * Fix for bugs MWPW-163914 and MWPW-163907 * MWPW-163912 bug fix * MWPW-164385 [Mobile Gnav]when the megamenu is opened and scrolled seen the overlapping issue on the content and screen is freezed (#3410) * the mobile mega menu on localnav pages now correctly takes scroll into account when opening * Extra pixel * MWPW-163515: add daa-ll attributes for new mobile gnav elements (#3380) * MWPW-163515: add daa-ll attributes for new mobile gnav elements * update comment * Fix: String check update for localnav * Adding disable-scroll when localnav is opened * Adding scroll for tabs * Update libs/blocks/global-navigation/utilities/utilities.js Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Added fix for UT and bug MWPW-163859 * Making the feature flag value to on * Lint Fix * Decorating localnav before adding events * MWPW-163912 * MWPW-163912 bug fix * MWPW-163912 bug fix * [mobile gnav] view plans and pricing CTA added is not seen visible in iphone 15 in landscape and portrait mode (#3390) * changed vh to dvh (for iphones) * made localnav curtain height lvh instead of dvh * gave localnav curtain a min height of webkit fill available * missed a semicolon * padded localnav curtain with safe-area-inset-bottom * made local nav curtain slightly larger than the view port to prevent a small space that allows clicking on the bottom * Changing the flag for new nav to off by default for standalone gnav * Removing list style * Fix for bugs MWPW-163914 and MWPW-163907 * MWPW-163515-156410: fix analytics issues * MWPW-163515: add daa-lh for localnav --------- Co-authored-by: Bandana Laishram <bandanalaishram@gmail.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Dev Ashish Sardana <devashish.3093@gmail.com> Co-authored-by: Raghav Sharma <118168183+sharmrj@users.noreply.github.com> * [MWPW-160542] - LNAV accessibility * Rempoving bold from multi level dropdown * Making color of feds headline for localnav to link color * [MWPW-164088] - UT fixes * Lint fixes * [MWPW-164443] - Bug fix * [MWPW-160542] - Accessibility Fixes * UT and Lint Fixes * [MWPW-160542] - Accessibility Fixes * [MWPW-160542] - Accessibility Fix for breadcrumb * [MWPW-164648] & [MWPW-164649] Bug fix * Fix: Checking for viewport before decorating localnav * [MWPW-164649] - accesibility fix for custom links * Fix: Adding checks for valid localNav * Fix: font fix for button * Lint fix * Decorating localnav * Hiding localnav on desktop view * MWPW-163916 [Mobile GNAV] | Flickering issue while scrolling when LNAV is opened (#3419) * Add overflow hidden to html if the body has it for iOS safari * Added position fixed to disable scroll for ios safari * use position: relative instead of fixed * undo previous changes * removed position absolute from the feds localnav curtain * removed the different height when the localnav curtain is active * trying position: absolute f=to prevent scrolling on iOS * add overflow hidden to html tag as when the body has it * Undo previous change * Used event.preventDefault on a scroll event on the window to prevent scrolling in iOS * tried event.preventDefault to stop body from scrolling on iOS Safari * Set the scroll to the current number on scroll when scroll is disabled * Change scroll to touchmove * iOS safari defaults event listener passive to true * Small refactor * disabled scroll for the non localnav mobile gnav as well * remove scroll on body instead of window * Disable body scroll when local nav or mobile menu is open * corrected the import * fixed a typo * Use position fixed to prevent scrolling in iOS * eslint * more eslint problems * Fixed an issue where swtiching from mobile to desktop made the dekstop mega menu popup have the wrong position * gave ios-disable-scroll the correct behavior for non localnavs as well * Fixed a couple of bugs * fixed an issue where firefox treats position fixed as position absolute * [MWPW-164624] - Bug fix * MWPW-164817 [Mobile GNAV] | The close button is not visible when the hamburger menu is clicked, and the screen shifts when clicking on the Adobe Creative Cloud drop-down (#3432) Fixed an issue on ios Safari where position fixed was changing the dimensions of the body element * Adding support for no megamenu localnav (#3421) * Mobile gnav tests (#3433) * Fixed unit tests for gnav promo * Prevent other tests from breaking * Added a test case for safari * Added an escape test for localnav * Mobile Gnav Standalone Localnav curtain was missing some styles (#3435) * Added styles necessary for the standalone localnav to function * missed a css variable * Css fix for Megamenu title * Css fix for standalone localnav * Css fix for standalone localnav * Making gnav promo sticky (#3434) * Moving Promo out of Header * Moving Promo out of Header * Cls fix for promo * Handling desktop gnav sticky * Removing has promo if no promo * Css fix * Test case fix * Test case fix * Test case fix * Test case fix * Fixed popup with promo (#3436) * Font size fix for tabs * Fixed the popup position for when there is no promo (#3439) add a condition for when the nav promo offset is subtracted from the top of the popup * [MWPW-164444] and [MWPW-164624] bug fixes * Adding shadow to localnav bottom * Popup position fix for iPhone (#3440) * add a condition for when the nav promo offset is subtracted from the top of the popup * fixed popup height for iphone * moved the popup 1px up * Fixed popup not showing properly on safari * added padding-bottom: env(safe-area-inset-bottom) for our popup * min height 100dvh * removed min height and moved back to the old height * ios html height must be 100dvh * + should be has --------- Co-authored-by: Bandana Laishram <bandanalaishram@gmail.com> Co-authored-by: Dev Ashish Saradhana <41122199+Deva309@users.noreply.github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Dev Ashish Sardana <devashish.3093@gmail.com> Co-authored-by: nishantka <126539566+nishantka@users.noreply.github.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Added keyboard navigation for Local nav as part of mobile redesign along with some a11y changes.
Resolves: MWPW-163735
Test URLs:
QA:
https://main--federal--adobecom.hlx.page/federal/dev/blaishram/express/express?milolibs=mobile-localnav-a11y--milo--deva309