Skip to content

Commit

Permalink
feat(mega-menu): Adding aria-describedby in info link - FRONT-4520 (#…
Browse files Browse the repository at this point in the history 
…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
  • Loading branch information
@planctus
planctus authored Jul 16, 2024
1 parent c1a2d61 commit c1f923a
Show file tree
Hide file tree
Showing 4 changed files with 74 additions and 1 deletion.
40 changes: 40 additions & 0 deletions src/implementations/twig/components/mega-menu/__snapshots__/mega-menu.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -153,6 +153,7 @@ exports[`Mega Menu Default renders correctly 1`] = `
>
<span
class="ecl-mega-menu__info-title"
id="ecl-mega-menu-item-demo-1-info-title"
>
About the News and Media
</span>
Expand All @@ -165,6 +166,7 @@ exports[`Mega Menu Default renders correctly 1`] = `
Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<a
aria-describedby="ecl-mega-menu-item-demo-1-info-title"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-mega-menu__info-link"
href="/example"
>
Expand Down Expand Up @@ -575,6 +577,7 @@ exports[`Mega Menu Default renders correctly 1`] = `
>
<span
class="ecl-mega-menu__info-title"
id="ecl-mega-menu-item-demo-2-info-title"
>
About the European Commission
</span>
Expand All @@ -587,6 +590,7 @@ exports[`Mega Menu Default renders correctly 1`] = `
Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<a
aria-describedby="ecl-mega-menu-item-demo-2-info-title"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-mega-menu__info-link"
href="/example"
>
Expand Down Expand Up @@ -708,6 +712,7 @@ exports[`Mega Menu Default renders correctly 1`] = `
>
<span
class="ecl-mega-menu__info-title"
id="ecl-mega-menu-item-demo-3-info-title"
>
About key priorities
</span>
Expand Down Expand Up @@ -1173,6 +1178,7 @@ exports[`Mega Menu Default renders correctly with external items in the first le
>
<span
class="ecl-mega-menu__info-title"
id="ecl-mega-menu-item-demo-1-info-title"
>
About the News and Media
</span>
Expand All @@ -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.
</div>
<a
aria-describedby="ecl-mega-menu-item-demo-1-info-title"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-mega-menu__info-link"
href="/example"
>
Expand Down Expand Up @@ -1595,6 +1602,7 @@ exports[`Mega Menu Default renders correctly with external items in the first le
>
<span
class="ecl-mega-menu__info-title"
id="ecl-mega-menu-item-demo-2-info-title"
>
About the European Commission
</span>
Expand All @@ -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.
</div>
<a
aria-describedby="ecl-mega-menu-item-demo-2-info-title"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-mega-menu__info-link"
href="/example"
>
Expand Down Expand Up @@ -1728,6 +1737,7 @@ exports[`Mega Menu Default renders correctly with external items in the first le
>
<span
class="ecl-mega-menu__info-title"
id="ecl-mega-menu-item-demo-3-info-title"
>
About key priorities
</span>
Expand Down Expand Up @@ -2195,6 +2205,7 @@ exports[`Mega Menu Default renders correctly with extra attributes 1`] = `
>
<span
class="ecl-mega-menu__info-title"
id="ecl-mega-menu-item-demo-1-info-title"
>
About the News and Media
</span>
Expand All @@ -2207,6 +2218,7 @@ exports[`Mega Menu Default renders correctly with extra attributes 1`] = `
Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<a
aria-describedby="ecl-mega-menu-item-demo-1-info-title"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-mega-menu__info-link"
href="/example"
>
Expand Down Expand Up @@ -2617,6 +2629,7 @@ exports[`Mega Menu Default renders correctly with extra attributes 1`] = `
>
<span
class="ecl-mega-menu__info-title"
id="ecl-mega-menu-item-demo-2-info-title"
>
About the European Commission
</span>
Expand All @@ -2629,6 +2642,7 @@ exports[`Mega Menu Default renders correctly with extra attributes 1`] = `
Description text, lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<a
aria-describedby="ecl-mega-menu-item-demo-2-info-title"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-mega-menu__info-link"
href="/example"
>
Expand Down Expand Up @@ -2750,6 +2764,7 @@ exports[`Mega Menu Default renders correctly with extra attributes 1`] = `
>
<span
class="ecl-mega-menu__info-title"
id="ecl-mega-menu-item-demo-3-info-title"
>
About key priorities
</span>
Expand Down Expand Up @@ -3215,6 +3230,7 @@ exports[`Mega Menu Default renders correctly with extra attributes for the featu
>
<span
class="ecl-mega-menu__info-title"
id="ecl-mega-menu-item-demo-1-info-title"
>
About the News and Media
</span>
Expand All @@ -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.
</div>
<a
aria-describedby="ecl-mega-menu-item-demo-1-info-title"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-mega-menu__info-link"
href="/example"
>
Expand Down Expand Up @@ -3638,6 +3655,7 @@ exports[`Mega Menu Default renders correctly with extra attributes for the featu
>
<span
class="ecl-mega-menu__info-title"
id="ecl-mega-menu-item-demo-2-info-title"
>
About the European Commission
</span>
Expand All @@ -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.
</div>
<a
aria-describedby="ecl-mega-menu-item-demo-2-info-title"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-mega-menu__info-link"
href="/example"
>
Expand Down Expand Up @@ -3771,6 +3790,7 @@ exports[`Mega Menu Default renders correctly with extra attributes for the featu
>
<span
class="ecl-mega-menu__info-title"
id="ecl-mega-menu-item-demo-3-info-title"
>
About key priorities
</span>
Expand Down Expand Up @@ -4237,6 +4257,7 @@ exports[`Mega Menu Default renders correctly with extra attributes for the fist
>
<span
class="ecl-mega-menu__info-title"
id="ecl-mega-menu-item-demo-1-info-title"
>
About the News and Media
</span>
Expand All @@ -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.
</div>
<a
aria-describedby="ecl-mega-menu-item-demo-1-info-title"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-mega-menu__info-link"
href="/example"
>
Expand Down Expand Up @@ -4659,6 +4681,7 @@ exports[`Mega Menu Default renders correctly with extra attributes for the fist
>
<span
class="ecl-mega-menu__info-title"
id="ecl-mega-menu-item-demo-2-info-title"
>
About the European Commission
</span>
Expand All @@ -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.
</div>
<a
aria-describedby="ecl-mega-menu-item-demo-2-info-title"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-mega-menu__info-link"
href="/example"
>
Expand Down Expand Up @@ -4792,6 +4816,7 @@ exports[`Mega Menu Default renders correctly with extra attributes for the fist
>
<span
class="ecl-mega-menu__info-title"
id="ecl-mega-menu-item-demo-3-info-title"
>
About key priorities
</span>
Expand Down Expand Up @@ -5257,6 +5282,7 @@ exports[`Mega Menu Default renders correctly with extra attributes for the secon
>
<span
class="ecl-mega-menu__info-title"
id="ecl-mega-menu-item-demo-1-info-title"
>
About the News and Media
</span>
Expand All @@ -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.
</div>
<a
aria-describedby="ecl-mega-menu-item-demo-1-info-title"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-mega-menu__info-link"
href="/example"
>
Expand Down Expand Up @@ -5680,6 +5707,7 @@ exports[`Mega Menu Default renders correctly with extra attributes for the secon
>
<span
class="ecl-mega-menu__info-title"
id="ecl-mega-menu-item-demo-2-info-title"
>
About the European Commission
</span>
Expand All @@ -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.
</div>
<a
aria-describedby="ecl-mega-menu-item-demo-2-info-title"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-mega-menu__info-link"
href="/example"
>
Expand Down Expand Up @@ -5813,6 +5842,7 @@ exports[`Mega Menu Default renders correctly with extra attributes for the secon
>
<span
class="ecl-mega-menu__info-title"
id="ecl-mega-menu-item-demo-3-info-title"
>
About key priorities
</span>
Expand Down Expand Up @@ -6278,6 +6308,7 @@ exports[`Mega Menu Default renders correctly with extra attributes for the see a
>
<span
class="ecl-mega-menu__info-title"
id="ecl-mega-menu-item-demo-1-info-title"
>
About the News and Media
</span>
Expand All @@ -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.
</div>
<a
aria-describedby="ecl-mega-menu-item-demo-1-info-title"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-mega-menu__info-link"
href="/example"
>
Expand Down Expand Up @@ -6700,6 +6732,7 @@ exports[`Mega Menu Default renders correctly with extra attributes for the see a
>
<span
class="ecl-mega-menu__info-title"
id="ecl-mega-menu-item-demo-2-info-title"
>
About the European Commission
</span>
Expand All @@ -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.
</div>
<a
aria-describedby="ecl-mega-menu-item-demo-2-info-title"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-mega-menu__info-link"
href="/example"
>
Expand Down Expand Up @@ -6833,6 +6867,7 @@ exports[`Mega Menu Default renders correctly with extra attributes for the see a
>
<span
class="ecl-mega-menu__info-title"
id="ecl-mega-menu-item-demo-3-info-title"
>
About key priorities
</span>
Expand Down Expand Up @@ -7298,6 +7333,7 @@ exports[`Mega Menu Default renders correctly with extra class names 1`] = `
>
<span
class="ecl-mega-menu__info-title"
id="ecl-mega-menu-item-demo-1-info-title"
>
About the News and Media
</span>
Expand All @@ -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.
</div>
<a
aria-describedby="ecl-mega-menu-item-demo-1-info-title"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-mega-menu__info-link"
href="/example"
>
Expand Down Expand Up @@ -7720,6 +7757,7 @@ exports[`Mega Menu Default renders correctly with extra class names 1`] = `
>
<span
class="ecl-mega-menu__info-title"
id="ecl-mega-menu-item-demo-2-info-title"
>
About the European Commission
</span>
Expand All @@ -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.
</div>
<a
aria-describedby="ecl-mega-menu-item-demo-2-info-title"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-mega-menu__info-link"
href="/example"
>
Expand Down Expand Up @@ -7853,6 +7892,7 @@ exports[`Mega Menu Default renders correctly with extra class names 1`] = `
>
<span
class="ecl-mega-menu__info-title"
id="ecl-mega-menu-item-demo-3-info-title"
>
About key priorities
</span>
Expand Down
11 changes: 10 additions & 1 deletion src/implementations/twig/components/mega-menu/mega-menu-item.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand All @@ -154,7 +155,12 @@
data-ecl-mega-menu-mega
>
{% if _info.title is not empty %}
<span class="ecl-mega-menu__info-title">{{ _info.title }}</span>
<span
class="ecl-mega-menu__info-title"
id="{{ _info_title_id }}"
>
{{- _info.title -}}
</span>
{% endif %}
<div class="ecl-mega-menu__info-scrollable">
{%- if _info.content is not empty -%}
Expand All @@ -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 -%}
</div>
Expand Down
6 changes: 6 additions & 0 deletions src/implementations/twig/components/mega-menu/mega-menu.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down
18 changes: 18 additions & 0 deletions src/implementations/vanilla/components/mega-menu/mega-menu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down

1 comment on commit c1f923a

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚀 Deployed on https://v4-dev--europa-component-library.netlify.app

Please sign in to comment.