Repository navigation
fix(speakers): use dark fallback text color on social link hover (#312) - #367
aakashtripathi011 wants to merge 1 commit into
Conversation
Reviewer's guide (collapsed on small PRs)Reviewer's GuideThis CSS-only fix changes the social-link hover text fallback from white to dark ink, preventing invisible text on standalone speaker pages where File-Level Changes
Possibly linked issues
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info
📝 Walkthrough
Merge Risk: ⚪ Minimal · up to
|
| Check name | Status | Explanation |
|---|---|---|
| Description Check |  |
Check skipped - CodeRabbit’s high-level summary is enabled. |
| Title check | |
The title clearly and concisely describes the main change: using a dark fallback text color for speaker social-link hover states. |
| Docstring Coverage | |
No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 0… |
| Linked Issues check | |
Check skipped because no linked issues were found for this pull request. |
| Out of Scope Changes check | |
Check skipped because no linked issues were found for this pull request. |
Full details: Docstring Coverage
-
Explanation
No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 0 files. (1 skipped: 1 unsupported.)
✨ Finishing Touches
-
🧪 Generate unit tests (beta)
-
- Create a new PR
-
- Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts
Warning
Some tools did not complete. Review the errors below.
🔧 ESLint
-
If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.
ESLint install timed out. The project may have too many dependencies for the sandbox.
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 @coderabbitai help to get the list of available commands.
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey - I've found 1 issue
Prompt for AI Agents
Please address the comments from this code review:
## Individual Comments
### Comment 1
<location path="public/css/templates/speakers.css" line_range="383" />
<code_context>
.wpfaevent .wpfa-social-link:hover {
background: var(--event-primary);
- color: var(--event-primary-contrast, #fff);
+ color: var(--event-primary-contrast, #243447);
}
</code_context>
<issue_to_address>
**Dark text loses contrast on hover**
When a theme supplies a dark `--event-primary` on the speaker profile without supplying `--event-primary-contrast`, `.wpfa-social-link:hover` combines the dark fallback text with the independently supplied `--event-primary` background, so a dark primary color renders the link label with poor contrast.
Use a contrast color appropriate to the primary background, or scope the dark fallback to the case where the hover background is absent.
</issue_to_address>Sourcery assessment
Approval pending. 1 finding to address first.
Blocking findings: public/css/templates/speakers.css:383
| .wpfaevent .wpfa-social-link:hover { | ||
| background: var(--event-primary); | ||
| color: var(--event-primary-contrast, #fff); | ||
| color: var(--event-primary-contrast, #243447); |
There was a problem hiding this comment.
🟡 Medium · Dark text loses contrast on hover
When a theme supplies a dark --event-primary on the speaker profile without supplying --event-primary-contrast, .wpfa-social-link:hover combines the dark fallback text with the independently supplied --event-primary background, so a dark primary color renders the link label with poor contrast.
Use a contrast color appropriate to the primary background, or scope the dark fallback to the case where the hover background is absent.
Prompt for AI agents
In `public/css/templates/speakers.css` at line 383:
**Dark text loses contrast on hover**
When a theme supplies a dark `--event-primary` on the speaker profile without supplying `--event-primary-contrast`, `.wpfa-social-link:hover` combines the dark fallback text with the independently supplied `--event-primary` background, so a dark primary color renders the link label with poor contrast.
Use a contrast color appropriate to the primary background, or scope the dark fallback to the case where the hover background is absent.
Ubayed-Bin-Sufian
left a comment
Ubayed-Bin-Sufian
left a comment
There was a problem hiding this comment.
Please address sourcery-ai review. Also please check what happens with darker background.
Ubayed-Bin-Sufian
left a comment
Ubayed-Bin-Sufian
left a comment
There was a problem hiding this comment.
@aakashtripathi011 Please update as suggested.
📌 Fixes
Partially addresses #312 (social link hover issue only; the event-name resolution part is not included).
📝 Summary of Changes
.wpfa-social-link:hovertext turned white because thecolorfallback was#fff, and the--event-primarybackground is not defined on that page, so the text became invisible on a white background.colorfallback inspeakers.cssfrom#fffto#243447(the existing--event-inkcolour in this file). Thebackgroundrule is unchanged, so themes that define the variables look the same as before.📷 Screenshots / Demo (if UI-related)
Before:
After:
✅ Checklist
Reviewer Notes
One-line CSS change. On my Windows setup
npm run lintreports only CRLF line-ending (prettier/prettier) errors across existing files, none related to this change, so I didn't run the auto-fix to avoid touching unrelated files. I did not runphpcs/phpstanfor this CSS-only change.Summary by Sourcery
Bug Fixes:
Summary by CodeRabbit