Skip to content
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

Merged

Conversation

tomi
Copy link
Contributor

@tomi tomi commented Jan 18, 2024

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

  • PR title and summary are descriptive. Remember, the title automatically goes into the changelog. Use (no-changelog) otherwise. (conventions)
  • Tests included.

    A bug is not considered fixed, unless a test is added to prevent it from happening again.
    A feature is not complete without tests.

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">
Copy link
Contributor Author

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

@tomi tomi force-pushed the ado-35-bug-should-be-able-to-open-views-in-new-navigation-tab branch from 67fd89b to f1cd098 Compare January 18, 2024 12:44
@n8n-assistant n8n-assistant bot added n8n team Authored by the n8n team ui Enhancement in /editor-ui or /design-system labels Jan 18, 2024
Copy link
Contributor

@cstuncsik cstuncsik left a 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

Copy link

cypress bot commented Jan 19, 2024

1 flaky test on run #3833 ↗︎

0 336 5 0 Flakiness 1

Details:

🌳 🖥️ browsers:node18.12.0-chrome107 🤖 tomi 🗃️ e2e/*
Project: n8n Commit: b90734bbcb
Status: Passed Duration: 03:20 💡
Started: Jan 19, 2024 10:15 AM Ended: Jan 19, 2024 10:18 AM
Flakiness  cypress/e2e/17-sharing.cy.ts • 1 flaky test

View Output Video

Test Artifacts
Sharing > should work for admin role on credentials created by others (also can share it with themselves) Test Replay Screenshots Video

Review all test suite changes for PR #8385 ↗︎

Copy link
Contributor

✅ All Cypress E2E specs passed

@tomi tomi merged commit e606e84 into master Jan 19, 2024
28 checks passed
@tomi tomi deleted the ado-35-bug-should-be-able-to-open-views-in-new-navigation-tab branch January 19, 2024 10:52
@github-actions github-actions bot mentioned this pull request Jan 22, 2024
@janober
Copy link
Member

janober commented Jan 22, 2024

Got released with [email protected]

@github-actions github-actions bot mentioned this pull request Jan 24, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
n8n team Authored by the n8n team Released ui Enhancement in /editor-ui or /design-system
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants