fix: improve button hover contrast to meet WCAG 2.1 AA standards#11
fix: improve button hover contrast to meet WCAG 2.1 AA standards#11hk2166 wants to merge 3 commits intoAOSSIE-Org:mainfrom
Conversation
github-actions
bot
added
bug
|
Warning Rate limit exceeded
⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (3)
✨ 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 |
github-actions
bot
added
size/L
There was a problem hiding this comment.
Pull request overview
This PR updates UI components (Footer and FAQ) and synchronizes the lockfile metadata, but it does not include the landing-page hero/download button hover-contrast changes described in the PR title/description and Issue #3 context.
Changes:
- Replaced the existing footer with a new 4-column, animated footer layout including external/community links.
- Added hover-driven styling behavior to FAQ items and adjusted FAQ border classes.
- Updated
package-lock.jsonpackage version fields to1.0.0.
Reviewed changes
Copilot reviewed 3 out of 4 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
src/Pages/Footer/Footer.tsx |
Large footer redesign with framer-motion animations and new external links/icons. |
src/Pages/FaqPage/FAQ.tsx |
Adds hover state styling to FAQ items and adjusts border styling logic. |
package-lock.json |
Updates lockfile version fields to match 1.0.0. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| const [hovered, setHovered] = useState(false); | ||
|
|
||
| return ( | ||
| <motion.div | ||
| className={`rounded-xl overflow-hidden transition-all duration-300 |
There was a problem hiding this comment.
The new hovered React state is only used to drive hover styling. This can be expressed with Tailwind hover:/group-hover: classes (and conditional classes based on isOpen) without triggering re-renders on mouse enter/leave. Consider removing hovered state + mouse handlers and implementing the hover styles purely via CSS classes.
| <footer className="bg-white dark:bg-black text-gray-700 dark:text-gray-300 border-t border-gray-200 dark:border-gray-800 transition-colors duration-300"> | ||
| {/* Main grid */} | ||
| <div className="container mx-auto px-6 py-16"> | ||
| <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12"> |
There was a problem hiding this comment.
PR title/description and linked issue talk about improving landing page download/docs button hover contrast, but this PR’s code changes are in Footer/FAQ (and package-lock). Either include the hero/download-button contrast changes in this PR, or update the PR title/description (and issue link) to match the actual scope.
| ? 'border-pink-500 dark:border-grey-500' | ||
| : 'dark:border-grey-500'} |
There was a problem hiding this comment.
dark:border-grey-500 isn’t a valid Tailwind color token (Tailwind uses gray, not grey), so the dark-mode border color won’t apply. Use dark:border-gray-500 (or whatever shade matches the design) and consider also setting an explicit non-dark border color for the collapsed state for consistency.
| ? 'border-pink-500 dark:border-grey-500' | |
| : 'dark:border-grey-500'} | |
| ? 'border-pink-500 dark:border-gray-500' | |
| : 'border-gray-200 dark:border-gray-500'} |
Fixed insufficient text-to-background contrast on button hover states
in the landing page hero section to meet WCAG 2.1 AA accessibility standards.
Changes Made:
hover:text-teal-500(transparent background)with
hover:bg-teal-600 hover:text-white, achieving ~4.6:1 contrast ratiohover:from-yellow-600 hover:to-green-600and setfont-semiboldfor improved legibilityAddressed Issues:
Fixes #3
Screenshots/Recordings:
Additional Notes:
Previous hover states fell below the WCAG 2.1 AA minimum of 4.5:1 contrast
ratio for normal text. Both buttons now meet or exceed this threshold.
Checklist
We encourage contributors to use AI tools responsibly when creating Pull Requests. While AI can be a valuable aid, it is essential to ensure that your contributions meet the task requirements, build successfully, include relevant tests, and pass all linters. Submissions that do not meet these standards may be closed without warning to maintain the quality and integrity of the project. Please take the time to understand the changes you are proposing and their impact.