-
Notifications
You must be signed in to change notification settings - Fork 8.8k
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
fix(editor): Use web native <a> element in nav menus #8385
fix(editor): Use web native <a> element in nav menus #8385
Conversation
Currently all navigation in the menus is done programmatically. This is not accessible way to do navigation, as it prevents browser default behaviour, like cmd/ctrl+click to open into new tab. Also screen readers don't give any indication that the active element is an anchor. This PR refactors component library's Menu and MenuItem to use either vue-router RouterLink or <a> when the menu item is a navigation element.
:content="item.secondaryIcon?.tooltip?.content" | ||
:disabled="compact || !item.secondaryIcon?.tooltip?.content" | ||
:show-after="tooltipDelay" | ||
<ConditionalRouterLink v-bind="item.route ?? item.link"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The diff is a bit messed. This was added as a wrapper
67fd89b
to
f1cd098
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for the effort Tomi! Looks good
1 flaky test on run #3833 ↗︎
Details:
cypress/e2e/17-sharing.cy.ts • 1 flaky test
Review all test suite changes for PR #8385 ↗︎ |
✅ All Cypress E2E specs passed |
Got released with |
Summary
Currently all navigation in the menus is done programmatically. This is not accessible way to do navigation, as it prevents browser default behaviour, like cmd/ctrl+click to open into new tab. Also screen readers don't give any indication that the active element is an anchor.
This PR refactors component library's Menu and MenuItem to use either vue-router RouterLink or when the menu item is a navigation element.
Kapture.2024-01-18.at.14.17.57.mp4
Related tickets and issues
https://linear.app/n8n/issue/ADO-35/bug-should-be-able-to-open-views-in-new-navigation-tab
Review / Merge checklist
(no-changelog)
otherwise. (conventions)