🎩 What? Why?

The comments elements have custom outlines and backgrounds on focus which are causing accessibility violations when customizing the default primary/secondary colors.

I think it would be better to keep these consistent with the other button/link elements, so their color contrasts can be controller better in the instance itself. This outline color can be also controlled from the admin panel.

WCAG 2.1 AA / SC 1.4.3

📌 Related Issues

• Related to Seek alternatives to design changes due to accessibility #5942, Accessibility/final #6246, Improve accessibility vol 2 #6124, Improve accessibility issues #5684

Testing

Go to see the comments component with at least one comment and not signed in (see screenshots)

📋 Checklist

• ❓ CONSIDER adding a unit test if your PR resolves an issue.
• ✔️ DO check open PR's to avoid duplicates.
• ✔️ DO keep pull requests small so they can be easily reviewed.
• ✔️ DO build locally before pushing.
• ✔️ DO make sure tests pass.
• ✔️ DO make sure any new changes are documented in docs/.
• ✔️ DO add and modify seeds if necessary.
• ✔️ DO add CHANGELOG upgrade notes if required.
• ✔️ DO add to GraphQL API if there are new public fields.
• ✔️ DO add link to MetaDecidim if it's a new feature.
• ❌AVOID breaking the continuous integration build.
• ❌AVOID making significant changes to the overall architecture.

📷 Screenshots

Before:

After: