Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

Conversation

zeroedin
Copy link
Collaborator

@zeroedin zeroedin commented Jun 27, 2025

What I did

  1. Corrected hamburger and standalone dropdown state toggle in compact viewports.
  2. Improved keyboard navigation, with the hamburger menu properly closing in compact viewports.
  3. Improved testing for toggling standalone dropdowns for compact viewports.

Reported by @zhawkins 🙇

Testing Instructions

  1. View Deploy Preview set browser viewport to < 1200px for compact hamburger menu.
  2. Open hamburger menu
  3. Tabbing to the summit logo should now properly close the hamburger menu
  4. Re-open hamburger menu
  5. Clicking the Search dropdown should close the hamburger menu while leaving the overlay visible.
  6. Click the hamburger menu
  7. The hamburger menu opening should close the Search dropdown while leaving the overlay visible.
  8. Close the hamburger menu
  9. Overlay should close.

Notes to Reviewers

Copy link

changeset-bot bot commented Jun 27, 2025

🦋 Changeset detected

Latest commit: 55b7f81

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@rhds/elements Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@zeroedin zeroedin self-assigned this Jun 27, 2025
Copy link

netlify bot commented Jun 27, 2025

Deploy Preview for red-hat-design-system failed. Why did it fail? →

Name Link
🔨 Latest commit 55b7f81
🔍 Latest deploy log https://app.netlify.com/projects/red-hat-design-system/deploys/687552cee7a94c00089643e7

@zeroedin zeroedin added the bug Something isn't working label Jun 27, 2025
Copy link
Contributor

github-actions bot commented Jun 27, 2025

Size Change: -71 B (-0.03%)

Total Size: 235 kB

