Adds gradients and related features, also fixes contrast form parent issue#1069
Adds gradients and related features, also fixes contrast form parent issue#1069dmols merged 19 commits intoucfopen:devfrom
Conversation
- Adds initial gradient support - Begins work on getting / modifying backgrounds from parent elements
ewainberg
changed the title
- Red dotted focus line will now draw around the text relevant to the issue as well as the background - Fixes outdated logic for getTextColor, now supports new framework with textColorXpath NOTE: triggerLiveUpdate() will break the dotted focus box for reasons unknown, will be fixed later somewhere else
dmols
left a comment
dmols
left a comment
There was a problem hiding this comment.
The form works great! I just have a few requests that I believe would make the form a little better:
- I would make it so that by default it only shows 3-4 colors in the instructions but allow the user to show the full list if there's more than that. This way, if the user is just trying to navigate past the issue, the 'next' button will be visible and not pushed down out of frame.
- Navigation is nearly done, I believe. However, tabbing through the colors should probably associate the 'X' or check mark to the color, when focusing on the color div, so an unsighted user can know the color isn't valid yet.
dmols
left a comment
dmols
left a comment
There was a problem hiding this comment.
I like the change to reduce the amount of colors on screen! I do think the screenreader additions are good but they're missing some changes to fully make this accessible:
- When the user lightens or darkens the color, it should probably tell the user what the ratio is afterwards, since that's something we sighted users can notice without losing focus of the light/darken buttons.
- As of now, the background color button is the only one that tells you if you've reached valid contrast. We should probably also mention that in the text color button as well.
I'm not sure of the best way to do this without it being too much noise for the user, or if these are things we'd particularly want to mention to the user in this manner. Thoughts, @mbusch3?
|
@ewainberg I met with Morgan, and we both agreed the alert for both the foreground and background color should be something like "Insufficient contrast of [current contrast number]. Desired contrast is [correct contrast number]" or something shorter, if you're able to condense it further without losing information. All the information you need for the correct contrast number, your code logic already handles, so you shouldn't have too much trouble giving that value to your alert. Let me know if you have any questions! Thank you in advance for adding this change! |
| <div className="flex-row justify-content-center"> | ||
| <div className={`ratio-status ${ratioIsValid ? 'valid' : 'invalid'}`}> | ||
| {ratioIsValid ? t('form.contrast.feedback.valid') : t('form.contrast.feedback.invalid')} | ||
| <div className={`ratio-status text-center ${ratioIsValid ? 'valid' : 'invalid'}`}> |
There was a problem hiding this comment.
Forgot to mention it in the commit but this block shows the minimum ratio needed in the pass / fail box
dmols
left a comment
dmols
left a comment
There was a problem hiding this comment.
Is there a way we can alert the user when valid contrast has been reached? If that's already in place, I might be missing it. Currently, when I reach proper contrast, it only shows that we have good contrast when I focus on each individual color.
Also I saw this error occur a couple times but I wasn't able to track what specifically was making the hsl object invalid:
|
I need to review and tweak some of the functionality to match the new UI anyway... I hereby take responsibility for any existing bugs in this form and will fix them in an upcoming PR for updating the last of the forms. |
dmols
left a comment
dmols
left a comment
There was a problem hiding this comment.
Talked with Morgan about this and it made sense that we merge this in and fix the issues when we do another pass on dev. Good to push!
3 participants
No description provided.