diff --git a/src/implementations/twig/components/mega-menu/__snapshots__/mega-menu.test.js.snap b/src/implementations/twig/components/mega-menu/__snapshots__/mega-menu.test.js.snap
index 6aeea53e52..d60551378a 100644
--- a/src/implementations/twig/components/mega-menu/__snapshots__/mega-menu.test.js.snap
+++ b/src/implementations/twig/components/mega-menu/__snapshots__/mega-menu.test.js.snap
@@ -153,6 +153,7 @@ exports[`Mega Menu Default renders correctly 1`] = `
>
@@ -165,6 +166,7 @@ exports[`Mega Menu Default renders correctly 1`] = `
Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
@@ -575,6 +577,7 @@ exports[`Mega Menu Default renders correctly 1`] = `
>
@@ -587,6 +590,7 @@ exports[`Mega Menu Default renders correctly 1`] = `
Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
@@ -708,6 +712,7 @@ exports[`Mega Menu Default renders correctly 1`] = `
>
@@ -1173,6 +1178,7 @@ exports[`Mega Menu Default renders correctly with external items in the first le
>
@@ -1185,6 +1191,7 @@ exports[`Mega Menu Default renders correctly with external items in the first le
Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
@@ -1595,6 +1602,7 @@ exports[`Mega Menu Default renders correctly with external items in the first le
>
@@ -1607,6 +1615,7 @@ exports[`Mega Menu Default renders correctly with external items in the first le
Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
@@ -1728,6 +1737,7 @@ exports[`Mega Menu Default renders correctly with external items in the first le
>
@@ -2195,6 +2205,7 @@ exports[`Mega Menu Default renders correctly with extra attributes 1`] = `
>
@@ -2207,6 +2218,7 @@ exports[`Mega Menu Default renders correctly with extra attributes 1`] = `
Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
@@ -2617,6 +2629,7 @@ exports[`Mega Menu Default renders correctly with extra attributes 1`] = `
>
@@ -2629,6 +2642,7 @@ exports[`Mega Menu Default renders correctly with extra attributes 1`] = `
Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
@@ -2750,6 +2764,7 @@ exports[`Mega Menu Default renders correctly with extra attributes 1`] = `
>
@@ -3215,6 +3230,7 @@ exports[`Mega Menu Default renders correctly with extra attributes for the featu
>
@@ -3227,6 +3243,7 @@ exports[`Mega Menu Default renders correctly with extra attributes for the featu
Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
@@ -3638,6 +3655,7 @@ exports[`Mega Menu Default renders correctly with extra attributes for the featu
>
@@ -3650,6 +3668,7 @@ exports[`Mega Menu Default renders correctly with extra attributes for the featu
Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
@@ -3771,6 +3790,7 @@ exports[`Mega Menu Default renders correctly with extra attributes for the featu
>
@@ -4237,6 +4257,7 @@ exports[`Mega Menu Default renders correctly with extra attributes for the fist
>
@@ -4249,6 +4270,7 @@ exports[`Mega Menu Default renders correctly with extra attributes for the fist
Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
@@ -4659,6 +4681,7 @@ exports[`Mega Menu Default renders correctly with extra attributes for the fist
>
@@ -4671,6 +4694,7 @@ exports[`Mega Menu Default renders correctly with extra attributes for the fist
Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
@@ -4792,6 +4816,7 @@ exports[`Mega Menu Default renders correctly with extra attributes for the fist
>
@@ -5257,6 +5282,7 @@ exports[`Mega Menu Default renders correctly with extra attributes for the secon
>
@@ -5269,6 +5295,7 @@ exports[`Mega Menu Default renders correctly with extra attributes for the secon
Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
@@ -5680,6 +5707,7 @@ exports[`Mega Menu Default renders correctly with extra attributes for the secon
>
@@ -5692,6 +5720,7 @@ exports[`Mega Menu Default renders correctly with extra attributes for the secon
Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
@@ -5813,6 +5842,7 @@ exports[`Mega Menu Default renders correctly with extra attributes for the secon
>
@@ -6278,6 +6308,7 @@ exports[`Mega Menu Default renders correctly with extra attributes for the see a
>
@@ -6290,6 +6321,7 @@ exports[`Mega Menu Default renders correctly with extra attributes for the see a
Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
@@ -6700,6 +6732,7 @@ exports[`Mega Menu Default renders correctly with extra attributes for the see a
>
@@ -6712,6 +6745,7 @@ exports[`Mega Menu Default renders correctly with extra attributes for the see a
Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
@@ -6833,6 +6867,7 @@ exports[`Mega Menu Default renders correctly with extra attributes for the see a
>
@@ -7298,6 +7333,7 @@ exports[`Mega Menu Default renders correctly with extra class names 1`] = `
>
@@ -7310,6 +7346,7 @@ exports[`Mega Menu Default renders correctly with extra class names 1`] = `
Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
@@ -7720,6 +7757,7 @@ exports[`Mega Menu Default renders correctly with extra class names 1`] = `
>
@@ -7732,6 +7770,7 @@ exports[`Mega Menu Default renders correctly with extra class names 1`] = `
Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
@@ -7853,6 +7892,7 @@ exports[`Mega Menu Default renders correctly with extra class names 1`] = `
>
diff --git a/src/implementations/twig/components/mega-menu/mega-menu-item.html.twig b/src/implementations/twig/components/mega-menu/mega-menu-item.html.twig
index 4dc51937ab..8c09b52654 100644
--- a/src/implementations/twig/components/mega-menu/mega-menu-item.html.twig
+++ b/src/implementations/twig/components/mega-menu/mega-menu-item.html.twig
@@ -146,6 +146,7 @@
{# Info #}
{% if _info is not empty %}
{% set _info_classes = 'ecl-mega-menu__info' %}
+ {% set _info_title_id = _id ~ '-info-title' %}
{% if _info.link is not empty %}
{% set _info_classes = _info_classes ~ ' ecl-mega-menu__info--has-link' %}
{% endif %}
@@ -154,7 +155,12 @@
data-ecl-mega-menu-mega
>
{% if _info.title is not empty %}
-
+
{% endif %}
diff --git a/src/implementations/twig/components/mega-menu/mega-menu.test.js b/src/implementations/twig/components/mega-menu/mega-menu.test.js
index 576c98cb3d..6a89341677 100644
--- a/src/implementations/twig/components/mega-menu/mega-menu.test.js
+++ b/src/implementations/twig/components/mega-menu/mega-menu.test.js
@@ -8,6 +8,12 @@ import { axe, toHaveNoViolations } from 'jest-axe';
// Import data for tests
import data from '@ecl/specs-component-mega-menu/demo/data';
+data.items.forEach((item, i) => {
+ if (item.info) {
+ item.info.title_id = `info-title-id-${i}`;
+ }
+});
+
expect.extend(toHaveNoViolations);
describe('Mega Menu', () => {
diff --git a/src/implementations/vanilla/components/mega-menu/mega-menu.js b/src/implementations/vanilla/components/mega-menu/mega-menu.js
index 8ee8321954..8b91bb2390 100644
--- a/src/implementations/vanilla/components/mega-menu/mega-menu.js
+++ b/src/implementations/vanilla/components/mega-menu/mega-menu.js
@@ -925,6 +925,15 @@ export class MegaMenu {
}
// Key actions to navigate between first level menu items
if (cList.contains('ecl-mega-menu__link')) {
+ if (
+ (e.key === 'Space' || e.key === ' ') &&
+ element.parentElement.hasAttribute('aria-expanded')
+ ) {
+ element.click();
+
+ return;
+ }
+
if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
e.preventDefault();
let prevItem = element.previousSibling;
@@ -972,6 +981,15 @@ export class MegaMenu {
}
// Key actions to navigate between the sub-links
if (cList.contains('ecl-mega-menu__sublink')) {
+ if (
+ (e.key === 'Space' || e.key === ' ') &&
+ element.parentElement.hasAttribute('aria-expanded')
+ ) {
+ element.click();
+
+ return;
+ }
+
if (e.key === 'ArrowDown') {
e.preventDefault();
const nextItem = element.parentElement.nextSibling;