Accessibility issue: insufficient focus highlight on close buttons

[scoutb-cogapp]

UV version: [email protected]

I'm submitting a: bug report => please fork one of these codesandbox examples with a repro of your issue and include a link to it below

Page area

close buttons for modals

Issue description

The close buttons for the different modals (download, share, and info) lack sufficient focus highlight. They change from one shade of grey to another. The change must be visible to the user but it is hardly perceivable.

Steps to reproduce

1. open this manifest
2. use keyboard navigation to open the settings (or any other) modal
3. tab to the close button
4. observe the slight colour change

Expected behaviour

A clearly visible focus highlight that contrasts at least 3:1 with the initial state of the button as well as the background.

Possible fix

Add the same focus frame that is applied to other elements or change the button colour to something radically different. 2.4.7 is very vague in what it considers a visible focus indicator but generally visibility is defined as a contrast of at least 3:1 in other criteria.

WCAG criterion

2.4.7 Focus Visible (Level AA)

Related code

<button type="button" class="btn btn-default close" tabindex="0">Close</button>

Other information

My general advice is to review the focus highlight that is used across the viewer. It is not a bad idea to use Criterion 2.4.13 Focus Appearance as a guidance. Although it is a bit complicated and an AAA requirement, it does provide excellent guidance what to aim for: a sufficiently large focus highlight that contasts with the highlighted element, its background, and the initial state of the element.

[Geoffsc]

I am happy to take this one as my second issue

[demiankatz]

Thanks, @Geoffsc, I'm moving it into the in-progress column so no one else will claim it.