Focus state has low contrast

[karlgroves]

Focus state has low contrast

• Severity: Medium
• Affected Populations:
  • Low-Vision
  • Motor Impaired
  • Cognitively Impaired
• Platform(s):
  • All / Universal
• Components affected:
  • Block Panel

Issue description

Some of the controls in the Block panel have very low contrast in their
focussed state.

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. The visual presentation of user interface
component states must have a contrast ratio of at least 3:1 against
adjacent color(s).

Issue Code

    .components-button.is-default:focus:enabled {
        background: #fafafa;
        color: #23282d;
        border-color: #999;
        box-shadow: inset 0 -1px 0 #999, 0 0 0 2px #bfe7f3;
        ...
    }

Remediation Guidance

Darken the box-shadow color on focus.

Recommended Code

    .components-button.is-default:focus:enabled {
        background: #fafafa;
        color: #23282d;
        border-color: #999;
        box-shadow: 0 0 0 1px #00a0d2;
        ...
    }

Relevant standards

• 1.4.11 Non-text Contrast (Level
  AA)
• 2.4.7 Focus Visible (Level
  AA)

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-31 in Tenon's report

[melchoyce]

Same issue as #15278. Closing in favor of #15432.