AlaskaAirlines / WC-Generator

Auro's automated web component generator
https://auro.alaskaair.com/getting-started/developers/generator/install
Apache License 2.0
5 stars 9 forks source link

Prism code coloring theme is not accessible #447

Open blackfalcon opened 9 months ago

blackfalcon commented 9 months ago

Please verify the version of wc-generator you have installed

@latest

Please describe the bug

When running any accessibility checker with a component multiple errors appear due to the color issues with the prism theme.

Reproducing the error

This issue is reproducible on the Auro docsite

Expected behavior

A demo page should not contain accessibility issues due to tooling.

What browsers are you seeing the problem on?

Firefox, Chrome, Safari, Microsoft Edge

Additional context

This is a known issue with the Prism theme solution https://github.com/PrismJS/prism/issues/3180 From the notes in the issue, Prism is not releasing an update anytime soon and recommends that individuals address this locally if possible.

In another issue @RunDevelopment outlined a solution we can apply.

Line 75: Background #FFFFFF: The color slategray has a contrast of 4.05 < 4.5. Use #697988 (4.50) instead.
Line 103: Background #FFFFFF: The color #690 has a contrast of 3.43 < 4.5. Use #508400 (4.50) instead.
Line 123: Background #FFFFFF: The color #DD4A68 has a contrast of 4.00 < 4.5. Use #D34060 (4.50) instead.
Line 129: Background #FFFFFF: The color #e90 has a contrast of 2.28 < 4.5. Use #AE6500 (4.50) instead.

Instead of referencing the Prism CSS via the CDN, we could add this to the WC-Generator repo with customized changes.

Exit criteria

This issue can be closed once the Prism CSS no longer exhibits a11y issues.