Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(menu): Bring the user back to the open/close button when reaching the last item in mobile - FRONT-4288 #3276

Merged
merged 5 commits into from
Mar 20, 2024
Merged

fix(menu): Bring the user back to the open/close button when reaching the last item in mobile - FRONT-4288 #3276

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
2ddfa92
fix(menu): Bring the user back to the open/close button when reaching…
planctus Mar 5, 2024
1ff9efe
Merge branch 'v4-dev' into FRONT-4288-Menu-keyboard
planctus Mar 18, 2024
76cf270
fix(menu): Adding focus trap, still an issue in storybook - FRONT-4288
planctus Mar 18, 2024
7ee1409
fix(menu): Deactivating trap on resize for desktop viewports - FRONT-…
planctus Mar 18, 2024
a9e0cbf
Merge branch 'v4-dev' into FRONT-4288-Menu-keyboard
planctus Mar 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
22 changes: 15 additions & 7 deletions src/implementations/vanilla/components/menu/menu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import Stickyfill from 'stickyfilljs';
import { queryOne, queryAll } from '@ecl/dom-utils';
import EventManager from '@ecl/event-manager';
import isMobile from 'mobile-device-detect';
import { createFocusTrap } from 'focus-trap';

/**
* @param {HTMLElement} element DOM element for component instantiation and scope
Expand Down Expand Up @@ -329,6 +330,10 @@ export class Menu {

// Init sticky header
this.stickyInstance = new Stickyfill.Sticky(this.element);
this.focusTrap = createFocusTrap(this.element, {
onActivate: () => this.element.classList.add('trap-is-active'),
onDeactivate: () => this.element.classList.remove('trap-is-active'),
});

// Hack to prevent css transition to be played on page load on chrome
setTimeout(() => {
Expand Down Expand Up @@ -529,6 +534,7 @@ export class Menu {
// Scroll to top to ensure the menu is correctly positioned.
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;

// Disable transition
this.element.classList.remove('ecl-menu--transition');

Expand All @@ -538,7 +544,9 @@ export class Menu {

// Check global display
this.isDesktop = this.useDesktopDisplay();

if (this.isDesktop) {
this.focusTrap.deactivate();
}
// Update items display
this.totalItemsWidth = 0;
if (this.items) {
Expand Down Expand Up @@ -997,11 +1005,9 @@ export class Menu {
}

// Set focus to hamburger button
if (this.open) {
this.open.focus();
}

this.enableScroll();
this.focusTrap.deactivate();
this.isOpen = false;
this.trigger('onClose', e);

Expand Down Expand Up @@ -1253,9 +1259,11 @@ export class Menu {
if (caretButton && element !== caretButton) {
return;
}

// This is the last item, go back to close button
this.close.focus();
const focusedEl = document.activeElement;
const isStillMenu = this.element.contains(focusedEl);
if (!isStillMenu) {
this.focusTrap.activate();
}
}
}
}
Expand Down