fix: background color visibility on dropdown hover #3330. #3337
Conversation
yashsaraswat2004
requested review from
derberg,
akshatnema,
magicmatatjahu,
anshgoyalevil,
Mayaleeeee and
asyncapi-bot-eve
as code owners
WalkthroughThe pull request includes two primary changes: a CSS class modification for the hover state of menu block items in the Changes
Assessment against linked issues
Possibly related PRs
Suggested labels
Suggested reviewers
📜 Recent review detailsConfiguration used: CodeRabbit UI ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (1)
🔇 Additional comments (1)
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 (
|
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
Welcome to AsyncAPI. Thanks a lot for creating your first pull request. Please check out our contributors guide useful for opening a pull request.
Keep in mind there are also other channels you can use to interact with AsyncAPI community. For more details check out this issue.
✅ Deploy Preview for asyncapi-website ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site configuration. |
yashsaraswat2004
changed the title
yashsaraswat2004
changed the title
|
⚡️ Lighthouse report for the changes in this PR:
Lighthouse ran on https://deploy-preview-3337--asyncapi-website.netlify.app/ |
yashsaraswat2004
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (1)
components/navigation/MenuBlocks.tsx (1)
Line range hint
29-41: Consider enhancing screen reader support.While the hover state visibility is improved, consider these accessibility enhancements:
<LinkComponent href={item.comingSoon ? '' : item.href} key={index} target={isExternalHref ? '_blank' : undefined} rel={isExternalHref ? 'noopener noreferrer' : undefined} + aria-label={`${item.title}${isExternalHref ? ' (opens in new tab)' : ''}`} > <span data-testid='MenuBlocks-Link' className={`-m-3 flex items-start space-x-4 rounded-lg p-3 transition duration-150 ease-in-out ${ router.asPath === item.href ? 'bg-secondary-100 shadow-sm' : 'hover:bg-gray-300' }`} > <div className={`flex size-10 shrink-0 items-center justify-center rounded-lg ${ item.className ? item.className : 'border border-gray-800 bg-secondary-100' } text-gray-900 sm:size-12 ${item.comingSoon && 'opacity-50'}`} data-testid='MenuBlock-icon' + aria-hidden="true" >
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (3)
- components/navigation/MenuBlocks.tsx (1 hunks)
- components/navigation/NavMenu.tsx (1 hunks)
- components/navigation/SubCategoryDocsNav.tsx (1 hunks)
✅ Files skipped from review due to trivial changes (2)
- components/navigation/NavMenu.tsx
- components/navigation/SubCategoryDocsNav.tsx
🔇 Additional comments (1)
components/navigation/MenuBlocks.tsx (1)
46-46: Improved hover state visibility with better contrast.The change from
hover:bg-gray-50tohover:bg-gray-300effectively addresses the visibility issue by providing better contrast during hover interactions.Let's verify the contrast ratios meet WCAG guidelines:
✅ Verification successful
Hover state contrast change is appropriate and consistent with existing usage
The change to
hover:bg-gray-300is well-implemented:
- It's used consistently with text colors that ensure good contrast (text-gray-700 and text-gray-800 in other components)
- The hover state provides sufficient visual feedback while maintaining readability
- The implementation preserves the existing conditional logic for active state styling
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Check for any color-related accessibility issues in the codebase # Look for potential contrast issues with gray-300 background rg -i "text-\w+(?:-\d+)?\s+.*bg-gray-300|bg-gray-300\s+.*text-\w+(?:-\d+)?"Length of output: 393
Script:
#!/bin/bash # Let's check the text colors used with the hover:bg-gray-300 class to ensure proper contrast rg -A 2 -B 2 "hover:bg-gray-300" # Also check if there are any existing color contrast guidelines or theme configurations fd -e js -e ts -e json "theme|color" --exec grep -l -i "contrast\|accessibility\|gray-300"Length of output: 595
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #3337 +/- ##
=======================================
Coverage 49.14% 49.14%
=======================================
Files 21 21
Lines 647 647
=======================================
Hits 318 318
Misses 329 329 ☔ View full report in Codecov by Sentry. |
This PR fixes an issue with the visibility of background colors on components in the dropdown menu when hovering. Previously, hovering over dropdown items within the Docs, Community, and Tools menus did not display the intended background color, causing a poor user experience.
To address this:
Updated the background color styling to improve contrast and visibility for dropdown items on hover.
Verified that changes are consistent across different dropdown menus for a cohesive look.
Screenshots
How to Test
Open the ASyncAPI website in Google Chrome.
Hover over Docs, Community, or Tools in the navigation bar to trigger the dropdown menu.
Move the cursor over items in the dropdown menu to see the hover effect.
Related Issue(s)
Fixes #3330
Summary by CodeRabbit
Style
Chores
renderContentfunction.