Skip to content

Commit

Permalink
fix(masthead): Esc to close Cloud Masthead (carbon-design-system#10555)
Browse files Browse the repository at this point in the history
### Related Ticket(s)

Closes carbon-design-system#10174 

### Description

The Cloud masthead (and other mastheads) simple menus were not closing upon hitting Esc if focus was inside the submenu. This PR fixes that. 

### Changelog

**Changed**

- Adds ability to close Cloud Masthead non-megamenu (and all non-megamenus) with Esc key, just as megamenus already do.
  • Loading branch information
pjudge authored Jun 15, 2023
1 parent 37986cf commit f010ffc
Showing 1 changed file with 6 additions and 6 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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);
Expand All @@ -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();
}
}

Expand Down Expand Up @@ -123,7 +125,6 @@ class BXHeaderMenu extends HostListenerMixin(FocusMixin(LitElement)) {
triggerContent,
menuLabel,
_handleClick: handleClick,
_handleKeydownTrigger: handleKeydownTrigger,
} = this;
return html`
<a
Expand All @@ -134,8 +135,7 @@ class BXHeaderMenu extends HostListenerMixin(FocusMixin(LitElement)) {
href="javascript:void 0"
aria-haspopup="menu"
aria-expanded="${String(Boolean(expanded))}"
@click=${handleClick}
@keydown=${handleKeydownTrigger}>
@click=${handleClick}>
${triggerContent}${ChevronDownGlyph({
part: 'trigger-icon',
class: `${prefix}--header__menu-arrow`,
Expand Down

0 comments on commit f010ffc

Please sign in to comment.