Focus visible issues

[Ro-Matos]

Goal

Validate the visible focus criteria. In reference to the WCAG guidelines, 2.4.7 Focus Visible e 2.4.13 Focus Appearance.

Context

We tested components that can be used with touchable functionality, in both Web and Mobile environments, using screen readers and only keyboard (without screen reader). We conducted an initial test package with Buttons, Callout, and Cards.

The tests considered the use of the component as a Button (onPress) and as a Link (a / to).
Some components showed issues with visible focus during the tests.

Check the study: Focus Visible in Mística

Impact

Usability fails for users operating with a keyboard or screen reader, and non-compliance with WCAG criteria.

Discussion Questions

A discussion to consider is whether the focus color should be customized or continue using the browser default.

Additional considerations

No response

Do you have a visual proposal?

No response

[aweell]

Hi @Ro-Matos!

Thanks you for the study this is awesome.

We already have an ongoing work item to review and fix potential focus ring problems in the components. I link this study to that task.

#1999