fix(navigation-primary): hamburger standalones toggle state (#2462)

* fix(navigation-primary): toggle state and keyboard navigation correctly closing hamburger menu

* test(navigation-primary): improve testing around compact standalone toggle states

* chore(navigation-primary): add changeset

* refactor(navigation-primary): focus and menu states

* fix(navigation-primary): only close hamburger

* fix(navigation-primary): dont close hamburger unless compact

* fix(navigation-primary): resolve flickr on click vs keyboard nav

* fix(navigation-primary): revert removing the exception on closePrimaryDropdowns it is used

* docs: update elements/rh-navigation-primary/rh-navigation-primary-item.ts

* docs: update .changeset/heavy-hornets-throw.md

* docs: update elements/rh-navigation-primary/rh-navigation-primary-item.ts

---------

Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]>

Author: zeroedin

.changeset/heavy-hornets-throw.md

@@ -0,0 +1,6 @@
+---
+"@rhds/elements": patch
+---
+
+`<rh-navigation-primary>`: improved keyboard accessibility of the dropdown toggle
+  

elements/rh-navigation-primary/rh-navigation-primary-item.ts

@@ -36,6 +36,13 @@ export class RhNavigationPrimaryItem extends LitElement {
   @query('details')
   private _details!: HTMLDetailsElement;
 
+  @query('summary')
+  private _summary!: HTMLElement;
+
+  @consume({ context, subscribe: true })
+  @state()
+  private compact?: boolean;
+
   @property({ type: Boolean, reflect: true }) open = false;
 
   /* Summary text for dropdown variants only */
@@ -57,9 +64,6 @@ export class RhNavigationPrimaryItem extends LitElement {
   /** Icon set for the `icon` property - 'ui' by default */
   @property({ attribute: 'icon-set' }) iconSet?: IconSetName;
 
-  @consume({ context, subscribe: true })
-  @state()
-  private compact?: boolean;
 
   protected firstUpdated(): void {
     // ensure we update initially on client hydration
@@ -95,7 +99,7 @@ export class RhNavigationPrimaryItem extends LitElement {
       hamburger: hamburger,
       dehydrated: !this.#hydrated,
     })}">${this.variant === 'dropdown' ? html`
-        <details @toggle="${this.#detailsToggle}">
+        <details @toggle="${this.#detailsToggle}" ?open="${this.open}">
           <summary>${hamburger ? '' : html`
             <slot name="icon">${!this.icon ? '' : html`
               <rh-icon icon="${ifDefined(this.icon)}" set="${ifDefined(this.iconSet)}"></rh-icon>`}
@@ -117,12 +121,18 @@ export class RhNavigationPrimaryItem extends LitElement {
     this.dispatchEvent(new Event('toggle', { bubbles: true }));
   }
 
-  public hide() {
-    this._details.open = false;
+  /** @summary hides the dropdown */
+  public async hide() {
+    this.open = false;
+    this.requestUpdate();
+    await this.updateComplete;
   }
 
-  public show() {
-    this._details.open = true;
+  /** @summary shows the dropdown */
+  public async show() {
+    this.open = true;
+    this.requestUpdate();
+    await this.updateComplete;
   }
 }
 

elements/rh-navigation-primary/rh-navigation-primary.ts

@@ -89,6 +89,9 @@ export class RhNavigationPrimary extends LitElement {
   @query('#hamburger')
   private _hamburger!: HTMLDetailsElement;
 
+  @query('summary')
+  private _hamburgerSummary!: HTMLElement;
+
   /**
    * Sets the mobile toggle (hamburger) text, used for translations, defaults to 'Menu'
    */
@@ -178,15 +181,16 @@ export class RhNavigationPrimary extends LitElement {
               </a>
             </slot>
           </div>
-          <details id="hamburger" ?open="${this._hamburgerOpen}" @toggle="${this.#hamburgerToggle}">
-            <summary>
+          <details id="hamburger" ?open="${this._hamburgerOpen}" @toggle="${this.#hamburgerToggle}" @focusout="${this.#onHamburgerFocusOut}">
+            <summary @blur="${this.#onHamburgerSummaryBlur}">
               <rh-icon icon="menu-bars" set="ui"></rh-icon>
               <div id="summary">${this.mobileToggleLabel}</div>
               <rh-icon icon="caret-down" set="microns"></rh-icon>
             </summary>
-            <div id="details-content" role="list">
+            <div id="details-content" role="list" >
               <slot></slot>
             </div>
+
           </details>
           <div id="secondary">
             <div id="event" role="list"><slot name="event"></slot></div>
@@ -228,22 +232,23 @@ export class RhNavigationPrimary extends LitElement {
     this.#closeOverlay();
   }
 
-  #primaryDropdowns(): RhNavigationPrimaryItem[] {
+  #primaryItems(): RhNavigationPrimaryItem[] {
     return Array.from(
       this.querySelectorAll(
-        'rh-navigation-primary-item[variant="dropdown"]:not([slot="dropdowns"])',
+        'rh-navigation-primary-item:not([slot])',
       )
     );
   }
 
-  #secondaryDropdowns(): RhNavigationPrimaryItem[] {
+  #openDropdownItems(): RhNavigationPrimaryItem[] {
     return Array.from(
       this.querySelectorAll(
-        'rh-navigation-primary-item[variant="dropdown"][slot="dropdowns"]',
+        'rh-navigation-primary-item[variant="dropdown"][open]',
       )
     );
   }
 
+
   async #onDropdownToggle(event: Event) {
     const item = event.target as RhNavigationPrimaryItem;
     // if the event came from a secondary link in a compact mode we'll want to close the hamburger first if it is open
@@ -282,6 +287,46 @@ export class RhNavigationPrimary extends LitElement {
     }
   }
 
+  #hamburgerContains(item: Node): boolean {
+    const primaryItems = this.#primaryItems();
+    return primaryItems.some(pi => pi.contains(item));
+  }
+
+  #onHamburgerSummaryBlur(event: FocusEvent) {
+    if (event.relatedTarget) {
+      if (this.#hamburgerContains(event.relatedTarget as Node)) {
+        return;
+      }
+      if (this.compact) {
+        this.#closeHamburger();
+      }
+    }
+  }
+
+  #onHamburgerFocusOut(event: FocusEvent) {
+    if (event.relatedTarget) {
+      if (event.relatedTarget === this._hamburgerSummary) {
+        return;
+      }
+      if (this.#hamburgerContains(event.relatedTarget as Node)) {
+        return;
+      }
+      if (this.compact) {
+        this.#closeHamburger();
+      }
+    }
+  }
+
+  async #onFocusout(event: FocusEvent) {
+    const target = event.relatedTarget as HTMLElement;
+    if (target?.closest('rh-navigation-primary') === this || target === null) {
+      // if the focus is still inside the rh-navigation-secondary exit
+      return;
+    } else {
+      this.close();
+    }
+  }
+
   #onKeydown(event: KeyboardEvent) {
     switch (event.key) {
       case 'Escape': {
@@ -299,102 +344,29 @@ export class RhNavigationPrimary extends LitElement {
         }
         break;
       }
-      case 'Tab':
-        this.#onTabKeydown(event);
-        break;
       default:
         break;
     }
   }
 
   #onKeyup(event: KeyboardEvent) {
     switch (event.key) {
-      case 'Tab':
-        this.#onTabKeyup(event);
-        break;
-      default:
+      case 'Tab': {
+        this.#onTabUp(event);
         break;
-    }
-  }
-
-
-  async #onFocusout(event: FocusEvent) {
-    const target = event.relatedTarget as HTMLElement;
-    if (target?.closest('rh-navigation-primary') === this || target === null) {
-      // if the focus is still inside the rh-navigation-secondary exit
-      return;
-    } else {
-      this.close();
-    }
-  }
-
-  #onTabKeydown(event: KeyboardEvent) {
-    // target is the element we are leaving with tab press
-    const target = event.target as HTMLElement;
-    // get target parent dropdown
-    const primaryDropdowns = this.#primaryDropdowns();
-    const secondaryDropdowns = this.#secondaryDropdowns();
-    // target can be in one of the two dropdown collections, but only 1.
-    const dropdownContainsTarget =
-      primaryDropdowns.find(dropdown => dropdown.contains(target))
-      ?? secondaryDropdowns.find(dropdown => dropdown.contains(target));
-    if (dropdownContainsTarget) {
-      const focusableChildElements =
-        Array.from(RhNavigationPrimary.focusableChildElements(dropdownContainsTarget));
-
-      if (focusableChildElements.length > 0) {
-        const {
-          0: firstChild,
-          [focusableChildElements.length - 1]: lastChild,
-        } = focusableChildElements;
-
-        if (event.shiftKey) {
-          if (event.shiftKey && firstChild === target) {
-            return;
-          }
-          // if target is self, close self
-          if (event.shiftKey && target === dropdownContainsTarget) {
-            dropdownContainsTarget.hide();
-            return;
-          }
-        } else {
-          if (!firstChild) {
-            return;
-          }
-          if (!lastChild) {
-            return;
-          } else {
-            if (lastChild === target) {
-              dropdownContainsTarget.hide();
-              return;
-            }
-          }
-        }
-      } else {
-        this.#closePrimaryDropdowns();
-        this.#closeSecondaryDropdowns();
       }
     }
   }
 
-  #onTabKeyup(event: KeyboardEvent) {
-    if (this.compact && this._hamburgerOpen) {
-      const secondaryDropdowns = this.#secondaryDropdowns();
-      const target = event.target as HTMLElement;
-      if (event.shiftKey && target === this) {
-        this.#closeHamburger();
-      } else {
-        if (secondaryDropdowns.some(dropdown => dropdown.contains(target))) {
-          this.#closeHamburger();
-        }
-      }
+  #onTabUp(event: KeyboardEvent) {
+    // target is the element we are entering with tab up press
+    const target = event.target as HTMLElement;
+    if (!this.#openDropdownItems().some(item => item.contains(target))) {
+      this.#closePrimaryDropdowns();
+      this.#closeSecondaryDropdowns();
     }
   }
 
-  /**
-   * close all open dropdowns in primary slot
-   * @param except
-   */
   #closePrimaryDropdowns(except?: RhNavigationPrimaryItem) {
     this.#openPrimaryDropdowns.forEach((dropdown: RhNavigationPrimaryItem) => {
       if (dropdown !== except) {
@@ -431,14 +403,16 @@ export class RhNavigationPrimary extends LitElement {
   #hamburgerToggle(event: Event) {
     if (event instanceof ToggleEvent) {
       if (event.newState === 'open') {
-      // if we are compact mode and any secondary link dropdowns are open, close them
+        this.#openHamburger();
+        // if we are compact mode and any secondary link dropdowns are open, close them
         if (this.compact && this.#openSecondaryDropdowns.size > 0) {
           this.#closeSecondaryDropdowns();
         }
         if (this.compact) {
           this.#openOverlay();
         }
       } else {
+        this.#closeHamburger();
         if (this.#openPrimaryDropdowns.size > 0) {
           this.#closePrimaryDropdowns();
         }

elements/rh-navigation-primary/test/rh-navigation-primary.spec.ts

@@ -28,25 +28,25 @@ const [
 const NAV = html`
   <rh-navigation-primary>
     <rh-navigation-primary-item variant="dropdown" summary="${HamburgerItem1Name}">
-      Item 1 Content
+     ${HamburgerItem1Name} Content
     </rh-navigation-primary-item>
 
     <rh-navigation-primary-item variant="dropdown" summary="${HamburgerItem2Name}">
-      Item 2 Content
+     ${HamburgerItem2Name} Content
     </rh-navigation-primary-item>
 
     <rh-navigation-primary-item variant="dropdown" summary="${HamburgerItem3Name}">
-      Item 3 Content
+     ${HamburgerItem3Name} Content
     </rh-navigation-primary-item>
 
     <rh-navigation-primary-item variant="dropdown">
       <span slot="summary">${HamburgerItem4Name}</span>
-      Item 4 Content
+      ${HamburgerItem4Name} Content
     </rh-navigation-primary-item>
 
     <rh-navigation-primary-item variant="dropdown">
       <span slot="summary">${HamburgerItem5Name}</span>
-      Item 5 Content
+      ${HamburgerItem5Name} Content
     </rh-navigation-primary-item>
 
     <rh-navigation-primary-item slot="event">
@@ -185,6 +185,11 @@ describe('<rh-navigation-primary>', function() {
               expect(snapshot).to.have.axQuery({ name: 'Menu', expanded: true });
             });
 
+            it('menu should have focus', async function() {
+              const snapshot = await a11ySnapshot();
+              expect(snapshot).to.have.axQuery({ name: 'Menu', focused: true });
+            });
+
             it('should not hide content behind hamburger menu', async function() {
               const snapshot = await a11ySnapshot();
               expect(snapshot).to.have.axQuery({ name: HamburgerItem1Name });
@@ -200,6 +205,44 @@ describe('<rh-navigation-primary>', function() {
               expect(snapshot).to.have.axQuery({ name: 'Item 7' });
               expect(snapshot).to.have.axQuery({ name: 'Item 8' });
             });
+
+            describe('toggling a standalone dropdown', function() {
+              beforeEach(async function() {
+                /**
+                 * We normally would not test by query and click but by tabbing to the standalone dropdown
+                 * we are triggering the hamburger menu to close on keyup this is expected behavior
+                 * so we need to click the standalone dropdown to open it which should close the hamburger menu
+                 * the overlay should still remain open
+                 */
+                const item6 = element.querySelector('rh-navigation-primary-item[summary="Item 6"]');
+                const details = item6?.shadowRoot?.querySelector('details');
+                const summary = details?.querySelector('summary');
+                summary?.click();
+              });
+              beforeEach(async () => await element.updateComplete);
+
+              it('should open the standalone dropdown', async function() {
+                const snapshot = await a11ySnapshot();
+                expect(snapshot).to.have.axQuery({ name: 'Item 6', expanded: true });
+                expect(snapshot).to.have.axQuery({ role: 'text', name: 'Item 6 Content' });
+              });
+
+              it('should close the hamburger menu', async function() {
+                const snapshot = await a11ySnapshot();
+                expect(snapshot).to.not.have.axQuery({ name: 'Menu', expanded: false });
+                expect(snapshot).to.not.have.axQuery({ name: HamburgerItem1Name });
+                expect(snapshot).to.not.have.axQuery({ name: HamburgerItem2Name });
+                expect(snapshot).to.not.have.axQuery({ name: HamburgerItem3Name });
+                expect(snapshot).to.not.have.axQuery({ name: HamburgerItem4Name });
+                expect(snapshot).to.not.have.axQuery({ name: HamburgerItem5Name });
+              });
+
+              it('should still have an open overlay', async function() {
+                // query the shadow root for the overlay
+                const overlay = element.shadowRoot?.querySelector('rh-navigation-primary-overlay[open]');
+                expect(overlay).to.exist;
+              });
+            });
           });
 
           describe('toggle closed', function() {