Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Insufficient color contrast in ConnectionsRedirectNotice #65153

Closed
mikkancso opened this issue Mar 22, 2023 · 3 comments
Closed

Insufficient color contrast in ConnectionsRedirectNotice #65153

mikkancso opened this issue Mar 22, 2023 · 3 comments
Labels
area/plugins-catalog internal for issues made by grafanistas type/accessibility Accessibility problem / enhancement

Comments

@mikkancso
Copy link
Contributor

mikkancso commented Mar 22, 2023

In this PR I turned on the dataConnectionsConsole feature toggle by default, and as a result ConnectionsRedirectNotice is now visible on two pages: Admin/Datasources and Admin/Plugins.

That PR's Pa11y check was failing because there are elements with insufficient color contrast in this component.
As I couldn't really figure out how to fix this, I reached out to multiple parties (1, 2). Eventually, we couldn't figure out how to fix this, so I increased the error threshold for Pa11y on these two pages, and merged my PR.

@grafana/user-essentials if you have time, please take a look on this and fix it.

Steps to reproduce:

  • Decrease the Pa11y error threshold by 2 for the mentioned pages
  • Run Pa11y

Actual Result:

  • Pa11y failing

Expected Result

  • Pa11y passing

Relevant WCAG Criteria: [#.#.# WCAG Criterion](link to https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0)
Elements must have sufficient color contrast (https://dequeuniversity.com/rules/axe/4.4/color-contrast?application=axeAPI)

@grafanabot
Copy link
Contributor

@mikkancso please add one or more appropriate labels. Here are some tips:

  • if you are making an issue, TODO, or reminder for yourself or your team, please add one label that best describes the product or feature area. Please also add the issue to your project board. 🚀

  • if you are making an issue for any other reason (docs typo, you found a bug, etc), please add at least one label that best describes the product or feature that you are discussing (e.g. area/alerting, datasource/loki, type/docs, type/bug, etc). Our issue triage doc also provides additional guidance on labeling. 🚀

Thank you! ❤️

@grafanabot grafanabot added the internal for issues made by grafanistas label Mar 22, 2023
@mikkancso mikkancso added type/accessibility Accessibility problem / enhancement area/plugins-catalog labels Mar 22, 2023
@eledobleefe
Copy link
Contributor

I investigated a bit and I think this issue with the color contrast can be related to these external bugs: pa11y/pa11y#633 & pa11y/pa11y#623

As we can see in the following screenshots, using the WCAG Constras checker does not though any error in the same area.

Captura de pantalla 2023-05-03 a las 17 40 19

Captura de pantalla 2023-05-03 a las 17 39 30

Taking into account all this info gathered, I close this issue.

@mikkancso
Copy link
Contributor Author

Nice investigation, thanks! 👏

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area/plugins-catalog internal for issues made by grafanistas type/accessibility Accessibility problem / enhancement
Projects
Archived in project
Development

No branches or pull requests

3 participants