Filename Size Change
./elements/rh-navigation-primary/rh-navigation-primary-item.js 3.48 kB +69 B (+2.02%)
./elements/rh-navigation-primary/rh-navigation-primary.js 7.15 kB -140 B (-1.92%)
ℹ️ View Unchanged
Filename Size
./elements.js 538 B
./elements/rh-accordion/context.js 162 B
./elements/rh-accordion/rh-accordion-header.js 2.67 kB
./elements/rh-accordion/rh-accordion-panel.js 1.26 kB
./elements/rh-accordion/rh-accordion.js 3.32 kB
./elements/rh-alert/rh-alert.js 5.05 kB
./elements/rh-announcement/rh-announcement.js 2.12 kB
./elements/rh-audio-player/rh-audio-player-about.js 1.81 kB
./elements/rh-audio-player/rh-audio-player-rate-stepper.js 1.76 kB
./elements/rh-audio-player/rh-audio-player-scrolling-text-overflow.js 1.52 kB
./elements/rh-audio-player/rh-audio-player-subscribe.js 1.4 kB
./elements/rh-audio-player/rh-audio-player.js 12.5 kB
./elements/rh-audio-player/rh-cue.js 1.95 kB
./elements/rh-audio-player/rh-transcript.js 2.68 kB
./elements/rh-avatar/random-pattern-controller.js 2.72 kB
./elements/rh-avatar/rh-avatar.js 2.68 kB
./elements/rh-back-to-top/rh-back-to-top.js 1.96 kB
./elements/rh-badge/rh-badge.js 1.62 kB
./elements/rh-blockquote/rh-blockquote.js 1.37 kB
./elements/rh-breadcrumb/rh-breadcrumb.js 1.02 kB
./elements/rh-button/rh-button.js 3.29 kB
./elements/rh-card/rh-card.js 3.43 kB
./elements/rh-chip/context.js 165 B
./elements/rh-chip/rh-chip-group.js 1.58 kB
./elements/rh-chip/rh-chip.js 2.06 kB
./elements/rh-code-block/prism.css.js 667 B
./elements/rh-code-block/prism.js 572 B
./elements/rh-code-block/rh-code-block.js 7.66 kB
./elements/rh-cta/rh-cta.js 3.92 kB
./elements/rh-dialog/rh-dialog.js 4.81 kB
./elements/rh-dialog/yt-api.js 617 B
./elements/rh-disclosure/rh-disclosure.js 2.25 kB
./elements/rh-footer/rh-footer-block.js 714 B
./elements/rh-footer/rh-footer-copyright.js 357 B
./elements/rh-footer/rh-footer-links.js 1.19 kB
./elements/rh-footer/rh-footer-social-link.js 1.15 kB
./elements/rh-footer/rh-footer-universal.js 3.96 kB
./elements/rh-footer/rh-footer.js 4.84 kB
./elements/rh-health-index/rh-health-index.js 2.4 kB
./elements/rh-icon/rh-icon.js 2.5 kB
./elements/rh-icon/ssr.js 181 B
./elements/rh-jump-links/context.js 179 B
./elements/rh-jump-links/rh-jump-link.js 1.55 kB
./elements/rh-jump-links/rh-jump-links-list.js 1.17 kB
./elements/rh-jump-links/rh-jump-links.js 2.35 kB
./elements/rh-menu/rh-menu.js 1.21 kB
./elements/rh-navigation-primary/context.js 176 B
./elements/rh-navigation-primary/rh-navigation-primary-item-menu.js 1.03 kB
./elements/rh-navigation-primary/rh-navigation-primary-overlay.js 534 B
./elements/rh-navigation-secondary/rh-navigation-secondary-dropdown.js 2.57 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-menu-section.js 1.32 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-menu.js 1.75 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-overlay.js 562 B
./elements/rh-navigation-secondary/rh-navigation-secondary.js 5.26 kB
./elements/rh-navigation-secondary/test/fixtures.js 769 B
./elements/rh-pagination/rh-pagination.js 5.57 kB
./elements/rh-site-status/rh-site-status.js 2.38 kB
./elements/rh-skip-link/rh-skip-link.js 1.19 kB
./elements/rh-spinner/rh-spinner.js 1.29 kB
./elements/rh-stat/rh-stat.js 2.08 kB
./elements/rh-subnav/rh-subnav.js 2.42 kB
./elements/rh-surface/rh-surface.js 893 B
./elements/rh-surface/test/elements.js 763 B
./elements/rh-switch/rh-switch.js 2.89 kB
./elements/rh-table/rh-sort-button.js 1.4 kB
./elements/rh-table/rh-table.js 2.89 kB
./elements/rh-tabs/context.js 226 B
./elements/rh-tabs/rh-tab-panel.js 1 kB
./elements/rh-tabs/rh-tab.js 2.98 kB
./elements/rh-tabs/rh-tabs.js 3.61 kB
./elements/rh-tag/rh-tag.js 2.68 kB
./elements/rh-tile/rh-tile-group.js 1.78 kB
./elements/rh-tile/rh-tile.js 4.89 kB
./elements/rh-timestamp/rh-timestamp.js 983 B
./elements/rh-tooltip/rh-tooltip.js 3.12 kB
./elements/rh-video-embed/rh-video-embed.js 4.6 kB
./lib/color-palettes.js 851 B
./lib/context/headings/consumer.js 593 B
./lib/context/headings/provider.js 1.2 kB
./lib/elements/rh-context-demo/rh-context-demo.js 1.16 kB
./lib/elements/rh-context-picker/rh-context-picker.js 2.18 kB
./lib/environment.js 194 B
./lib/functions.js 175 B
./lib/I18nController.js 1.37 kB
./lib/ScreenSizeController.js 876 B
./lib/ssr-controller.js 201 B
./lib/themable.js 549 B
./react/rh-accordion/rh-accordion-header.js 199 B
./react/rh-accordion/rh-accordion-panel.js 185 B
./react/rh-accordion/rh-accordion.js 215 B
./react/rh-alert/rh-alert.js 184 B
./react/rh-announcement/rh-announcement.js 189 B
./react/rh-audio-player/rh-audio-player-about.js 191 B
./react/rh-audio-player/rh-audio-player-rate-stepper.js 213 B
./react/rh-audio-player/rh-audio-player-scrolling-text-overflow.js 214 B
./react/rh-audio-player/rh-audio-player-subscribe.js 196 B
./react/rh-audio-player/rh-audio-player.js 183 B
./react/rh-audio-player/rh-cue.js 195 B
./react/rh-audio-player/rh-transcript.js 207 B
./react/rh-avatar/rh-avatar.js 173 B
./react/rh-back-to-top/rh-back-to-top.js 183 B
./react/rh-badge/rh-badge.js 174 B
./react/rh-blockquote/rh-blockquote.js 179 B
./react/rh-breadcrumb/rh-breadcrumb.js 179 B
./react/rh-button/rh-button.js 174 B
./react/rh-card/rh-card.js 172 B
./react/rh-chip/rh-chip-group.js 182 B
./react/rh-chip/rh-chip.js 187 B
./react/rh-code-block/rh-code-block.js 181 B
./react/rh-cta/rh-cta.js 170 B
./react/rh-dialog/rh-dialog.js 203 B
./react/rh-disclosure/rh-disclosure.js 192 B
./react/rh-footer/rh-footer-block.js 184 B
./react/rh-footer/rh-footer-copyright.js 187 B
./react/rh-footer/rh-footer-links.js 185 B
./react/rh-footer/rh-footer-social-link.js 193 B
./react/rh-footer/rh-footer-universal.js 188 B
./react/rh-footer/rh-footer.js 174 B
./react/rh-health-index/rh-health-index.js 184 B
./react/rh-icon/rh-icon.js 202 B
./react/rh-jump-links/rh-jump-link.js 196 B
./react/rh-jump-links/rh-jump-links-list.js 189 B
./react/rh-jump-links/rh-jump-links.js 195 B
./react/rh-menu/rh-menu.js 173 B
./react/rh-navigation-primary/rh-navigation-primary-item-menu.js 205 B
./react/rh-navigation-primary/rh-navigation-primary-item.js 210 B
./react/rh-navigation-primary/rh-navigation-primary-overlay.js 199 B
./react/rh-navigation-primary/rh-navigation-primary.js 189 B
./react/rh-navigation-secondary/rh-navigation-secondary-dropdown.js 217 B
./react/rh-navigation-secondary/rh-navigation-secondary-menu-section.js 205 B
./react/rh-navigation-secondary/rh-navigation-secondary-menu.js 199 B
./react/rh-navigation-secondary/rh-navigation-secondary-overlay.js 201 B
./react/rh-navigation-secondary/rh-navigation-secondary.js 213 B
./react/rh-pagination/rh-pagination.js 178 B
./react/rh-site-status/rh-site-status.js 181 B
./react/rh-skip-link/rh-skip-link.js 181 B
./react/rh-spinner/rh-spinner.js 175 B
./react/rh-stat/rh-stat.js 171 B
./react/rh-subnav/rh-subnav.js 175 B
./react/rh-surface/rh-surface.js 175 B
./react/rh-switch/rh-switch.js 185 B
./react/rh-table/rh-sort-button.js 213 B
./react/rh-table/rh-table.js 174 B
./react/rh-tabs/rh-tab-panel.js 181 B
./react/rh-tabs/rh-tab.js 187 B
./react/rh-tabs/rh-tabs.js 174 B
./react/rh-tag/rh-tag.js 182 B
./react/rh-tile/rh-tile-group.js 183 B
./react/rh-tile/rh-tile.js 194 B
./react/rh-timestamp/rh-timestamp.js 176 B
./react/rh-tooltip/rh-tooltip.js 175 B
./react/rh-video-embed/rh-video-embed.js 227 B
./uxdot/ssr-failure-recoverable.js 581 B
./uxdot/uxdot-best-practice.js 812 B
./uxdot/uxdot-color-scheme-picker.js 1.56 kB
./uxdot/uxdot-copy-button.js 1.24 kB
./uxdot/uxdot-copy-permalink.js 1.1 kB
./uxdot/uxdot-demo.js 2.74 kB
./uxdot/uxdot-example.js 1.14 kB
./uxdot/uxdot-feedback.js 837 B
./uxdot/uxdot-header.js 1.02 kB
./uxdot/uxdot-knob-attribute.js 3.53 kB
./uxdot/uxdot-masthead.js 1.36 kB
./uxdot/uxdot-pattern-ssr-controller-client.js 615 B
./uxdot/uxdot-pattern-ssr-controller-server.js 1.72 kB
./uxdot/uxdot-pattern-ssr-controller.js 213 B
./uxdot/uxdot-pattern.js 2.23 kB
./uxdot/uxdot-repo-status-checklist.js 1.16 kB
./uxdot/uxdot-repo-status-list.js 1.07 kB
./uxdot/uxdot-repo-status-table.js 782 B
./uxdot/uxdot-repo.js 1.17 kB
./uxdot/uxdot-search.js 2.39 kB
./uxdot/uxdot-sidenav.js 2.68 kB
./uxdot/uxdot-spacer-tokens-table.js 2.46 kB
./uxdot/uxdot-toc.js 1.8 kB

compressed-size-action

@zeroedin zeroedin marked this pull request as ready for review June 27, 2025 15:49
@zeroedin zeroedin moved this to Review 🔍 in Red Hat Design System Jun 27, 2025
@zeroedin zeroedin added this to the 2025/Q2 — Diglett release milestone Jun 27, 2025
@zeroedin zeroedin changed the title fix(navigation primary): hamburger standalones toggle state fix(navigation-primary): hamburger standalones toggle state Jun 27, 2025
Copy link
Collaborator

@adamjohnson adamjohnson left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The closing behavior of the menu toggle on the left is different than the search and "For you" toggles on the right. Eg:

  1. < 1200px, tab from the Red Hat logo to the menu toggle
  2. Open the menu toggle via the Enter key
  3. Hit tab to set focus to "AI"
  4. Hit shift + tab to return focus to the menu toggle. (Menu closes)

Contrast this behavior to Search / For You, when shift tabbing from inside the open dropdown, the dropdown stays open.

This is not necessarily a blocker, just a curious difference between the two menus.

@zeroedin
Copy link
Collaborator Author

zeroedin commented Jul 3, 2025

This is not necessarily a blocker, just a curious difference between the two menus.

Good catch, this shouldn't be different, you are correct, I don't believe we should be closing the menu until we leave entirely the focus of the "summary" itself eg from menu back to logo, or from contents of menu to the next menu or item in the nav bar..

Copy link
Collaborator

@adamjohnson adamjohnson left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Legitimately Great Tab Management

Copy link
Member

@bennypowers bennypowers left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@adamjohnson can you just quickly validate the jsdocs i added?

@bennypowers bennypowers enabled auto-merge (squash) July 14, 2025 18:56
@bennypowers bennypowers disabled auto-merge July 15, 2025 13:45
@bennypowers bennypowers merged commit 83561d7 into main Jul 15, 2025
5 of 9 checks passed
@bennypowers bennypowers deleted the fix/navigation-primary/toggle-state-hamburger-standalones branch July 15, 2025 13:45
@github-project-automation github-project-automation bot moved this from Review 🔍 to Done ☑️ in Red Hat Design System Jul 15, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
Status: Done ☑️
Development

Successfully merging this pull request may close these issues.

3 participants