Use a warning icon when there are accessiblity warnings

[StevenClontz]

Currently when there are accessibility warnings, we show the accessibility icon and make the button colored purple. Which I actually thought meant it was accessibile.

This change makes a warning icon appear instead to more clearly communicate there are issues to address.

[StevenClontz]

Current:

Proposed:

[siefkenj]

I agree, purple is a bad color for warnings. Can we change it to Orange?

[StevenClontz]

I agree, purple is a bad color for warnings. Can we change it to Orange?

I had the exact same idea myself, so it must be reasonable. I'll add that.

[StevenClontz]

New color:

[StevenClontz]

Can't leave enough alone: changed text to "Accessibility Concerns" which may be more clear than "WCAG".

[siefkenj]

@dqnykamp Any comments before a merge?

[dqnykamp]

We do have two levels of emitted accessibility diagnostics: level 1 (WCAG violations) and level 2 (other accessibility issues). The button in the upper right, currently labeled "Accessibility Concerns," is activated only when level 1 accessibility diagnostics are present. I'm not sure if "Accessibility Concerns" is the best label, as I'd also consider level 2 diagnostics as accessibility concerns; they just don't rise to the level of a WCAG AA violation. (I don't want people to think that there are no accessibility concerns at all if that button is green.) I'm not sure what terms to distinguish level 1 from level 2 other than a WCAG violation. Is there some term we can put on that button that is stronger than "Accessibility Concerns" but it easier to understand than the original "WCAG"? Nothing is coming to mind.

In my mind, I think of level 1's as errors, which is why they were originally red (before being prompted to change that), and level 2's as warnings. If we make level 1's orange, then do we just make level 2 a lighter orange?

Whatever colors we use, they need to be consistent uniformly, not just for that button. We have the lsp diagnostics, which show up as the underline and in the hover messages, as well as the colors used in the accessibility panel (the panel icon, the listing headings, and the icons used for bullet points). I can't remember in how many places those colors are defined. I hope there is just a small number of sources of that color data.

[dqnykamp]

See previous comment. (I forgot to add it as a review.)

[siefkenj]

We could use "Accessibility Errors" for the level 1 and "Accessibility Concerns" for the level 2. They could both be orange, or the more serious could be orange and the less so yellow.

[StevenClontz]

I'd show the level-2 error but I'm not sure how to replicate it.