Color contrast Axe violations on program dashboard

Description

Axe reports 4 color violations on the program dashboard, but they are all because it can't understand the svg / text interactions with the progress circle on the right. (The circle that says X/ Y Earned Certificates.)

There is no actual problem right now, as long as the circle is not blue (the completed color) and the text in the circle does not overlap the circle. This does not happen currently in English or Spanish, but it might happen as we enable more languages.

Steps to Reproduce

None

Current Behavior

None

Expected Behavior

None

Reason for Variance

None

Release Notes

None

User Impact Summary

None

Activity

Show:
Michael Terry
December 21, 2017, 7:23 PM

Initial assessment: nothing is wrong in the common case. Axe is having difficulties automatically detecting contrast because we have an svg "underneath" the text (the progress circle surrounding the text).

If the circle is blue (completed vs gray incomplete) and the text is long enough to overlap, we do have a problem (there isn't an overlap in English, but I haven't tested Spanish and god help us if we ever add German).

Looking into what we should do for such a case...

Michael Terry
December 22, 2017, 4:24 PM

Tested on Spanish, and there's no real overlap either (a few pixels at worst).

I think the real fix might be some CSS to either flip the color of the text that overlaps or make the circle larger if it needs to be to fit the translated text.

But since it doesn't actually affect either English or Spanish and the fix isn't trivial, I'm going to re-title & re-describe this bug, then unassign myself and put it back into the backlog to look at other bugs.

Albert (AJ) St. Aubin
January 3, 2018, 6:03 PM

We need more context on the correct way to handle this issue.

Albert (AJ) St. Aubin
February 22, 2018, 4:39 PM

Please review with UX team () and .

Jeff Witt
January 11, 2019, 6:53 PM

I am closing because I am not getting the described errors with the Lighthouse accessibility audit. Also I don't see the issue at https://courses.edx.org/dashboard/programs/98b7344e-cd44-4a99-9542-09dfdb11d31b/

Not Reproducible

Assignee

Unassigned

Reporter

Anthony Mangano

Reach

None

Impact

None

Platform Area

None

Customer

None

Partner Manager

None

URL

None

Contributor Name

None

Groups with Read-Only Access

None

Actual Points

None

Category of Work

None

Platform Map Area (Levels 1 & 2)

None

Platform Map Area (Levels 3 & 4)

None

Priority

Unset
Configure