WordPress.org

Make WordPress Core

Opened 6 weeks ago

Last modified 5 weeks ago

#47117 new defect (bug)

Media modals: Focus is invisible in Windows high contrast views

Reported by: afercia Owned by:
Milestone: 5.3 Priority: normal
Severity: normal Version:
Component: Media Keywords: wpcampus-report
Focuses: ui, accessibility Cc:

Description

Moved from the WPCampus accessibility report issues on GitHub, see https://github.com/WordPress/gutenberg/issues/15334

Focus is invisible in high contrast views

  • Severity: High
  • Affected Populations:
    • Low-Vision
    • Motor Impaired
    • Cognitively Impaired
  • Platform(s):
    • Windows - High Contrast
  • Components affected:
    • Edit Media
    • Media Dialog

#### Issue description

Users of Windows High Contrast themes who open the "Featured Image"
modal or the Edit Media page cannot see where the keyboard focus is in
most cases. The exceptions to this are the date filter dropdown,
pre-filled text inputs, and the search typeahead-inputs, but these
exceptions are only because the browser tends to automatically select
and highlight the text inside them, which should not be relied on.

This problem occurs because box-shadow is the sole visible method of
showing which element has focus, however High Contrast themes remove
box-shadows along with background colors to ensure that foregrounds and
backgrounds have sufficiently high contrast.

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.

##### Issue Code

    .wp-core-ui .attachment.details:focus,


    .wp-core-ui .attachment:focus,


    .wp-core-ui .selected.attachment:focus {


        box-shadow: inset 0 0 2px 3px #fff, inset 0 0 0 7px #5b9dd9;


        outline: 0;


    }


    ...


    .wrap .page-title-action:focus {


        border-color: #5b9dd9;


        box-shadow: 0 0 2px rgba(30,140,190,.8);


    }


    ...


    .image-editor .imgedit-settings .imgedit-help-toggle:focus {


        color: #0074a2;


        border-color: #5b9dd9;


        outline: 0;


        box-shadow: 0 0 3px rgba(0,115,170,.8);


    }


    ...


    input[type=checkbox]:focus, input[type=color]:focus, input[type=date]:focus, input[type=datetime-local]:focus, input[type=datetime]:focus, input[type=email]:focus, input[type=month]:focus, input[type=number]:focus, input[type=password]:focus, input[type=radio]:focus, input[type=search]:focus, input[type=tel]:focus, input[type=text]:focus, input[type=time]:focus, input[type=url]:focus, input[type=week]:focus, select:focus, textarea:focus {


        border-color: #5b9dd9;


        box-shadow: 0 0 2px rgba(30,140,190,.8);


    }


    ...


    .wp-core-ui .button-primary.focus, .wp-core-ui .button-primary:focus {


        box-shadow: 0 1px 0 #0073aa, 0 0 2px 1px #33b3db;


    }


    ...


    a, div {


        outline: 0;


    }


    ...


    .wp-person a:focus .gravatar, a:focus, a:focus .media-icon img {


        color: #124964;


        box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30,140,190,.8);


    }


    ...


    .js .postbox .handlediv:focus {


        box-shadow: none;


        outline: 0;


    }


    .js .postbox .handlediv:focus .toggle-indicator:before {


        box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30,140,190,.8);


    }

#### Remediation Guidance

Add a transparent (or visible) outline to elements which are using
box-shadow to show focus.

For elements which are selected and focussed, selected elements should
also have a border.

Ensure the outline is not given a negative outline-offset, as this
would place it directly on top of the border, making it visibly
indistinguishable by users.

##### Recommended Code

    .wp-core-ui .attachment.details:focus,


    .wp-core-ui .attachment:focus,


    .wp-core-ui .selected.attachment:focus {


        box-shadow: inset 0 0 2px 3px #fff, inset 0 0 0 7px #5b9dd9;


        outline: 3px solid transparent;


    }





    .wp-core-ui .attachment.details {


        box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 7px #0073aa;


        border: 1px solid transparent;


    }


    ...


    .wrap .page-title-action:focus {


        border-color: #5b9dd9;


        box-shadow: 0 0 2px rgba(30,140,190,.8);


        outline: 3px solid transparent;


    }


    ...


    .image-editor .imgedit-settings .imgedit-help-toggle:focus {


        color: #0074a2;


        border-color: #5b9dd9;


        outline: 1px solid transparent;


        box-shadow: 0 0 3px rgba(0,115,170,.8);


    }


    ...


    input[type=checkbox]:focus, input[type=color]:focus, input[type=date]:focus, input[type=datetime-local]:focus, input[type=datetime]:focus, input[type=email]:focus, input[type=month]:focus, input[type=number]:focus, input[type=password]:focus, input[type=radio]:focus, input[type=search]:focus, input[type=tel]:focus, input[type=text]:focus, input[type=time]:focus, input[type=url]:focus, input[type=week]:focus, select:focus, textarea:focus {


         border-color: #3d94b7;


        box-shadow: 0 0 2px rgba(30,140,190,.8);


        outline: 1px solid transparent;


    }


    ...


    .wp-core-ui .button-primary.focus, .wp-core-ui .button-primary:focus {


        box-shadow: 0 1px 0 #0073aa, 0 0 2px 1px #33b3db;


        border: 1px solid #000;


        outline: 1px solid transparent;


    }


    ...


    a, div {


        outline: 0;


    }


    ...


    .wp-person a:focus .gravatar, a:focus, a:focus .media-icon img {


        color: #124964;


        box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30,140,190,.8);


        outline: 1px solid transparent;


    }


    ...


    .js .postbox .handlediv:focus {


        box-shadow: none;


        outline: 0;


    }


    .js .postbox .handlediv:focus .toggle-indicator:before {


        box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30,140,190,.8);


        border: 1px solid transparent;


    }

#### 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](https://www.tenon.io) and funded by [WP Campus](https://wpcampus.org/). This issue is GUT-45 in Tenon's report

Change History (2)

#1 @afercia
6 weeks ago

Note: a first part of CSS improvements for Windows High Contrast mode landed in [44544] see the related ticket #41286

See also: #45910

#2 @afercia
5 weeks ago

  • Milestone changed from Future Release to 5.3
Note: See TracTickets for help on using tickets.