Closed JuliaKirschenheuter closed 10 months ago
Idea: add some blur background to ensure contrast, similar to the dashboard widgets
@artonge could you please help us with this ticket?
This was the original design. It got broken due to some change in @nc/vue
internal. I should have set up visual tests :see_no_evil:.
Shall we go with that?
Before | After |
---|---|
Unchecked & Picture hovered | |
Unchecked & Checkbox hovered | |
Checked & Checkbox hovered | |
Checked |
Thank you @artonge!
"Unchecked & Picture hovered" and "Checked" still remaining not accessible ;(
I would suggest not to have special hover styles, because they are not relevant for a11y and leave everything only on checked and unchecked state, like:
Before | After |
---|---|
Unchecked and Checkbox unhovered and hovered | |
Checked and Checkbox unhovered and hovered |
Focus state have to have a double outline (black and white) like on most buttons:
In light theme background have to be not dark but light like:
@nimishavijay would you approve such solution?
I would suggest not to have special hover styles, because they are not relevant for a11y and leave everything only on checked and unchecked state, like:
That's what I ended up doing :), but I thought I updated the description :thinking:
Sounds good to me as well. So when you hover over the picture, the checkbox with the background appears, and when you hover over the checkbox, it shows the normal hover feedback for a checkbox component. Would that work? :)
Blocked by
as the contrast ratio with the background is below 3:1. It is recommended to place these elements outside of images. The issue also affects unselected checkboxes (see screenshot)
https://report.bitvtest.de/default-en/cbedb5ef-4815-4cba-a83d-995599c178c3.html#checkpoint-3dbfb7615a-v4-n3