Focus indicator border fails

melissaegg / trauma-informed-design-resources

MIT License

2 stars 1 forks source link

Focus indicator border fails #2

Closed ashleypeacock closed 2 months ago

ashleypeacock commented 4 months ago

Issue

State: Partial fail. The blue, on the focus indicator, around the headings of the cards fails minimum colour contrast for non-text components.. Given the border is slightly outside of the button, it's not a full fail under WCAG 2.1.

Recommendations

Thicken the border around the headings to a minimum 2 px to move from 'partial fix' to full fix.
Review WCAG 2.2 AAA Focus appearance

melissaegg commented 3 months ago

I think I fixed this. I added this code:
*:focus { outline: 3px solid; }