search

ryersondmp / sa11y

Sa11y is an accessibility quality assurance tool that visually highlights common accessibility and usability issues. Geared towards content authors, Sa11y straightforwardly identifies errors or warnings at the source with a simple tooltip on how to fix them.
https://sa11y.netlify.app
Other
278 stars 43 forks source link

Contrast check relativeLuminance issue #85

Closed nmerget closed 4 months ago

nmerget commented 4 months ago

Description

I'm testing sa11y on our design-system and there is some issue with the contrast checker and got this error:

TypeError: Cannot read properties of undefined (reading '0') at Object.relativeLuminance (https://cdn.jsdelivr.net/combine/gh/ryersondmp/sa11y@3.1.5/dist/js/lang/en.umd.min.js,gh/ryersondmp/sa11y@3.1.5/dist/js/sa11y.umd.min.js:40:136197) at Object.contrastRatio (https://cdn.jsdelivr.net/combine/gh/ryersondmp/sa11y@3.1.5/dist/js/lang/en.umd.min.js,gh/ryersondmp/sa11y@3.1.5/dist/js/sa11y.umd.min.js:40:136365) at Object.check (https://cdn.jsdelivr.net/combine/gh/ryersondmp/sa11y@3.1.5/dist/js/lang/en.umd.min.js,gh/ryersondmp/sa11y@3.1.5/dist/js/sa11y.umd.min.js:40:137710) at https://cdn.jsdelivr.net/combine/gh/ryersondmp/sa11y@3.1.5/dist/js/lang/en.umd.min.js,gh/ryersondmp/sa11y@3.1.5/dist/js/sa11y.umd.min.js:40:137874 at checkAll (https://cdn.jsdelivr.net/combine/gh/ryersondmp/sa11y@3.1.5/dist/js/lang/en.umd.min.js,gh/ryersondmp/sa11y@3.1.5/dist/js/sa11y.umd.min.js:40:138457) at i.Global.contrastPlugin.i.Panel.contrastToggle.onclick (https://cdn.jsdelivr.net/combine/gh/ryersondmp/sa11y@3.1.5/dist/js/lang/en.umd.min.js,gh/ryersondmp/sa11y@3.1.5/dist/js/sa11y.umd.min.js:40:122617)

URL: https://db-ui.github.io/mono/review/main/

How to reproduce

  1. Goto: https://db-ui.github.io/mono/review/main/
  2. Use the bookmarklet
  3. Enable contrast check
  4. See the Error

Comment

Maybe the issue comes from color-mix. We us it like this: 

color-mix(in srgb,transparent 76%,var(--db-neutral-6))

Maybe there is a simple solution for this to convert it to an RGB/A color before? Otherwise, it would be perfect to have a try{}catch which may prints the element that is causing the issue and continues doing the contrast check.

adamchaboryk commented 4 months ago

Thanks for reporting this bug, @nmerget! I'll take a look, but I think you're right about the color-mix.

Looks like the bookmarklet doesn't work at all on the Deutsche Bahn website either — I'll look into this too. 😅

adamchaboryk commented 4 months ago

I think I have both issues fixed now. Sorry for the delay — it's conference season here!

Please let me know if you come across anymore issues. Thanks again for reporting this, @nmerget!