✅ [outreachy] fix: adjust styles to fix a11y issues

[FatumaA]

This PR Fixes #5371

It focuses on color contrast between buttons and links. And aims to solve these issues - https://gist.github.com/FatumaA/3141068e904cbcf4e2c53936f42d3d62

[svrnm]

Can you run the reporting tool against the preview site and verify that the issues have been resolved?

https://deploy-preview-5481--opentelemetry.netlify.app/

[FatumaA]

It's all clear for 2AA except for the code blocks

pa11y https://deploy-preview-5481--opentelemetry.netlify.app/ecosystem/registry/

Welcome to Pa11y

Running Pa11y on URL https://deploy-preview-5481--opentelemetry.netlify.app/ecosystem/registry/

Results for URL: https://deploy-preview-5481--opentelemetry.netlify.app/ecosystem/registry/

• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 3.32:1. Recommendation: change text colour to #3f8100.
├── WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
├── #default-body > li:nth-child(347) > div > div:nth-child(3) > div:nth-child(1) > div:nth-child(5) > pre > code > span:nth-child(3) > span > span:nth-child(2)
└── :opentelemetry_ecto

• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 3.32:1. Recommendation: change text colour to #3f8100.
├── WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
├── #default-body > li:nth-child(347) > div > div:nth-child(3) > div:nth-child(1) > div:nth-child(5) > pre > code > span:nth-child(3) > span > span:nth-child(4)
└── "~> 1.2.0"

• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 3.32:1. Recommendation: change text colour to #3f8100.
├── WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
├── #default-body > li:nth-child(351) > div > div:nth-child(3) > div:nth-child(1) > div:nth-child(5) > pre > code > span:nth-child(3) > span > span:nth-child(2)
└── :opentelemetry_bandit

• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 3.32:1. Recommendation: change text colour to #3f8100.
├── WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
├── #default-body > li:nth-child(351) > div > div:nth-child(3) > div:nth-child(1) > div:nth-child(5) > pre > code > span:nth-child(3) > span > span:nth-child(4)
└── "~> 0.1.4"

• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 3.32:1. Recommendation: change text colour to #3f8100.
├── WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
├── #default-body > li:nth-child(354) > div > div:nth-child(3) > div:nth-child(1) > div:nth-child(5) > pre > code > span:nth-child(3) > span > span:nth-child(2)
└── :opentelemetry_ecto

• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 3.32:1. Recommendation: change text colour to #3f8100.
├── WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
├── #default-body > li:nth-child(354) > div > div:nth-child(3) > div:nth-child(1) > div:nth-child(5) > pre > code > span:nth-child(3) > span > span:nth-child(4)
└── "~> 1.2.0"

6 Errors

[FatumaA]

And same for the other tool

[svrnm]

I consider this as done! After the outreachy application phase we will take another look and see if we can merge this PR. Thank you!

---

if you want to clean the CI check issues run npm run fix:all locally and update the changes.

[svrnm]

@FatumaA are you still interested in helping with the accessibility review & improvements for the website? If so, let's do it as follows:

• raise a new issue for accessibility review and include the report results, feel free to also scan some other pages, since we should address this across the whole website and not only the registry
• we will cherry pick the changes we want to apply from the reported issues, we also need to make sure that we have only 1 change per PR. This PR here is unfortunately touching to many topics at the same time making it very hard to review.

I will close this PR now, and look forward if you want to contribute as outlined above.

Thank you for taking the time to work on this!

[FatumaA]

Hi,
Yes, I'd love to keep working on it and complete it 🙂
But I will be unavailable this week, is it ok to pick it up from Monday 2nd?