Primer CSS a11y

[simurai]

A few more accessibility improvements to the component refresh before releasing it as Primer CSS 15.0.0.

1. Increase contrast for $text-green

Before	After
green-500	green-600
#28a745	#22863a
Contrast ratio: 3.13 ❌	Contrast ratio: 4.63 ✅

2. Increase contrast for placeholders

Overriding the opacity: 0.54 to opacity: 1 will make sure the $text-gray-light is opaque and the contrast ratio should now be 4.82 (recommendation is 4.5). Improves https://github.com/github/github/issues/131894

Before	After
Contrast ratio: 2.06 ❌	Contrast ratio: 4.82 ✅

3. More accessible .Progress component

This makes sure the .Progress bar is visible when enabling custom colors in Firefox. Improves https://github.com/github/github/issues/131895. The transparent outline/border won't be visible by default. But when custom colors are enabled in Firefox, it will make the outline/border the same color as the text color. And they magically appear. ✨

Description	Screenshot
Default
Before (invisible)
After

4. More accessible .State component

Same as above ☝️ .

Description	Screenshot
Default
Before (invisible borders)
After

5. More accessible .Counter component

Same as above ☝️ .

Description	Screenshot
Default
Before (invisible borders)
After

6. More accessible .diffstat component

Same as above ☝️ .

Description	Screenshot
Default
Before (invisible)
After

7. More accessible .btn component when focused

Same as above ☝️ . Improves https://github.com/github/github/issues/131885

Description	Screenshot
Default
Before (invisible focus state)
After

8. More accessible .UnderlineNav component

Same as above ☝️ .

Description	Screenshot
Default
Before (almost invisible selected state)
After

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/primer/primer-css/8elhoc1su
✅ Preview: https://primer-css-git-next-10.primer.vercel.app

[auareyou]

Love your solution for the changes graph! <3

[vdepizzol]

@simurai doesn't adding outline-color: transparent to the :focus state break accessibility in all other browsers or when users don't use custom colors?