UV version: universalviewer@4.0.25
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
- open this manifest
- use keyboard navigation to open the settings (or any other) modal
- tab to the close button
- 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.
UV version: universalviewer@4.0.25
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
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
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.