这是indexloc提供的服务,不要输入任何密码
Skip to content

feat(sidebar): improve folder link accessibility and UX #10349

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
merged 2 commits into from
Apr 17, 2025

Conversation

0xmuon
Copy link
Contributor

@0xmuon 0xmuon commented Apr 17, 2025

Description

Refering the Discussion: #10328

This PR improves the accessibility and user experience of the sidebar folder links by separating the navigation and toggle functionality into distinct interactive elements.

Key Changes:

  • Separated the folder link and toggle button into distinct elements for clearer interaction patterns
  • Added proper aria-label attributes for screen readers to indicate expand/collapse actions
  • Improved visual feedback with hover states on the toggle button

Testing Instructions

This is what it was earlier:
https://drive.google.com/file/d/1-XLu9N_nAoksvfLQQlQQndniZFstABaM/view?usp=sharing

And this is how it looks now:
https://drive.google.com/file/d/1YOqaRRn6L-cFq2cgZH5Lg7u5HSx-d6A9/view?usp=sharing

  1. Basic Functionality

    • Navigate to any page with a sidebar containing folder links
  2. Accessibility Testing

    • Use a screen reader to navigate the sidebar
  3. Edge Cases

    • Test with long folder names to ensure proper text truncation
    • Verify behavior when a folder is both active and collapsed

@0xmuon 0xmuon requested review from anthonyshew and a team as code owners April 17, 2025 12:04
@0xmuon 0xmuon requested a review from erikareads April 17, 2025 12:04
@turbo-orchestrator turbo-orchestrator bot added area: site needs: triage New issues get this label. Remove it after triage labels Apr 17, 2025
Copy link

vercel bot commented Apr 17, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
examples-basic-web ✅ Ready (Inspect) Visit Preview 💬 Add feedback Apr 17, 2025 10:36pm
examples-designsystem-docs ✅ Ready (Inspect) Visit Preview 💬 Add feedback Apr 17, 2025 10:36pm
examples-native-web ✅ Ready (Inspect) Visit Preview 💬 Add feedback Apr 17, 2025 10:36pm
examples-svelte-web ✅ Ready (Inspect) Visit Preview 💬 Add feedback Apr 17, 2025 10:36pm
examples-tailwind-web ✅ Ready (Inspect) Visit Preview 💬 Add feedback Apr 17, 2025 10:36pm
examples-vite-web ✅ Ready (Inspect) Visit Preview 💬 Add feedback Apr 17, 2025 10:36pm
turbo-site ❌ Failed (Inspect) Apr 17, 2025 10:36pm

Copy link

vercel bot commented Apr 17, 2025

@0xmuon is attempting to deploy a commit to the Vercel Team on Vercel.

A member of the Team first needs to authorize it.

Copy link
Contributor

@anthonyshew anthonyshew left a comment

Choose a reason for hiding this comment

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

This feels great! Thank you so much.

@anthonyshew anthonyshew enabled auto-merge (squash) April 17, 2025 22:42
@anthonyshew anthonyshew merged commit f745bd8 into vercel:main Apr 17, 2025
27 of 31 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area: site needs: triage New issues get this label. Remove it after triage
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants