Buttons - Add WCAG compliant Visual Focus Indicators for Keyboard Focus Events

[adithyamaheshb]

Expectations

• Buttons > Anchor
  • Component has WCAG 2.0 compliant visible keyboard focus indicator with a minimum contrast ration of 3:1 with the background
• Buttons > Split Button
  • Component has WCAG 2.0 compliant visible keyboard focus indicator with a minimum contrast ration of 3:1 with the background

Reality

• Buttons > Anchor
  • With our current focus indicators, it is hard to determine which element you are currently on for the keyboard users, instead of just changing the color and adding text-decoration: underline, we need to add a focus outline with a minimum contrast ratio of 3: 1 against the background
• Buttons > Split Button
  • With dark backgrounds, the box shadow we have now is not WCAG compliant

Steps to Reproduce

1. Visit https://garden.zendesk.com/components/anchor
2. Navigate through all the links with keyboard
3. It is difficult to keep track of the current element you are on
4. Visit https://garden.zendesk.com/components/split-button#type
5. Navigate through the Split Button with keyboard
6. It is difficult to keep track of the current element you are on

Fine Print

• Component: Anchor, Split Button
• Version: 8.53.1
• Browsers: all

[Francois-Esquire]

Hey @adithyamaheshb apologies for the late reply and thank you for the feedback! We've recently updated our focus state to a 5.0 contrast ratio to satisfy WCAG 2.1 and future versions (when it comes to color contrast). Please feel free to reopen, or open a new issue if you found a miss in Gardens react-components.