Skip to content

Conversation

JoshuaKGoldberg
Copy link
Contributor

Prerequisites checklist

What is the purpose of this pull request? (put an "X" next to an item)

[x] Documentation update
[ ] Bug fix (template)
[ ] New rule (template)
[ ] Changes an existing rule (template)
[ ] Add autofix to a rule
[ ] Add a CLI option
[ ] Add something to the core
[ ] Other, please explain:

Fixes eslint/eslint.org#665. Corresponds to eslint/eslint.org#666.

What changes did you make? (Give an overview)

I swapped out the hardcoded comment colors with the closest theme tokens that had sufficient contrast.

Mode Before After
Light 'Before' screenshot in light mode of a code block with just barely too low contrast for code comments 'After' screenshot in light mode of a code block with just barely too low contrast for code comments
Dark 'Before' screenshot in dark mode of a code block with just barely too low contrast for code comments 'After' screenshot in dark mode of a code block with just barely enough contrast for code comments

Is there anything you'd like reviewers to focus on?

If there are other ad-hoc colors just barely off from color tokens, I'd be happy to clean those up in a followup?

@JoshuaKGoldberg JoshuaKGoldberg requested a review from a team as a code owner November 27, 2024 21:05
@eslint-github-bot eslint-github-bot bot added the bug ESLint is working incorrectly label Nov 27, 2024
Copy link

netlify bot commented Nov 27, 2024

Deploy Preview for docs-eslint ready!

Name Link
🔨 Latest commit b2fc957
🔍 Latest deploy log https://app.netlify.com/sites/docs-eslint/deploys/674a295ac393d200085be61f
😎 Deploy Preview https://deploy-preview-19187--docs-eslint.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link
Contributor

@Tanujkanti4441 Tanujkanti4441 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the PR!

But in no-js mode the color is still not bright can you please fix that also?

js mode
Screenshot 2024-11-28 121825

no-js mode
Screenshot 2024-11-28 121846

and CI is failing could it be because the branch is not up-to-date?

@Tanujkanti4441 Tanujkanti4441 added the documentation Relates to ESLint's documentation label Nov 28, 2024
@amareshsm amareshsm added the accepted There is consensus among the team that this change meets the criteria for inclusion label Nov 28, 2024
@JoshuaKGoldberg
Copy link
Contributor Author

Ooh, interesting. That looks to me like a more root issue about text using light mode styles in dark mode when no-js is enabled. I think that's out of scope of this PR?

@JoshuaKGoldberg
Copy link
Contributor Author

Oh! I was wrong, code comments just aren't using the same dark/light mode queries as most of the app. Updated.

Copy link
Contributor

@Tanujkanti4441 Tanujkanti4441 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, thanks!

@mdjermanovic mdjermanovic changed the title fix: use higher contrast color tokens for code comments docs: use higher contrast color tokens for code comments Dec 1, 2024
@mdjermanovic mdjermanovic removed the bug ESLint is working incorrectly label Dec 1, 2024
Copy link
Member

@mdjermanovic mdjermanovic left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, thanks!

@mdjermanovic mdjermanovic merged commit a76f233 into eslint:main Dec 1, 2024
26 of 27 checks passed
@JoshuaKGoldberg JoshuaKGoldberg deleted the a11y-comment-color-contrast branch December 1, 2024 20:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

accepted There is consensus among the team that this change meets the criteria for inclusion documentation Relates to ESLint's documentation

Projects

Status: Complete

Development

Successfully merging this pull request may close these issues.

Bug: Color contrast of code comments in light mode does not satisfy WCAG AA (accessibility)

4 participants