Skip to content

Commit

Permalink
feat(menus): Removing role application from the inner section of the …
Browse files Browse the repository at this point in the history 
…menus - FRONT-4568 (#3559)
  • Loading branch information
@planctus
planctus authored Aug 14, 2024
1 parent 861c69c commit 51fc12f
Show file tree
Hide file tree
Showing 5 changed files with 11 additions and 29 deletions.
8 changes: 0 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 @@ -59,7 +59,6 @@ exports[`Mega Menu Default renders correctly 1`] = `
<section
class="ecl-mega-menu__inner"
data-ecl-mega-menu-inner=""
role="application"
>
<header
class="ecl-mega-menu__inner-header"
Expand Down Expand Up @@ -1129,7 +1128,6 @@ exports[`Mega Menu Default renders correctly with external items in the first le
<section
class="ecl-mega-menu__inner"
data-ecl-mega-menu-inner=""
role="application"
>
<header
class="ecl-mega-menu__inner-header"
Expand Down Expand Up @@ -2201,7 +2199,6 @@ exports[`Mega Menu Default renders correctly with extra attributes 1`] = `
<section
class="ecl-mega-menu__inner"
data-ecl-mega-menu-inner=""
role="application"
>
<header
class="ecl-mega-menu__inner-header"
Expand Down Expand Up @@ -3271,7 +3268,6 @@ exports[`Mega Menu Default renders correctly with extra attributes for the featu
<section
class="ecl-mega-menu__inner"
data-ecl-mega-menu-inner=""
role="application"
>
<header
class="ecl-mega-menu__inner-header"
Expand Down Expand Up @@ -4342,7 +4338,6 @@ exports[`Mega Menu Default renders correctly with extra attributes for the fist
<section
class="ecl-mega-menu__inner"
data-ecl-mega-menu-inner=""
role="application"
>
<header
class="ecl-mega-menu__inner-header"
Expand Down Expand Up @@ -5413,7 +5408,6 @@ exports[`Mega Menu Default renders correctly with extra attributes for the secon
<section
class="ecl-mega-menu__inner"
data-ecl-mega-menu-inner=""
role="application"
>
<header
class="ecl-mega-menu__inner-header"
Expand Down Expand Up @@ -6484,7 +6478,6 @@ exports[`Mega Menu Default renders correctly with extra attributes for the see a
<section
class="ecl-mega-menu__inner"
data-ecl-mega-menu-inner=""
role="application"
>
<header
class="ecl-mega-menu__inner-header"
Expand Down Expand Up @@ -7555,7 +7548,6 @@ exports[`Mega Menu Default renders correctly with extra class names 1`] = `
<section
class="ecl-mega-menu__inner"
data-ecl-mega-menu-inner=""
role="application"
>
<header
class="ecl-mega-menu__inner-header"
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 @@ -125,7 +125,7 @@
],
}) only %}

<section class="ecl-mega-menu__inner" data-ecl-mega-menu-inner role="application">
<section class="ecl-mega-menu__inner" data-ecl-mega-menu-inner>
<header class="ecl-mega-menu__inner-header">
{%- if _back_label is not empty -%}
{% include '@ecl/button/button.html.twig' with {
Expand Down
7 changes: 0 additions & 7 deletions src/implementations/twig/components/menu/__snapshots__/menu.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,6 @@ exports[`Menu Default renders correctly 1`] = `
aria-label="Menu"
class="ecl-menu__inner"
data-ecl-menu-inner=""
role="application"
>
<header
class="ecl-menu__inner-header"
Expand Down Expand Up @@ -912,7 +911,6 @@ exports[`Menu Default renders correctly with a external first level menu item 1`
aria-label="Menu"
class="ecl-menu__inner"
data-ecl-menu-inner=""
role="application"
>
<header
class="ecl-menu__inner-header"
Expand Down Expand Up @@ -1792,7 +1790,6 @@ exports[`Menu Default renders correctly with extra attributes 1`] = `
aria-label="Menu"
class="ecl-menu__inner"
data-ecl-menu-inner=""
role="application"
>
<header
class="ecl-menu__inner-header"
Expand Down Expand Up @@ -2652,7 +2649,6 @@ exports[`Menu Default renders correctly with extra attributes for the items 1`]
aria-label="Menu"
class="ecl-menu__inner"
data-ecl-menu-inner=""
role="application"
>
<header
class="ecl-menu__inner-header"
Expand Down Expand Up @@ -3513,7 +3509,6 @@ exports[`Menu Default renders correctly with extra attributes for the sub-items
aria-label="Menu"
class="ecl-menu__inner"
data-ecl-menu-inner=""
role="application"
>
<header
class="ecl-menu__inner-header"
Expand Down Expand Up @@ -4374,7 +4369,6 @@ exports[`Menu Default renders correctly with extra class names 1`] = `
aria-label="Menu"
class="ecl-menu__inner"
data-ecl-menu-inner=""
role="application"
>
<header
class="ecl-menu__inner-header"
Expand Down Expand Up @@ -5234,7 +5228,6 @@ exports[`Menu Long renders correctly 1`] = `
aria-label="Menu"
class="ecl-menu__inner"
data-ecl-menu-inner=""
role="application"
>
<header
class="ecl-menu__inner-header"
Expand Down
2 changes: 1 addition & 1 deletion src/implementations/twig/components/menu/menu.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@
}) only %}
{% endif %}

<section class="ecl-menu__inner" data-ecl-menu-inner role="application" aria-label="{{ _title }}">
<section class="ecl-menu__inner" data-ecl-menu-inner aria-label="{{ _title }}">
<header class="ecl-menu__inner-header">
{% if _close is not empty %}
{% include '@ecl/button/button.html.twig' with _close|merge({
Expand Down
21 changes: 9 additions & 12 deletions src/implementations/vanilla/components/menu/menu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -830,14 +830,6 @@ export class Menu {

// Key actions to toggle the caret buttons
if (cList.contains('ecl-menu__button-caret') && menuExpanded === 'false') {
if (e.keyCode === 32 || e.key === 'Enter') {
if (menuItem.getAttribute('aria-expanded') === 'true') {
this.handleHoverOffItem(e);
} else {
this.handleHoverOnItem(e);
}
return;
}
if (e.key === 'ArrowDown') {
e.preventDefault();
const firstItem = queryOne(
Expand Down Expand Up @@ -898,8 +890,6 @@ export class Menu {
}
}
}

this.closeOpenDropdown();
}

// Key actions to navigate between the sub-links
Expand Down Expand Up @@ -1140,18 +1130,25 @@ export class Menu {
* @param {Event} e
*/
handleClickOnCaret(e) {
// Don't execute for desktop display
const menuExpanded = this.element.getAttribute('aria-expanded');
const menuItem = e.target.closest(this.itemSelector);

// Desktop display
if (menuExpanded === 'false') {
if (menuItem.getAttribute('aria-expanded') === 'true') {
this.handleHoverOffItem(e);
} else {
this.handleHoverOnItem(e);
}
return;
}

// Mobile display
// Add css class to inner menu
this.inner.classList.add('ecl-menu__inner--expanded');

// Add css class and attribute to current item, and remove it from others
// Also save the current item
const menuItem = e.target.closest(this.itemSelector);
this.items.forEach((item) => {
if (item === menuItem) {
item.classList.add('ecl-menu__item--expanded');
Expand Down

1 comment on commit 51fc12f

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