Accessibility issue: image controls disappear when activated by keyboard

[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

image controls

Issue description

The image controls only become visible when a user hovers over the image viewer or when focus is otherwise inside the image viewer. This works well for keyboard users on first navigating the image viewer: buttons remain visible while navigating and they receive a focus frame when accessed by keyboard. Problems arise when the user activates any of the following buttons: zoom in, zoom out, forward, backward. Now, behaviour changes: The interface no longer realises that focus is on the image viewer and all the buttons become invisible. They reappear only under the following circumstances: when the user tabs and by doind so accesses any of the following buttons: zoom in, zoom out, rotate. When any of those is accessed by tabbing, all the buttons reappear. But as soon as the user tabs to the forward or backward button, they disappear again.

Note that the issue is only about visibility of the buttons, not functionality. The buttons continue to function and can be activated (as long as you count correctly to keep track where focus resides).

Steps to reproduce

1. open this manifest
2. ensure mouse is not hovering over image viewer
3. tab to the zoom in button
4. activate it
5. observe all the buttons disappear
6. continue tabbing and observe that image controls only remain visible while focus is on zoom or rotate buttons

Expected behaviour

As long as focus is on any of the image controls (zoom in, zoom out, rotate, forward, backward), all the controls remain visible.

WCAG criterion

2.4.7 Focus Visible (Level AA)

Related code

<div class="paging btn prev" tabindex="0" title="Previous" style="position: relative; padding-left: 0px; padding-top: 0px; display: inline-block; top: 327px;"></div>