diff --git a/packages/carbon-web-components/src/components/ui-shell/header-menu.ts b/packages/carbon-web-components/src/components/ui-shell/header-menu.ts index fc6f8eb0432..b9a78a7bc5a 100644 --- a/packages/carbon-web-components/src/components/ui-shell/header-menu.ts +++ b/packages/carbon-web-components/src/components/ui-shell/header-menu.ts @@ -33,8 +33,8 @@ class BXHeaderMenu extends HostListenerMixin(FocusMixin(LitElement)) { /** * The trigger button. */ - @query('a') - private _trigger!: HTMLElement; + @query('[part="trigger"]') + protected _topMenuItem!: HTMLElement; /** * Handles `click` event handler on this element. @@ -46,6 +46,8 @@ class BXHeaderMenu extends HostListenerMixin(FocusMixin(LitElement)) { /** * Handler for the `keydown` event on the trigger button. */ + @HostListener('keydown') + // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to private _handleKeydownTrigger({ key }: KeyboardEvent) { if (key === 'Esc' || key === 'Escape') { this._handleUserInitiatedToggle(false); @@ -60,7 +62,7 @@ class BXHeaderMenu extends HostListenerMixin(FocusMixin(LitElement)) { private _handleUserInitiatedToggle(force: boolean = !this.expanded) { this.expanded = force; if (!force) { - this._trigger.focus(); + this._topMenuItem.focus(); } } @@ -123,7 +125,6 @@ class BXHeaderMenu extends HostListenerMixin(FocusMixin(LitElement)) { triggerContent, menuLabel, _handleClick: handleClick, - _handleKeydownTrigger: handleKeydownTrigger, } = this; return html` + @click=${handleClick}> ${triggerContent}${ChevronDownGlyph({ part: 'trigger-icon', class: `${prefix}--header__menu-arrow`, diff --git a/packages/web-components/src/components/masthead/megamenu-top-nav-menu.ts b/packages/web-components/src/components/masthead/megamenu-top-nav-menu.ts index 7a4e336f0a3..d5c307e3dde 100644 --- a/packages/web-components/src/components/masthead/megamenu-top-nav-menu.ts +++ b/packages/web-components/src/components/masthead/megamenu-top-nav-menu.ts @@ -40,12 +40,6 @@ class DDSMegaMenuTopNavMenu extends DDSTopNavMenu { @query(`.${prefix}--header__menu`) private _menuNode!: HTMLElement; - /** - * The trigger button. - */ - @query('[part="trigger"]') - private _topMenuItem!: HTMLAnchorElement; - /** * scrollbar width. */ @@ -54,16 +48,6 @@ class DDSMegaMenuTopNavMenu extends DDSTopNavMenu { this.ownerDocument!.defaultView!.innerWidth - this.ownerDocument!.body.offsetWidth; - /** - * Removes inherited _handleBlur method from BXHeaderMenu - */ - private _handleKeydown = (event: KeyboardEvent) => { - if (event.key === 'Escape') { - this.expanded = false; - this._topMenuItem.focus(); - } - }; - /** * The observer for the resize of the viewport. */ @@ -127,7 +111,6 @@ class DDSMegaMenuTopNavMenu extends DDSTopNavMenu { connectedCallback() { super.connectedCallback(); this._cleanAndCreateObserverResize({ create: true }); - this.addEventListener('keydown', this._handleKeydown); } disconnectedCallback() { diff --git a/packages/web-components/src/components/masthead/top-nav-menu.ts b/packages/web-components/src/components/masthead/top-nav-menu.ts index 55f9f454b9c..a3f29c420e5 100644 --- a/packages/web-components/src/components/masthead/top-nav-menu.ts +++ b/packages/web-components/src/components/masthead/top-nav-menu.ts @@ -7,7 +7,7 @@ * LICENSE file in the root directory of this source tree. */ -import { property, query } from 'lit-element'; +import { property } from 'lit-element'; import BXHeaderMenu from '../../internal/vendor/@carbon/web-components/components/ui-shell/header-menu.js'; import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings'; import styles from './masthead.scss'; @@ -22,12 +22,6 @@ const { stablePrefix: ddsPrefix } = ddsSettings; */ @customElement(`${ddsPrefix}-top-nav-menu`) class DDSTopNavMenu extends BXHeaderMenu { - /** - * The trigger button. - */ - @query('[part="trigger"]') - private _triggerNode?: HTMLAnchorElement; - /** * `true` if this submenu should be in its active state. */ @@ -37,7 +31,7 @@ class DDSTopNavMenu extends BXHeaderMenu { updated(changedProperties) { super.updated(changedProperties); if (changedProperties.has('active')) { - const { active, _triggerNode: triggerNode } = this; + const { active, _topMenuItem: triggerNode } = this; if (triggerNode) { triggerNode.setAttribute('data-selected', String(Boolean(active))); }