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

feat(mega-menu): Adding aria-describedby in info link - FRONT-4520 #3486

Merged
merged 12 commits into from
Jul 16, 2024
Merged

feat(mega-menu): Adding aria-describedby in info link - FRONT-4520 #3486

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
cfeab9c
feat(mega-menu): Adding aria-descrbiedby in info link - FRONT-4520
planctus Jul 15, 2024
edc30a4
Merge branch 'v4-dev' into FRONT-4520-Yuppy-uh-id-and-aria-desribed-b…
planctus Jul 15, 2024
88d871f
feat(mega-menu): Setting ids for info titles only in the test - FRONT…
planctus Jul 16, 2024
e7c567e
Merge branch 'v4-dev' into FRONT-4520-Yuppy-uh-id-and-aria-desribed-b…
planctus Jul 16, 2024
f654470
feat(mega-menu): Fixing the test ids - FRONT-4520
planctus Jul 16, 2024
dbe23c9
feat(mega-menu): Using item's id in the info link id generation - FRO…
planctus Jul 16, 2024
742fa04
feat(mega-menu): Better semantic for these ids - FRONT-4520
planctus Jul 16, 2024
8a7a0f7
feat(mega-menu): Adding support for Space for expandable menu items -…
planctus Jul 16, 2024
8748dd6
Merge branch 'v4-dev' into FRONT-4520-Yuppy-uh-id-and-aria-desribed-b…
planctus Jul 16, 2024
2b7fffe
Merge branch 'v4-dev' of github.com:ec-europa/europa-component-librar…
planctus Jul 16, 2024
bbfa9fb
feat(mega-menu): Changing approach for space press handling - FRONT-4520
planctus Jul 16, 2024
7649318
Merge branch 'FRONT-4520-Yuppy-uh-id-and-aria-desribed-by-hurra' of g…
planctus Jul 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 40 additions & 0 deletions src/implementations/twig/components/mega-menu/__snapshots__/mega-menu.test.js.snap
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading