Skip to content

Commit

Permalink
feat(mega-menu): Aria-describedby on featured column title - FRONT-45…
Browse files Browse the repository at this point in the history 
…22 (#3487)

* feat(mega-menu): Aria-describedby on featured column title - FRONT-4522

* feat(mega-menu): Fixes - FRONT-4522
  • Loading branch information
@planctus
planctus authored Jul 16, 2024
1 parent 082ccb3 commit 33e491f
Show file tree
Hide file tree
Showing 4 changed files with 23 additions and 15 deletions.
24 changes: 16 additions & 8 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 @@ -86,7 +86,6 @@ exports[`Mega Menu Default renders correctly 1`] = `
</header>
<ul
class="ecl-mega-menu__list"
data-ecl-menu-list=""
>
<li
class="ecl-mega-menu__item"
Expand Down Expand Up @@ -353,6 +352,7 @@ exports[`Mega Menu Default renders correctly 1`] = `
/>
</picture>
<span
aria-describedby="item-2-1-id"
class="ecl-mega-menu__featured-title"
>
Featured items
Expand Down Expand Up @@ -895,6 +895,7 @@ exports[`Mega Menu Default renders correctly 1`] = `
/>
</picture>
<span
aria-describedby="research-and-innovation-id"
class="ecl-mega-menu__featured-title"
>
Featured items
Expand Down Expand Up @@ -1105,7 +1106,6 @@ exports[`Mega Menu Default renders correctly with external items in the first le
</header>
<ul
class="ecl-mega-menu__list"
data-ecl-menu-list=""
>
<li
class="ecl-mega-menu__item"
Expand Down Expand Up @@ -1372,6 +1372,7 @@ exports[`Mega Menu Default renders correctly with external items in the first le
/>
</picture>
<span
aria-describedby="item-2-1-id"
class="ecl-mega-menu__featured-title"
>
Featured items
Expand Down Expand Up @@ -1914,6 +1915,7 @@ exports[`Mega Menu Default renders correctly with external items in the first le
/>
</picture>
<span
aria-describedby="research-and-innovation-id"
class="ecl-mega-menu__featured-title"
>
Featured items
Expand Down Expand Up @@ -2126,7 +2128,6 @@ exports[`Mega Menu Default renders correctly with extra attributes 1`] = `
</header>
<ul
class="ecl-mega-menu__list"
data-ecl-menu-list=""
>
<li
class="ecl-mega-menu__item"
Expand Down Expand Up @@ -2393,6 +2394,7 @@ exports[`Mega Menu Default renders correctly with extra attributes 1`] = `
/>
</picture>
<span
aria-describedby="item-2-1-id"
class="ecl-mega-menu__featured-title"
>
Featured items
Expand Down Expand Up @@ -2935,6 +2937,7 @@ exports[`Mega Menu Default renders correctly with extra attributes 1`] = `
/>
</picture>
<span
aria-describedby="research-and-innovation-id"
class="ecl-mega-menu__featured-title"
>
Featured items
Expand Down Expand Up @@ -3145,7 +3148,6 @@ exports[`Mega Menu Default renders correctly with extra attributes for the featu
</header>
<ul
class="ecl-mega-menu__list"
data-ecl-menu-list=""
>
<li
class="ecl-mega-menu__item"
Expand Down Expand Up @@ -3412,6 +3414,7 @@ exports[`Mega Menu Default renders correctly with extra attributes for the featu
/>
</picture>
<span
aria-describedby="item-2-1-id"
class="ecl-mega-menu__featured-title"
>
Featured items
Expand Down Expand Up @@ -3955,6 +3958,7 @@ exports[`Mega Menu Default renders correctly with extra attributes for the featu
/>
</picture>
<span
aria-describedby="research-and-innovation-id"
class="ecl-mega-menu__featured-title"
>
Featured items
Expand Down Expand Up @@ -4165,7 +4169,6 @@ exports[`Mega Menu Default renders correctly with extra attributes for the fist
</header>
<ul
class="ecl-mega-menu__list"
data-ecl-menu-list=""
>
<li
class="ecl-mega-menu__item"
Expand Down Expand Up @@ -4433,6 +4436,7 @@ exports[`Mega Menu Default renders correctly with extra attributes for the fist
/>
</picture>
<span
aria-describedby="item-2-1-id"
class="ecl-mega-menu__featured-title"
>
Featured items
Expand Down Expand Up @@ -4975,6 +4979,7 @@ exports[`Mega Menu Default renders correctly with extra attributes for the fist
/>
</picture>
<span
aria-describedby="research-and-innovation-id"
class="ecl-mega-menu__featured-title"
>
Featured items
Expand Down Expand Up @@ -5185,7 +5190,6 @@ exports[`Mega Menu Default renders correctly with extra attributes for the secon
</header>
<ul
class="ecl-mega-menu__list"
data-ecl-menu-list=""
>
<li
class="ecl-mega-menu__item"
Expand Down Expand Up @@ -5453,6 +5457,7 @@ exports[`Mega Menu Default renders correctly with extra attributes for the secon
/>
</picture>
<span
aria-describedby="item-2-1-id"
class="ecl-mega-menu__featured-title"
>
Featured items
Expand Down Expand Up @@ -5995,6 +6000,7 @@ exports[`Mega Menu Default renders correctly with extra attributes for the secon
/>
</picture>
<span
aria-describedby="research-and-innovation-id"
class="ecl-mega-menu__featured-title"
>
Featured items
Expand Down Expand Up @@ -6205,7 +6211,6 @@ exports[`Mega Menu Default renders correctly with extra attributes for the see a
</header>
<ul
class="ecl-mega-menu__list"
data-ecl-menu-list=""
>
<li
class="ecl-mega-menu__item"
Expand Down Expand Up @@ -6472,6 +6477,7 @@ exports[`Mega Menu Default renders correctly with extra attributes for the see a
/>
</picture>
<span
aria-describedby="item-2-1-id"
class="ecl-mega-menu__featured-title"
>
Featured items
Expand Down Expand Up @@ -7014,6 +7020,7 @@ exports[`Mega Menu Default renders correctly with extra attributes for the see a
/>
</picture>
<span
aria-describedby="research-and-innovation-id"
class="ecl-mega-menu__featured-title"
>
Featured items
Expand Down Expand Up @@ -7224,7 +7231,6 @@ exports[`Mega Menu Default renders correctly with extra class names 1`] = `
</header>
<ul
class="ecl-mega-menu__list"
data-ecl-menu-list=""
>
<li
class="ecl-mega-menu__item"
Expand Down Expand Up @@ -7491,6 +7497,7 @@ exports[`Mega Menu Default renders correctly with extra class names 1`] = `
/>
</picture>
<span
aria-describedby="item-2-1-id"
class="ecl-mega-menu__featured-title"
>
Featured items
Expand Down Expand Up @@ -8033,6 +8040,7 @@ exports[`Mega Menu Default renders correctly with extra class names 1`] = `
/>
</picture>
<span
aria-describedby="research-and-innovation-id"
class="ecl-mega-menu__featured-title"
>
Featured items
Expand Down
7 changes: 6 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 @@ -302,7 +302,12 @@
} only %}
{% endif %}
{% if _featured.title is not empty %}
<span class="ecl-mega-menu__featured-title">{{ _featured.title }}</span>
<span
class="ecl-mega-menu__featured-title"
aria-describedby="{{ sublink_id }}"
>
{{- _featured.title -}}
</span>
{% endif %}
{%- if _featured.content is not empty -%}
<div class="ecl-mega-menu__featured-content">{{ _featured.content }}</div>
Expand Down
2 changes: 1 addition & 1 deletion src/implementations/twig/components/mega-menu/mega-menu.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,7 @@
{%- endif -%}
</header>

<ul class="ecl-mega-menu__list" data-ecl-menu-list>
<ul class="ecl-mega-menu__list">
{% if _items is not empty and _items is iterable %}
{% for key, item in _items %}
{% if item is defined and item is not empty %}
Expand Down
5 changes: 0 additions & 5 deletions src/implementations/vanilla/components/mega-menu/mega-menu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import { createFocusTrap } from 'focus-trap';
* @param {String} options.openSelector Selector for the hamburger button
* @param {String} options.backSelector Selector for the back button
* @param {String} options.innerSelector Selector for the menu inner
* @param {String} options.listSelector Selector for the menu items list
* @param {String} options.itemSelector Selector for the menu item
* @param {String} options.linkSelector Selector for the menu link
* @param {String} options.subLinkSelector Selector for the menu sub link
Expand Down Expand Up @@ -74,7 +73,6 @@ export class MegaMenu {
openSelector = '[data-ecl-mega-menu-open]',
backSelector = '[data-ecl-mega-menu-back]',
innerSelector = '[data-ecl-mega-menu-inner]',
listSelector = '[data-ecl-mega-menu-list]',
itemSelector = '[data-ecl-mega-menu-item]',
linkSelector = '[data-ecl-mega-menu-link]',
subLinkSelector = '[data-ecl-mega-menu-sublink]',
Expand Down Expand Up @@ -104,7 +102,6 @@ export class MegaMenu {
this.openSelector = openSelector;
this.backSelector = backSelector;
this.innerSelector = innerSelector;
this.listSelector = listSelector;
this.itemSelector = itemSelector;
this.linkSelector = linkSelector;
this.subLinkSelector = subLinkSelector;
Expand All @@ -127,7 +124,6 @@ export class MegaMenu {
this.backItemLevel1 = null;
this.backItemLevel2 = null;
this.inner = null;
this.itemsList = null;
this.items = null;
this.links = null;
this.isOpen = false;
Expand Down Expand Up @@ -178,7 +174,6 @@ export class MegaMenu {
this.toggleLabel = queryOne('.ecl-link__label', this.open);
this.back = queryOne(this.backSelector, this.element);
this.inner = queryOne(this.innerSelector, this.element);
this.itemsList = queryOne(this.listSelector, this.element);
this.btnPrevious = queryOne(this.buttonPreviousSelector, this.element);
this.btnNext = queryOne(this.buttonNextSelector, this.element);
this.items = queryAll(this.itemSelector, this.element);
Expand Down

1 comment on commit 33e491f

@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.