Improve page link access and user experience

[riderx]

<pr_request_template>## Summary

This PR significantly enhances the user experience and accessibility of the application by addressing several UX issues related to link accessibility, navigation, and mobile usability.

Key improvements include:

• Improved Accessibility: Added ARIA attributes, consistent focus states, and better keyboard navigation for interactive elements (buttons, links, navigation).
• Enhanced Security: Implemented rel="noopener noreferrer" for all external links.
• Clearer Visuals: Introduced visual indicators (external link icons) for external links.
• Optimized Mobile Experience: Increased touch target sizes for improved mobile navigation.
• Semantic Structure: Refactored breadcrumb navigation for better accessibility.

Test plan

1. Keyboard Navigation:
   • Navigate through all interactive elements (buttons, links, sidebar items, breadcrumbs, hamburger menu, back button) using Tab and Shift+Tab.
   • Verify that focus states are clearly visible on all interactive elements.
2. External Links:
   • Click on external links (e.g., in Sidebar, API Keys page, LogTable).
   • Verify they open in a new tab.
   • Inspect element to confirm rel="noopener noreferrer" attribute is present.
   • Confirm the external link icon is visible next to external links.
3. Mobile Responsiveness:
   • Test the application on a mobile device or using browser developer tools (responsive mode).
   • Verify that touch targets for buttons and links (especially hamburger menu, back button, sidebar items) are sufficiently large and easy to tap.
4. Breadcrumb Navigation:
   • Navigate to a nested page (e.g., an app detail page).
   • Verify the breadcrumbs are displayed correctly and are clickable.
   • Confirm keyboard navigation works for breadcrumb links.
5. Hamburger Menu & Back Button:
   • On mobile/small screens, test the hamburger menu: open/close functionality, aria-label changes.
   • Test the back button functionality and its aria-label.

Screenshots

Please include screenshots/videos demonstrating:

• Visible focus states on various interactive elements.
• External link icons next to relevant links.
• Mobile navigation (hamburger menu, touch targets).

Checklist

• My code follows the code style of this project and passes bun run lint-backend && bun run lint.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• My change has adequate E2E test coverage.
• I have tested my code manually, and I have provided steps how to reproduce my tests</pr_request_template>

---

_{Learn more about Cursor Agents}

Summary by CodeRabbit

• Accessibility Improvements

  • Enhanced keyboard navigation and focus indicators across navigation, sidebar, breadcrumbs, and external links.
  • Improved ARIA labeling and semantic HTML for navigation and breadcrumb structures.
  • Added descriptive ARIA labels for buttons and links, including dynamic state descriptions.

• Security Enhancements

  • Updated external links to use noopener,noreferrer for improved security when opening new tabs.

• User Interface

  • Added visual indicators for external links and refined styling for better alignment and clarity.

[coderabbitai]

Walkthrough

The changes focus on improving accessibility, security, and semantic markup across several UI components. Enhancements include better ARIA labeling, keyboard focus styles, semantic HTML restructuring, and secure handling of external links by adding noopener,noreferrer to window.open and anchor tags. No core logic or exported entity declarations are altered.

Changes

Cohort / File(s)	Change Summary
Navbar Accessibility & Semantics src/components/Navbar.vue	Improved accessibility with explicit ARIA labels, enhanced focus styles for keyboard navigation, and semantic restructuring of the breadcrumb navigation using <nav>, <ol>, and <li>. Breadcrumb separators are marked as aria-hidden. No logic or control flow changes.
Sidebar Accessibility & Security src/components/Sidebar.vue	Added noopener,noreferrer to external window.open calls for security, enhanced ARIA labeling and focus styles for sidebar header and tab buttons, and visually indicate external links with SVG icons. No changes to exported entities.
LogTable External Link Security src/components/tables/LogTable.vue	Updated window.open for documentation links to include noopener,noreferrer, improving security. No changes to logic or exported entities.
API Keys Page Link Accessibility & Styling src/pages/ApiKeys.vue	Enhanced external documentation links with rel="noopener noreferrer", dynamic ARIA labels, improved focus and alignment styles, and added SVG icons for external links. No changes to logic or exported entities.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant Navbar
    participant Sidebar
    participant LogTable
    participant ApiKeysPage
    participant ExternalSite

    User->>Navbar: Focuses or clicks navigation/back/breadcrumb
    Navbar-->>User: Shows focus ring, ARIA labels for screen readers

    User->>Sidebar: Clicks external link/tab
    Sidebar->>ExternalSite: window.open(url, '_blank', 'noopener,noreferrer')

    User->>LogTable: Clicks documentation link
    LogTable->>ExternalSite: window.open(DOC_LOGS, '_blank', 'noopener,noreferrer')

    User->>ApiKeysPage: Clicks CLI/API doc link
    ApiKeysPage->>ExternalSite: Opens link in new tab with rel="noopener noreferrer"

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

🐇✨

I nibbled on code with a hop and a wink,
Making links safer, faster than you think!
Breadcrumbs now shine with a semantic glow,
Focus rings sparkle wherever you go.
Secure and accessible, our UI takes flight—
A rabbit’s small tweaks make the user’s world bright!

---

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e0cab3e and 7f36dc6.

📒 Files selected for processing (4)

• src/components/Navbar.vue (1 hunks)
• src/components/Sidebar.vue (3 hunks)
• src/components/tables/LogTable.vue (1 hunks)
• src/pages/ApiKeys.vue (1 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)

• GitHub Check: Run tests
• GitHub Check: Analyze (java-kotlin)
• GitHub Check: Analyze (javascript-typescript)

🔇 Additional comments (9)

src/components/tables/LogTable.vue (1)

173-173: Security improvement implemented correctly.

The addition of 'noopener,noreferrer' to the window.open call enhances security by preventing the opened documentation page from accessing the parent window and omitting referrer information. This follows security best practices for external links.

src/components/Sidebar.vue (4)

58-58: Security enhancement for external links.

The addition of 'noopener,noreferrer' to window.open calls for documentation and Discord links properly secures external navigation, consistent with the security improvements throughout the PR.

Also applies to: 65-65

---

96-103: Excellent accessibility improvements to the header logo link.

The enhancements include:

• Keyboard focus ring styles for better navigation
• Descriptive ARIA label indicating the link destination
• Improved alt text for the logo image

These changes significantly improve screen reader support and keyboard accessibility.

---

120-127: Comprehensive accessibility enhancements for navigation tabs.

The improvements include:

• Focus ring styles and minimum height for better keyboard/touch interaction
• Dynamic ARIA labels that indicate external links open in new tabs
• aria-current attribute to mark the active page for screen readers

These changes follow WCAG guidelines and enhance the user experience for assistive technology users.

---

131-136: Visual indicator for external links enhances user experience.

The inline SVG external link icon provides clear visual feedback to users that these links will open in a new tab. The icon is properly marked with aria-hidden="true" to avoid screen reader redundancy since the ARIA label already conveys this information.

src/pages/ApiKeys.vue (1)

659-684: Comprehensive enhancement of external documentation links.

Both CLI and API documentation links now include:

• rel="noopener noreferrer" for security
• Dynamic ARIA labels indicating new tab behavior
• Keyboard focus ring styles for accessibility
• Inline SVG icons providing visual indication of external links

These changes are consistent with the accessibility and security improvements throughout the PR and significantly enhance user experience for both sighted users and those using assistive technologies.

src/components/Navbar.vue (3)

40-47: Back button accessibility improvements.

The back button now includes proper ARIA labeling and keyboard focus styles, making it more accessible for screen reader users and keyboard navigation. The implementation maintains the existing functionality while enhancing usability.

---

50-58: Comprehensive hamburger menu accessibility enhancements.

The hamburger button now includes:

• aria-controls and aria-expanded for proper ARIA state management
• Dynamic ARIA labels reflecting open/closed state
• Screen reader text with sr-only class for redundant accessibility
• Focus ring styles for keyboard navigation

These changes significantly improve the experience for users with assistive technologies.

---

64-87: Excellent semantic restructuring of breadcrumb navigation.

The breadcrumb navigation has been properly restructured from a simple span-based layout to semantic HTML:

• <nav> with aria-label for proper landmark identification
• <ol> and <li> structure following breadcrumb best practices
• Focus ring styles on all router-link elements
• Separators marked with aria-hidden="true" to prevent screen reader confusion

This implementation follows WCAG guidelines and significantly improves navigation accessibility.

✨ Finishing Touches

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch cursor/improve-page-link-access-and-user-experience-a078

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Explain this complex logic.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai explain this code block.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and explain its main purpose.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai generate unit tests to generate unit tests for this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud