Focus not visible on Preview button, and low contrast on various buttons

Severity: High
Affected Populations:
- Low-Vision
- Motor Impaired
- Cognitively Impaired
Platform(s):
- All / Universal
Components affected:
- Editor Top Bar

Issue description

In the Editor Top Bar, the "Preview" button's focus state is not visible. The focus state of the "Publish" button is visible but very low contrast; other buttons (such as the default buttons in the Image Block) use the same style:

bfe7f3 (light blue) against #fff (white): 1.31:1.

Since the "Preview" button's focus styles aren't shown in most browsers, this also means that the transparent outline meant for Windows High Contrast users does not appear.

All interactive elements should have a visible and obvious focus indicator, so that sighted keyboard users have a clear indication of which element has focus. Sufficient color contrast showing states is important for users who have low-vision or are color-blind, because states with a low contrast ratio may be difficult or impossible for such users to see.

Issue Code

    /* Publish */
    .components-button.is-primary:focus:enabled {
        box-shadow: inset 0 -1px 0 #00435d,0 0 0 2px #bfe7f3;
    }

    ...

    /* Preview */
    .components-button:focus:enabled {
        box-shadow: inset 0 0 0 1px #6c7781, inset 0 0 0 2px #fff;
        outline: 2px solid transparent;
        outline-offset: -2px;
    }

Remediation Guidance

The combination of :focus with :enabled seems unsupported for elements which do not have a disabled state in most browsers. Use another method to style focus states until browser support has improved.

Disabled elements shouldn't be able to receive :focus states in any case. Anchors used as buttons may be better off using tabindex="-1" in the HTML so that code does not have to specify :enabled.

Use a darker blue outline for focus indication to supplement the box-shadow.

Recommended Code

    /* Publish */
    .components-button.is-primary:focus {
        outline: 2px solid #00435d;
        box-shadow: inset 0 -1px 0 #00435d,0 0 0 2px #bfe7f3;
    }

    ...

    /* Preview */
    .components-button:focus {
        box-shadow: inset 0 0 0 1px #6c7781, inset 0 0 0 2px #fff;
        outline: 2px solid transparent;
        outline-offset: -2px;
    }

Relevant standards

Note: This issue may be a duplicate with other existing accessibility-related bugs in this project. This issue comes from the Gutenberg accessibility audit, performed by Tenon and funded by WP Campus. This issue is GUT-7 in Tenon's report

WordPress / gutenberg