fix(docs): tooltip color contrast accessibility #2662
Conversation
🦋 Changeset detectedLatest commit: 1a95a62 The changes in this PR will be included in the next version bump. This PR includes changesets to release 23 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
WalkthroughThis pull request adds a changeset documenting a patch release and includes a CSS modification. Specifically, it introduces a changelog entry for "trigger.dev" describing an accessibility fix for tooltip color contrast on documentation pages. The corresponding CSS change adds a styling rule targeting a tooltip element that follows a button, setting its text color to black to improve visual contrast. Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes
Pre-merge checks and finishing touches✅ Passed checks (5 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 |
![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
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
.changeset/tough-feet-accept.md(1 hunks)docs/style.css(1 hunks)
🔇 Additional comments (3)
.changeset/tough-feet-accept.md (1)
1-5: Changeset format is correct.The changeset entry follows the standard Changesets format with proper YAML frontmatter and description. The patch version type is appropriate for an accessibility fix.
docs/style.css (2)
1-2: The CSS selector indocs/style.csshas no matching elements in the codebase and poses no side effect risk.Verification found that no elements in the entire docs directory use the class combination
absoluteandpeer-hover:opacity-100. The selector appears only in its definition; it has zero real-world application in the current codebase. The concerns about inadvertently matching other components are unfounded—there are no matching elements to affect.Likely an incorrect or invalid review comment.
2-2: Verify that black text provides adequate color contrast on the tooltip background.The fix sets tooltip text to black (#000), but the contrast adequacy depends on the tooltip's background color. WCAG AA accessibility standards require a minimum contrast ratio of 4.5:1 for normal text.
Confirm that the tooltip background color, when paired with black text (#000), meets the contrast requirement. If the background is light, black should work; if dark, this may not provide sufficient contrast.
| button~.absolute.peer-hover\:opacity-100 { | ||
| color: #000 |
There was a problem hiding this comment.
🧩 Analysis chain
Verify the CSS file is properly imported in the docs app.
The new docs/style.css file contains the tooltip styling, but it must be imported or linked in the docs application for the rule to take effect. Confirm that this file is referenced in the docs build configuration or main HTML/template file.
🏁 Script executed:
#!/bin/bash
# Search for references to docs/style.css or global style imports in docs configuration files
rg -i "style\.css|@import|<link.*stylesheet" docs/ -g '*.html' -g '*.jsx' -g '*.tsx' -g '*.js' -g '*.ts' -C 2Length of output: 0
🏁 Script executed:
#!/bin/bash
# Check if docs/style.css exists and list docs directory structure
echo "=== Checking docs/style.css existence ==="
ls -la docs/style.css 2>&1 || echo "File not found"
echo -e "\n=== Docs directory structure ==="
find docs -type f -name "*.css" -o -name "*.html" -o -name "*.jsx" -o -name "*.tsx" | head -20
echo -e "\n=== Build/config files in docs ==="
find docs -maxdepth 2 -type f \( -name "*.config.*" -o -name "vite*" -o -name "webpack*" -o -name "next*" -o -name "tsconfig*" -o -name "package.json" \)
echo -e "\n=== Root level build config ==="
ls -la *.config.* package.json 2>&1 | head -10Length of output: 519
🏁 Script executed:
#!/bin/bash
# Check docs/package.json and search for CSS imports in JS/TS
echo "=== docs/package.json ==="
cat docs/package.json
echo -e "\n=== Search for style.css import/require in JS/TS files ==="
rg "style\.css" docs/ -g '*.js' -g '*.ts' -g '*.jsx' -g '*.tsx' -g '*.mdx' -C 2
echo -e "\n=== Look for main entry files (index, app, layout, _document) ==="
find docs -maxdepth 2 -type f \( -name "index.*" -o -name "app.*" -o -name "layout.*" -o -name "_document.*" -o -name "main.*" \)
echo -e "\n=== Check root package.json for docs build ==="
cat package.json | grep -A 5 "docs\|scripts" | head -30Length of output: 655
🏁 Script executed:
#!/bin/bash
# Search for Mintlify config and understand docs structure
echo "=== Look for Mintlify config files ==="
find docs -maxdepth 2 -type f \( -name "mint.json" -o -name ".mintlify*" -o -name "mintlify*" \)
echo -e "\n=== Check docs directory structure ==="
ls -la docs/
echo -e "\n=== Look for public/static/assets directories ==="
find docs -maxdepth 2 -type d \( -name "public" -o -name "static" -o -name "assets" -o -name "css" \)
echo -e "\n=== Search for any reference to CSS in docs files ==="
rg -i "css|style" docs/ -g '*.json' -g '*.md' -g '*.mdx' | head -20Length of output: 9796
🌐 Web query:
Mintlify custom CSS how to include external stylesheet
💡 Result:
Short answer — Mintlify doesn't provide a dedicated UI to paste an external tag; instead either add CSS files to your docs repo (they're auto-applied) or load an external stylesheet from inside your repo CSS/JS.
Options:
- Add a local CSS file (recommended)
- Put style.css in your docs/content (or repo) — Mintlify will include it site‑wide. [1]
- Import a remote stylesheet from your local CSS
- In your style.css add:
@import url("https://example.com/your.css"); - Mintlify will load the local file which then imports the external stylesheet. [1][2]
- Inject a via custom JS (if you need dynamic loading)
- Create a .js file in the content directory and include code to append a link element to head:
const l = document.createElement('link');
l.rel = 'stylesheet';
l.href = 'https://example.com/your.css';
document.head.appendChild(l); - Mintlify includes any .js in the content directory globally. [1]
References:
- Mintlify Custom scripts (Custom CSS / Custom JS). [1]
- Mintlify blog: Global CSS feature announcement. [2]
🏁 Script executed:
#!/bin/bash
# Check Mintlify config to understand expected CSS location
echo "=== docs.json (Mintlify config) ==="
cat docs/docs.json | head -50
echo -e "\n=== Search for 'content' or 'css' references in docs.json ==="
cat docs/docs.json | grep -i "content\|css\|style" | head -20Length of output: 1875
The CSS file is not integrated with the Mintlify build system and won't take effect.
According to Mintlify documentation, CSS files should be placed in docs/content or auto-included from the repo. The docs/style.css file is at the docs root level and is not:
- Imported in any JavaScript or MDX files
- Configured in
docs.json - Located in a
docs/contentdirectory where Mintlify expects CSS files
Move the CSS file to the correct location (docs/content/ directory) or add explicit configuration to docs.json to ensure the tooltip styling is actually applied by Mintlify.
🤖 Prompt for AI Agents
In docs/style.css around lines 1 to 2: the stylesheet is placed at the repo root
and is not being included by Mintlify, so its tooltip/button styling will not
take effect; either move this CSS file into docs/content/ (so Mintlify
auto-includes it) or update docs.json to explicitly reference docs/style.css (or
its new path) so Mintlify loads it; ensure any imports in MDX/JS files point to
the new path if you move the file.
1 participant
Closes #2633
✅ Checklist
Testing
pnpm run dev --filter docsChangelog
Added a new global style.css file.
Included a CSS selector that improves text visibility by adjusting the tooltip’s text color for better contrast.
Screenshots
Before:
After