Focus not visible on block types in High Contrast modes

[karlgroves]

Focus not visible on block types in High Contrast modes

• Severity: Medium
• Affected Populations:
  • Low-Vision
  • Motor Impaired
• Platform(s):
  • Windows - High Contrast
• Components affected:
  • Add Block

Issue description

When users of Windows High Contrast mode navigate between potential
block types, an outline is added to the currently-focussed block.
However this outline is pulled inwards with an outline-offset
property, which sets it directly over the border. This makes it
difficult to tell which element is focussed in browsers which support
that property (currently all except IE).

All interactive elements should have a visible and obvious focus
indicator even for high contrast users, so that sighted keyboard users
have a clear indication of which element has focus.

Issue Code

    .editor-block-types-list__item:not(:disabled).is-active, .editor-block-types-list__item:not(:disabled):active, .editor-block-types-list__item:not(:disabled):focus {


        outline: 0;


        ...


        outline: 2px solid transparent;


        outline-offset: -2px;


    }

Remediation Guidance

Remove the outline-offset rule and allow the outline to sit outside
the border.

Recommended Code

    .editor-block-types-list__item:not(:disabled).is-active, .editor-block-types-list__item:not(:disabled):active, .editor-block-types-list__item:not(:disabled):focus {


        ...


        outline: 2px solid transparent;


    }

Relevant standards

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

[melchoyce]

Screenshot from full report:

[afercia]

Direct comparison:

• on the left: IE11 – focus transparent outline is visible (no support for outline-offset)
• on the right: Edge – focus transparent outline is not visible (does support outline-offset)

As far as I remember, the outline-offset was implemented because at that time it looked better on some buttons. As it doesn't work correctly for all elements, simplest option is to just remove it.

Worth noting there are other elements where the negative offset makes the transparent outline not visible, for example the Block toolbar buttons. See screenshot below, where the "Bold" button is focused (Edge):

[tellthemachines]

Closing this issue as it was fixed by #16554.