a11y Improvements #255
a11y Improvements #255
Conversation
WalkthroughThe pull request introduces several modifications across three Vue components. In Changes
Possibly related PRs
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Outside diff range and nitpick comments (5)
packages/frontendmu-nuxt/components/site/LeftMenu.vue (2)
4-11: LGTM! Consider minor improvements for maintainability.The introduction of
socialMediaPlatformsconstant is a good refactoring that centralizes URLs and enables dynamic rendering.Consider these minor improvements:
+// Map of social media platform names to their respective URLs const socialMediaPlatforms: Record<string, string> = { + // Platforms sorted alphabetically for better maintainability discord: DISCORD_URL, github: GITHUB_URL, instagram: INSTAGRAM_URL, linkedin: LINKEDIN_URL, twitter: TWITTER_URL, whatsapp: WHATSAPP_URL, }
25-30: Consider additional accessibility enhancements for icons.The icons are currently decorative and supplement the aria-labels. To prevent duplicate announcements and improve accessibility:
- <IconDiscord v-if="platform === 'discord'" class="w-6" /> + <IconDiscord v-if="platform === 'discord'" class="w-6" aria-hidden="true" /> - <IconGithub v-if="platform === 'github'" class="w-6" /> + <IconGithub v-if="platform === 'github'" class="w-6" aria-hidden="true" /> - <IconWhatsappCommunity v-if="platform === 'whatsapp'" class="w-6" /> + <IconWhatsappCommunity v-if="platform === 'whatsapp'" class="w-6" aria-hidden="true" /> - <IconSocialTwitter v-if="platform === 'twitter'" class="w-6" /> + <IconSocialTwitter v-if="platform === 'twitter'" class="w-6" aria-hidden="true" /> - <IconInstagram v-if="platform === 'instagram'" class="w-6" /> + <IconInstagram v-if="platform === 'instagram'" class="w-6" aria-hidden="true" /> - <IconLinkedin v-if="platform === 'linkedin'" class="w-6" /> + <IconLinkedin v-if="platform === 'linkedin'" class="w-6" aria-hidden="true" />Also, consider adding a
prefers-reduced-motionmedia query for the bounce animation to respect user motion preferences:- class="text-verse-500 dark:text-verse-200 text-sm md:text-normal hover:animate-bounce hover:ease-in-out hover:delay-200" + class="text-verse-500 dark:text-verse-200 text-sm md:text-normal motion-safe:hover:animate-bounce hover:ease-in-out hover:delay-200"packages/frontendmu-nuxt/components/site/MenuItem.vue (2)
Line range hint
71-83: Enhance focus visibility for better keyboard navigationThe addition of
:focus-withinimproves keyboard accessibility, but the visual feedback could be enhanced.Consider these CSS improvements:
&:focus-within, &:hover { + outline: 2px solid currentColor; + outline-offset: 2px; .menu-dropdown { display: block; opacity: 1; clip-path: circle(100%); transform: translateY(0px); padding-top: 7px; transform-origin: left -100px; + transition: all 0.3s ease; } }
Accessibility improvements need enhancement
The current implementation has some gaps in accessibility that should be addressed:
- The
aria-haspopupattribute is only applied for the "About" menu item, but it should be applied to all menu items with children- The dropdown menu lacks proper ARIA attributes (
aria-expanded,aria-controls) to indicate its state- No keyboard navigation handlers are implemented for the dropdown menu, making it inaccessible for keyboard users
Required changes:
- Update the
aria-haspopupbinding to::aria-haspopup="links[item].children ? 'true' : undefined"- Add
:aria-expandedbinding to track dropdown state- Add
aria-controlsattribute linking the dropdown to its trigger- Implement keyboard navigation handlers for the dropdown menu
🔗 Analysis chain
Line range hint
29-83: Verify accessibility with external links and theme changesPlease ensure that the accessibility improvements work consistently across different scenarios.
Let me gather more specific information about the accessibility implementation.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Check for other potential accessibility issues in the codebase # Look for other dropdown menus that might need similar improvements ast-grep --pattern 'class="menu-dropdown"' # Check for consistent aria-haspopup usage rg -l 'aria-haspopup' # Look for other focus-related styles that might need updating rg -l ':focus-within'Length of output: 196
Script:
#!/bin/bash # Check the complete MenuItem.vue file to understand the full context cat packages/frontendmu-nuxt/components/site/MenuItem.vue # Look for any ARIA attributes in the codebase rg -l 'aria-' packages/frontendmu-nuxt/ # Check for keyboard navigation related handlers rg -l '@keydown|@keyup|@keypress' packages/frontendmu-nuxt/Length of output: 3827
packages/frontendmu-nuxt/components/cards/event-card-modern.vue (1)
Line range hint
47-52: Consider enhancing the focus indicatorThe focus styles look good and match the hover states. However, consider adding a visible focus outline or ring effect specifically for keyboard navigation to enhance accessibility further.
Consider adding these Tailwind classes to the NuxtLink:
-<NuxtLink :href="`/meetup/${event.id}`" class="w-[300px] md:w-96 focus:outline-none"> +<NuxtLink :href="`/meetup/${event.id}`" class="w-[300px] md:w-96 focus:outline-none focus-visible:ring-2 focus-visible:ring-verse-400 focus-visible:ring-offset-2 rounded">
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (3)
packages/frontendmu-nuxt/components/cards/event-card-modern.vue(2 hunks)packages/frontendmu-nuxt/components/site/LeftMenu.vue(1 hunks)packages/frontendmu-nuxt/components/site/MenuItem.vue(2 hunks)
🔇 Additional comments (1)
packages/frontendmu-nuxt/components/site/LeftMenu.vue (1)
15-24: Great accessibility improvements with semantic HTML and ARIA labels!
The refactoring improves accessibility through:
- Proper use of
navelement - Addition of
aria-labelfor screen readers - Secure external link attributes
|
beautiful! merging. thx @wazeerc |
aria-labelsto the social media menu items & refactored the component for lesser code repetition.Before vs After:
Summary by CodeRabbit
New Features
Bug Fixes