Skip to content
Snippets Groups Projects
Commit 13f7d487 authored by shamalainen's avatar shamalainen
Browse files

Update desktop menu panel DOM to be accessible

parent fb95c66a
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx
+ 101
− 149
View file @ 13f7d487
......@@ -31,6 +31,7 @@ export class HyDesktopMenuLinks {
@Prop() dataDesktopLinks: DesktopLinks[] | string;
private _dataDesktopLinks: DesktopLinks[];
@State() firstLevelLinksList: Array<object> = [];
@State() menuLinkItems: Array<object> = [];
@Watch('dataDesktopLinks') dataDesktopLinksWatcher(data: DesktopLinks[] | string) {
this._dataDesktopLinks = typeof data === 'string' ? JSON.parse(data) : data;
......@@ -40,176 +41,127 @@ export class HyDesktopMenuLinks {
this.dataDesktopLinksWatcher(this.dataDesktopLinks);
}
closeDesktopMenuPanel() {
// Remove is-active from desktop menu links.
let desktopMenuItems = this.el.shadowRoot.querySelectorAll('.desktop-menu-link');
desktopMenuItems.forEach((item) => {
(item as HTMLElement).classList.remove('desktop-menu-link--is-active');
});
handleDesktopMenuClose() {
const menuItems = this.el.shadowRoot.querySelectorAll(`.desktop-menu-link`);
const menuPanelItems = this.el.shadowRoot.querySelectorAll('.hy-desktop-menu-panel');
// Close desktop menu panel.
let hyDesktopPanel = this.el.shadowRoot.querySelectorAll('.hy-desktop-menu-panel')[0];
if (hyDesktopPanel) {
// Hide panel, remove class is-active.
(hyDesktopPanel as HTMLElement).classList.remove('hy-desktop-menu-panel--is-active');
let menuItems = hyDesktopPanel.querySelectorAll('ul.first');
menuItems.forEach((item) => {
(item as HTMLElement).classList.remove('desktop-menu--is-active');
});
}
// Reset elements by removing the active classes.
menuItems.forEach((item) => {
item.classList.remove('desktop-menu-link--is-active');
});
menuPanelItems.forEach((item) => {
item.classList.remove('hy-desktop-menu-panel--is-active');
});
}
@Listen('click')
handleMenuDesktopLinkClick(event) {
this.closeDesktopMenuPanel();
this.handleDesktopMenuClose();
event.stopPropagation();
}
//Show desktop menu panel
handleMenuDesktopHover(id) {
// Set is-active class for the desktop menu selected link to highlight it.
let desktopMenuItems = this.el.shadowRoot.querySelectorAll('.desktop-menu-link');
desktopMenuItems.forEach((item) => {
(item as HTMLElement).classList.remove('desktop-menu-link--is-active');
handleDesktopMenuToggle(id) {
const menuItems = this.el.shadowRoot.querySelectorAll(`.desktop-menu-link`);
const menuPanelItems = this.el.shadowRoot.querySelectorAll('.hy-desktop-menu-panel');
const activeMenuItem = this.el.shadowRoot.querySelector(`.desktop-menu-link[link-id="${id}"]`);
const activeMenuItemSibling = activeMenuItem.nextElementSibling;
// Reset elements by removing the active classes.
menuItems.forEach((item) => {
item.classList.remove('desktop-menu-link--is-active');
});
let desktopMenuActivatedItems = this.el.shadowRoot.querySelectorAll('.desktop-menu-link[link-id="' + id + '"]');
(desktopMenuActivatedItems[0] as HTMLElement).classList.add('desktop-menu-link--is-active');
let hyDesktopPanel = this.el.shadowRoot.querySelectorAll('.hy-desktop-menu-panel')[0];
if (hyDesktopPanel) {
// Show panel, add class is-active.
(hyDesktopPanel as HTMLElement).classList.add('hy-desktop-menu-panel--is-active');
// Show proper subtree on panel based on given menu-link-id.
let menuItems = hyDesktopPanel.querySelectorAll('ul.first');
menuItems.forEach((item) => {
(item as HTMLElement).classList.remove('desktop-menu--is-active');
});
let menuActivatedItems = hyDesktopPanel.querySelectorAll('ul[menu-link-id="' + id + '"]');
(menuActivatedItems[0] as HTMLElement).classList.add('desktop-menu--is-active');
}
menuPanelItems.forEach((item) => {
item.classList.remove('hy-desktop-menu-panel--is-active');
});
// Add active classes to the currently active item and its sibling element.
activeMenuItem.classList.add('desktop-menu-link--is-active');
activeMenuItemSibling.classList.add('hy-desktop-menu-panel--is-active');
}
componentDidLoad() {
const links = this._dataDesktopLinks as Array<DesktopLinks>;
let firstLevelLinksList = [];
links.forEach((item) => {
let classAttributes = [
'desktop-menu-link',
item.isActive === 'true' ? 'desktop-menu-link--is-active-trail' : '',
].join(' ');
//item.isActive ? classAttributes'desktop-menu-link--is-active-trail' : ''
firstLevelLinksList.push(
<div
class={classAttributes}
link-id={item.menuLinkId}
onMouseOver={() => this.handleMenuDesktopHover(item.menuLinkId)}
onFocus={() => this.handleMenuDesktopHover(item.menuLinkId)}
tabIndex={0}
>
{item.label}
<span class="desktop-menu-link__heading__icon">
<hy-icon icon={'hy-icon-caret-down'} size={16} />
</span>
</div>
let menuLinkItems = [];
links.map(({menuLinkId: id, shortcuts, items, url, description, label}) => {
menuLinkItems.push(
<li>
<button
type="button"
class="desktop-menu-link"
link-id={id}
onMouseOver={() => this.handleDesktopMenuToggle(id)}
onFocus={() => this.handleDesktopMenuToggle(id)}
>
{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__desktop-menu">
<a aria-current={label} href={url} class="" menu-link-id={id}>
<span class="heading-icon-first">
<hy-icon icon={'hy-icon-arrow-right'} size={40} />
</span>
<span class="hy-menu-item__label">{label}</span>
<span class="hy-menu-item__description">{description}</span>
</a>
<ul class={'desktop-menu first'} menu-link-id={id}>
{items.map(({label, url, description}) => (
<li>
<a href={url}>{label}</a>
<span>{description}</span>
</li>
))}
</ul>
{shortcuts.length > 0 && (
<ul class="shortcuts-panel">
{shortcuts.map(({shortcut_title, shortcut_url, shortcut_is_external, shortcut_aria_label}) => {
let target = shortcut_is_external ? '_blank' : '_self';
return (
<li class="shortcut-item">
<a
aria-current={shortcut_aria_label}
href={shortcut_url}
class="shortcut-item__link"
target={target}
aria-label={shortcut_aria_label}
>
<span class="shortcut-item__label">{shortcut_title}</span>
</a>
</li>
);
})}
</ul>
)}
</div>
<button
onClick={() => this.handleDesktopMenuClose()}
class={{
'hy-desktop-menu-panel__panel-toggle': true,
}}
aria-label="close"
>
<span class="hy-desktop-menu-panel__panel-toggle__label">
CLOSE
<hy-icon icon={'hy-icon-remove'} size={20} fill={ColorVariant.black} />
</span>
</button>
</div>
</li>
);
});
this.firstLevelLinksList = firstLevelLinksList;
this.menuLinkItems = menuLinkItems;
}
render() {
return (
<nav role={'navigation'} class="hy-site-header__menu-desktop">
<ul class="hy-site-header__menu-desktop-container">
{this.firstLevelLinksList.map((firstLevelLink) => {
return (
<li>
{firstLevelLink}
<div class="hy-desktop-menu-panel" onMouseLeave={() => this.closeDesktopMenuPanel()}>
<div class="hy-desktop-menu-panel__desktop-menu">
{this._dataDesktopLinks &&
this._dataDesktopLinks.map((link) => {
return (
<div>
<ul class={'desktop-menu first'} menu-link-id={link.menuLinkId}>
<li class={'first'}>
<a aria-current={link.label} href={link.url} class="" menu-link-id={link.menuLinkId}>
<span class="heading-icon-first">
<hy-icon icon={'hy-icon-arrow-right'} size={40} />
</span>
<span class="hy-menu-item__label">{link.label}</span>
</a>
{link.items && (
<ul class="second" menu-link-id={link.menuLinkId}>
{link.items.map((subitem) => {
return (
<li class={'second'}>
<a
aria-current={subitem.label}
href={subitem.url}
class=""
menu-link-id={subitem.menuLinkId}
>
<span class="heading-icon-second">
<hy-icon icon={'hy-icon-caret-right'} size={12} />
</span>
<span class="hy-menu-item__label">{subitem.label}</span>
</a>
</li>
);
})}
</ul>
)}
</li>
</ul>
{link.shortcuts.length > 0 && (
<div class="shortcuts-panel">
<span class="shortcut-panel__title">{'Shortcuts'}</span>
{link.shortcuts.map((shortcut_item) => {
let target = shortcut_item.shortcut_is_external ? '_blank' : '_self';
return (
<div class="shortcut-item">
<a
aria-current={shortcut_item.shortcut_aria_label}
href={shortcut_item.shortcut_url}
class="shortcut-item__link"
target={target}
aria-label={shortcut_item.shortcut_aria_label}
>
<span class="shortcut-item__label">{shortcut_item.shortcut_title}</span>
</a>
</div>
);
})}
</div>
)}
</div>
);
})}
</div>
<button
onClick={() => this.closeDesktopMenuPanel()}
class={{
'hy-desktop-menu-panel__panel-toggle': true,
}}
aria-label="close"
>
<span class="hy-desktop-menu-panel__panel-toggle__label">
CLOSE
<hy-icon icon={'hy-icon-remove'} size={20} fill={ColorVariant.black} />
</span>
</button>
</div>
</li>
);
})}
</ul>
<ul class="hy-site-header__menu-desktop-container">{this.menuLinkItems}</ul>
</nav>
);
}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment