fix(ux): 🎨 improve accessibility and loading feedback in user menu#565
fix(ux): 🎨 improve accessibility and loading feedback in user menu#565yacosta738 wants to merge 1 commit intomainfrom
Conversation
- Added aria-label to user menu trigger for better screen reader support - Implemented loading spinner for logout action to provide visual feedback - Improved overall micro-UX of the navigation component Co-authored-by: yacosta738 <33158051+yacosta738@users.noreply.github.com>
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
github-actions
bot
added
the
area:frontend:web
|
Dependency Review✅ No vulnerabilities or license issues or OpenSSF Scorecard issues found.Scanned FilesNone |
📝 WalkthroughSummary by CodeRabbit
WalkthroughEnhanced the logout experience in UserNav.vue by adding visual feedback with a spinner icon during logout and improving button accessibility with an aria-label attribute bound to the current user display name. Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~2 minutes Suggested labels
Poem
Caution Pre-merge checks failedPlease resolve all errors before merging. Addressing warnings is optional.
❌ Failed checks (1 error, 1 warning)
✅ Passed checks (4 passed)
✨ Finishing touches🧪 Generate unit tests (beta)
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. Comment |
Deploying cvix with
|
| Latest commit: |
e8ccfdc
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://3a6ead74.cvix.pages.dev |
| Branch Preview URL: | https://palette-improve-user-nav-ux.cvix.pages.dev |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #565 +/- ##
=======================================
Coverage 75.83% 75.83%
=======================================
Files 115 115
Lines 3824 3824
Branches 1003 1003
=======================================
Hits 2900 2900
Misses 815 815
Partials 109 109
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@client/apps/webapp/src/components/UserNav.vue`:
- Around line 118-122: Add an ARIA busy indicator to improve screen-reader
feedback: on the DropdownMenuItem that uses :disabled="isLoggingOut" (the
element with Loader2 / PhSignOutLight and span), bind aria-busy to isLoggingOut
(e.g., aria-busy="isLoggingOut") and also consider adding
aria-disabled="isLoggingOut" for explicit assistive-tech disabling; keep the
existing handleLogout and isLoggingOut logic unchanged.
| <DropdownMenuItem @click="handleLogout" :disabled="isLoggingOut"> | ||
| <PhSignOutLight class="mr-2 h-4 w-4" /> | ||
| <Loader2 v-if="isLoggingOut" class="mr-2 h-4 w-4 animate-spin" /> | ||
| <PhSignOutLight v-else class="mr-2 h-4 w-4" /> | ||
| <span>{{ isLoggingOut ? "Logging out..." : "Log out" }}</span> | ||
| </DropdownMenuItem> |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Well-implemented loading state with proper disabled handling.
The pattern here is correct:
Loader2withanimate-spinprovides clear visual feedback during logout:disabled="isLoggingOut"prevents double-click issues- Text updates to "Logging out..." for additional clarity
Consider adding aria-busy="true" to the menu item during logout for enhanced screen reader feedback, though the current implementation is functionally solid.
♿ Optional: Enhanced accessibility during loading state
- <DropdownMenuItem `@click`="handleLogout" :disabled="isLoggingOut">
+ <DropdownMenuItem `@click`="handleLogout" :disabled="isLoggingOut" :aria-busy="isLoggingOut">📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <DropdownMenuItem @click="handleLogout" :disabled="isLoggingOut"> | |
| <PhSignOutLight class="mr-2 h-4 w-4" /> | |
| <Loader2 v-if="isLoggingOut" class="mr-2 h-4 w-4 animate-spin" /> | |
| <PhSignOutLight v-else class="mr-2 h-4 w-4" /> | |
| <span>{{ isLoggingOut ? "Logging out..." : "Log out" }}</span> | |
| </DropdownMenuItem> | |
| <DropdownMenuItem `@click`="handleLogout" :disabled="isLoggingOut" :aria-busy="isLoggingOut"> | |
| <Loader2 v-if="isLoggingOut" class="mr-2 h-4 w-4 animate-spin" /> | |
| <PhSignOutLight v-else class="mr-2 h-4 w-4" /> | |
| <span>{{ isLoggingOut ? "Logging out..." : "Log out" }}</span> | |
| </DropdownMenuItem> |
🤖 Prompt for AI Agents
In `@client/apps/webapp/src/components/UserNav.vue` around lines 118 - 122, Add an
ARIA busy indicator to improve screen-reader feedback: on the DropdownMenuItem
that uses :disabled="isLoggingOut" (the element with Loader2 / PhSignOutLight
and span), bind aria-busy to isLoggingOut (e.g., aria-busy="isLoggingOut") and
also consider adding aria-disabled="isLoggingOut" for explicit assistive-tech
disabling; keep the existing handleLogout and isLoggingOut logic unchanged.
Qodana for JVM142 new problems were found
☁️ View the detailed Qodana report Contact Qodana teamContact us at qodana-support@jetbrains.com
|
1 participant
This PR improves the micro-UX and accessibility of the user navigation component (
UserNav.vue).Key changes:
:aria-label="'User menu for ' + getDisplayName(user)"to theDropdownMenuTrigger. This ensures screen reader users understand the purpose of the avatar button.Loader2icon fromlucide-vue-nextto show a spinning loader when the logout process is active (isLoggingOut). This replaces the static sign-out icon during the transition, providing better interaction feedback.The changes are well under the 50-line limit and follow the project's design patterns.
PR created automatically by Jules for task 13520054943768497714 started by @yacosta738