From 9bf43bae356c93978f3e92c962be8c142482a220 Mon Sep 17 00:00:00 2001
From: shamalainen <sebastian@hamse.fi>
Date: Mon, 23 Nov 2020 13:08:22 +0200
Subject: [PATCH] Add dynamic aria attributes for menu toggle
---
.../hy-desktop-menu-links/hy-desktop-menu-links.tsx | 11 +++++++++--
1 file changed, 9 insertions(+), 2 deletions(-)
diff --git a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx
index 323d9b37..9c3e017b 100644
--- a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx
+++ b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx
@@ -48,9 +48,11 @@ export class HyDesktopMenuLinks {
// Reset elements by removing the active classes.
menuItems.forEach((item) => {
item.classList.remove('desktop-menu-link--is-active');
+ item.setAttribute('aria-expanded', 'false');
});
menuPanelItems.forEach((item) => {
item.classList.remove('hy-desktop-menu-panel--is-active');
+ item.setAttribute('aria-hidden', 'true');
});
}
@@ -69,14 +71,18 @@ export class HyDesktopMenuLinks {
// Reset elements by removing the active classes.
menuItems.forEach((item) => {
item.classList.remove('desktop-menu-link--is-active');
+ item.setAttribute('aria-expanded', 'false');
});
menuPanelItems.forEach((item) => {
item.classList.remove('hy-desktop-menu-panel--is-active');
+ item.setAttribute('aria-hidden', 'true');
});
// Add active classes to the currently active item and its sibling element.
activeMenuItem.classList.add('desktop-menu-link--is-active');
+ activeMenuItem.setAttribute('aria-expanded', 'true');
activeMenuItemSibling.classList.add('hy-desktop-menu-panel--is-active');
+ activeMenuItemSibling.setAttribute('aria-hidden', 'false');
}
componentDidLoad() {
@@ -93,13 +99,14 @@ export class HyDesktopMenuLinks {
link-id={id}
onMouseOver={() => this.handleDesktopMenuToggle(id)}
onFocus={() => this.handleDesktopMenuToggle(id)}
+ aria-expanded="false"
>
{label}
<span class="desktop-menu-link__heading__icon">
<hy-icon icon={'hy-icon-caret-down'} size={16} />
</span>
</button>
- <div class="hy-desktop-menu-panel" onMouseLeave={() => this.handleDesktopMenuClose()}>
+ <div class="hy-desktop-menu-panel" onMouseLeave={() => this.handleDesktopMenuClose()} aria-hidden="true">
<div class="hy-desktop-menu-panel__desktop-menu">
<a aria-current={label} href={url} class="" menu-link-id={id}>
<span class="heading-icon-first">
@@ -152,7 +159,7 @@ export class HyDesktopMenuLinks {
class={{
'hy-desktop-menu-panel__panel-toggle': true,
}}
- aria-label="close"
+ aria-label="Close menu"
>
<span class="hy-desktop-menu-panel__panel-toggle__label">
CLOSE
--
GitLab