Accessibility issue: insufficient focus highlight on gallery controls

[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

gallery controls

Issue description

Inside the gallery view (where all thumbnails are visible), the plus and minus buttons have insufficient focus highlight. They change colour from one shade of grey to another which is barely perceivable even without a visual impairment. The slider also receives focus and user can interact with it and it has no focus highlight at all.

Steps to reproduce

1. open this manifest
2. tab to the gallery button in the top right corner and activate
3. tab to the buttons that control the gallery view (plus, minus, and slider)
4. observe how their appearance changes (or not) when focus is on each element

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 (example)

<div title="Zoom In" tabindex="0" class="zoomIn viewportNavButton" style="background: none transparent; border: none; margin: 0px; padding: 0px; position: relative; touch-action: none; display: inline-block;"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Zoom in" style="background: none transparent; border: none; margin: 0px; padding: 0px; position: static;"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Zoom in" style="background: none transparent; border: none; margin: 0px; padding: 0px; position: absolute; top: 0px; left: 0px; opacity: 0;"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Zoom in" style="background: none transparent; border: none; margin: 0px; padding: 0px; position: absolute; top: 0px; left: 0px; visibility: hidden;"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Zoom in" style="background: none transparent; border: none; margin: 0px; padding: 0px; position: absolute; top: 0px; left: 0px; visibility: hidden;"></div>

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.