From c1f923a1eb74abe7dd9cf59c460fc5c4ffefbe02 Mon Sep 17 00:00:00 2001 From: planctus Date: Tue, 16 Jul 2024 14:00:28 +0300 Subject: [PATCH] feat(mega-menu): Adding aria-describedby in info link - FRONT-4520 (#3486) * feat(mega-menu): Adding aria-descrbiedby in info link - FRONT-4520 * feat(mega-menu): Setting ids for info titles only in the test - FRONT-4520 * feat(mega-menu): Fixing the test ids - FRONT-4520 * feat(mega-menu): Using item's id in the info link id generation - FRONT-4520 * feat(mega-menu): Better semantic for these ids - FRONT-4520 * feat(mega-menu): Adding support for Space for expandable menu items - FRONT-4520 * feat(mega-menu): Changing approach for space press handling - FRONT-4520 --- .../__snapshots__/mega-menu.test.js.snap | 40 +++++++++++++++++++ .../mega-menu/mega-menu-item.html.twig | 11 ++++- .../components/mega-menu/mega-menu.test.js | 6 +++ .../vanilla/components/mega-menu/mega-menu.js | 18 +++++++++ 4 files changed, 74 insertions(+), 1 deletion(-) 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 6aeea53e52e..d60551378a5 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`] = ` > About the News and Media @@ -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`] = ` > About the European Commission @@ -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`] = ` > About key priorities @@ -1173,6 +1178,7 @@ exports[`Mega Menu Default renders correctly with external items in the first le > About the News and Media @@ -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 > About the European Commission @@ -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 > About key priorities @@ -2195,6 +2205,7 @@ exports[`Mega Menu Default renders correctly with extra attributes 1`] = ` > About the News and Media @@ -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`] = ` > About the European Commission @@ -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`] = ` > About key priorities @@ -3215,6 +3230,7 @@ exports[`Mega Menu Default renders correctly with extra attributes for the featu > About the News and Media @@ -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 > About the European Commission @@ -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 > About key priorities @@ -4237,6 +4257,7 @@ exports[`Mega Menu Default renders correctly with extra attributes for the fist > About the News and Media @@ -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 > About the European Commission @@ -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 > About key priorities @@ -5257,6 +5282,7 @@ exports[`Mega Menu Default renders correctly with extra attributes for the secon > About the News and Media @@ -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 > About the European Commission @@ -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 > About key priorities @@ -6278,6 +6308,7 @@ exports[`Mega Menu Default renders correctly with extra attributes for the see a > About the News and Media @@ -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 > About the European Commission @@ -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 > About key priorities @@ -7298,6 +7333,7 @@ exports[`Mega Menu Default renders correctly with extra class names 1`] = ` > About the News and Media @@ -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`] = ` > About the European Commission @@ -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`] = ` > About key priorities 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 4dc51937abb..8c09b526548 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 %} - {{ _info.title }} + + {{- _info.title -}} + {% endif %}
{%- if _info.content is not empty -%} @@ -173,6 +179,9 @@ size: 'xs', }, extra_classes: _info.link.extra_classes|default('') ~ ' ecl-mega-menu__info-link', + extra_attributes: [{ + name: 'aria-describedby', value: _info_title_id, + }], }) only %} {%- 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 576c98cb3d2..6a893416779 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 8ee83219549..8b91bb2390f 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;