From 07fa263d0b48cc256922788f4438d51ae2ec471e Mon Sep 17 00:00:00 2001
From: shamalainen <sebastian@hamse.fi>
Date: Mon, 23 Nov 2020 13:34:46 +0200
Subject: [PATCH] Add focus to button when desktop panel is closed
---
.../hy-desktop-menu-links/hy-desktop-menu-links.tsx | 12 +++++-------
1 file changed, 5 insertions(+), 7 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 9c3e017b..8f7a6876 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
@@ -16,7 +16,7 @@ export interface DesktopLinks {
}
import {ColorVariant} from '../../../utils/utils';
-import {Component, h, Element, Listen, Prop, State, Watch} from '@stencil/core';
+import {Component, h, Element, Prop, State, Watch} from '@stencil/core';
@Component({
tag: 'hy-desktop-menu-links',
@@ -44,6 +44,10 @@ export class HyDesktopMenuLinks {
handleDesktopMenuClose() {
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[aria-expanded="true"]`);
+
+ // Return focus to the button of the last desktop panel that was active.
+ if (activeMenuItem !== null) (activeMenuItem as HTMLElement).focus();
// Reset elements by removing the active classes.
menuItems.forEach((item) => {
@@ -56,12 +60,6 @@ export class HyDesktopMenuLinks {
});
}
- @Listen('click')
- handleMenuDesktopLinkClick(event) {
- this.handleDesktopMenuClose();
- event.stopPropagation();
- }
-
handleDesktopMenuToggle(id) {
const menuItems = this.el.shadowRoot.querySelectorAll(`.desktop-menu-link`);
const menuPanelItems = this.el.shadowRoot.querySelectorAll('.hy-desktop-menu-panel');
--
GitLab