WordPress.org

Make WordPress Core

Opened 7 months ago

Last modified 4 days ago

#47117 assigned defect (bug)

Media modals: Focus is invisible in Windows high contrast views

Reported by: afercia Owned by: antpb
Milestone: 5.4 Priority: normal
Severity: normal Version:
Component: Media Keywords: wpcampus-report needs-patch
Focuses: ui, accessibility Cc:
PR Number:

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

Attachments (4)

47117-01.png (493.8 KB) - added by afercia 3 months ago.
47117-02.png (424.8 KB) - added by afercia 3 months ago.
hcm.png (422.4 KB) - added by afercia 3 months ago.
High Contrast Mode edge cases on WordPress trunk 5.3
47117-03.patch (484 bytes) - added by antpb 2 months ago.
This patch targets the setting description under the alt text box in support of High Contrast Mode. I'd love some testing on Windows as I have only been able to test this on MacOS

Download all attachments as: .zip

Change History (39)

#1 @afercia
7 months 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
7 months ago

  • Milestone changed from Future Release to 5.3

#3 @karmatosed
4 months ago

  • Keywords needs-design-feedback added

This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.


4 months ago

#5 @joedolson
4 months ago

  • Owner set to joedolson
  • Status changed from new to assigned

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


3 months ago

This ticket was mentioned in Slack in #design by estelaris. View the logs.


3 months ago

#8 @kjellr
3 months ago

  • Keywords needs-design-feedback removed

This issue came up in today's #design triage on Slack:
https://wordpress.slack.com/archives/C02S78ZAL/p1568047191434600

I'm going to remove needs design feedback for now, since this should just borrow focus states from elsewhere in WP-Admin.

Once a patch is in place, we should be sure to add screenshots to the issue. At that point, it may benefit from another review. 👍

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


3 months ago

#10 @afercia
3 months ago

See below screenshots from the original WPCampus extended report. They relate to the media modal and to the Image Editor screen.

@afercia
3 months ago

@afercia
3 months ago

#11 @afercia
3 months ago

I've just tested High Contrast Mode on Windows 10 – Internet Explorer 11. As expected, things have improved after WordPress 5.0, see [44544] and the related ticket #41286.

Seems to me most of the focusable elements in the media modal dialog and Image Editor have now a good focus indication. More testing would be appreciated, of course.

I'm attaching below a collage of screenshots to illustrate some edge cases (outlined in red) that need to be addressed. [Edit: the first image in the collage illustrates a case where focus indication is good]

Of the remediation guidelines:

  1. Add a transparent (or visible) outline to elements which are using box-shadow to show focus.
  2. For elements which are selected and focussed, selected elements should also have a border.
  3. 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.

1 can be considered almost done: see the edge cases to address and see #45910.
2 and especially 3 need to be addressed across the whole admin. I'd recommend to start by removing the negative outline-offset from all the ruleset where the transparent outline for High Contrast Mode is used.

Last edited 3 months ago by afercia (previous) (diff)

@afercia
3 months ago

High Contrast Mode edge cases on WordPress trunk 5.3

#12 @joedolson
3 months ago

I think that items 2 and 3 in that list are probably best resolved in a separate ticket - while important, their global scope makes them outside the scope of this ticket. I think they should be a comment under #45910, which has a more global scope.

#13 @joedolson
3 months ago

I think that the most reasonable resolution to the media icons is to remove the background image and replace with dashicons. Dashicons render in high contrast mode, so they would allow that context to be visible.

I've done a quick test of concept, and it works just by adding dashicons classes to the relevant items, and adding a :hover/:focus state that changes the icon out when focused. There would be some clean-up required to remove obsolete CSS, and it's possible that the background sprite would no longer be in use afterwards. I'm not seeing another use of it in media-views.css, but I haven't explored more broadly yet.

I can do a partial patch for this, but the swap to dashicons would require some CSS changes to clean up the design that I'm not confident of.

#14 @joedolson
3 months ago

What is being highlighted as a problem in the screenshot that shows the alt text link? I'm not seeing an obvious problem with focus on that in high contrast mode.

This ticket was mentioned in Slack in #core-media by mike. View the logs.


3 months ago

#16 @afercia
2 months ago

The alt text link should have an outline. I see only one line at the top of the text.

However, many CSS changes have been introduced yesterday with the commits for Beta 1. I think high contrast mode should be tested again across all the admin as a few focus style may not work as intended now.

#17 @joedolson
2 months ago

Hmmm. In my tests it was outlined; but I agree, we'll have to re-test all of this given the number of CSS changes introduced yesterday.

This ticket was mentioned in Slack in #core-media by antpb. View the logs.


2 months ago

#19 @antpb
2 months ago

  • Keywords needs-patch added
  • Owner changed from joedolson to antpb

I'm assigning ownership to myself as the last remaining task is ensuring outline: 1px solid transparent; is added properly to the elements that miss focus style in High Contrast Mode.

@joedolson mentioned in the #core-media room "The focus outline isn't the only problem in #47117; the icon is missing in high contrast mode, as well. That could be resolved by swapping over to dashicons instead of sprites."

I think best course of action on this ticket is to move the work of converting the sprite to dashicon to a new issue and fixing the instances mentioned above about the outline css property. I’d hate for this ticket to get hung up on the possible outcomes of changing the sprite to an icon. :)

@antpb
2 months ago

This patch targets the setting description under the alt text box in support of High Contrast Mode. I'd love some testing on Windows as I have only been able to test this on MacOS

#20 @antpb
2 months ago

@afercia in the first screenshot provided in your previous comments (hcm.png) What is the missing outline for the top left corner? I need to update the above patch to include that.

#21 @afercia
2 months ago

@antpb thanks! Sorry for the confusion, the first image at the top left is actually an example of good contrast! See:

[Edit: the first image in the collage illustrates a case where focus indication is good]

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


2 months ago

This ticket was mentioned in Slack in #accessibility by audrasjb. View the logs.


2 months ago

This ticket was mentioned in Slack in #core-media by mike. View the logs.


2 months ago

This ticket was mentioned in Slack in #accessibility by audrasjb. View the logs.


2 months ago

This ticket was mentioned in Slack in #core by peterwilsoncc. View the logs.


2 months ago

This ticket was mentioned in Slack in #core-media by mike. View the logs.


2 months ago

#28 @mikeschroder
2 months ago

I tested this on Windows, but was having a hard time seeing any difference with/without the patch on IE11.

The link outline (assuming I was looking in the right place) was visible with and without the change in Edge.

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


2 months ago

#30 @mikeschroder
8 weeks ago

  • Milestone changed from 5.3 to Future Release

Thanks so much everyone for your work on this!

Since there hasn't been any movement on this recently, it seems this would need more testing to find out what is left to be fixed, and 5.3 RC is happening shortly, going to move this to Future Release.

Feel free to move to 5.4, or back into 5.3 if something is ready to commit before RC.

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


7 weeks ago

#32 @afercia
7 weeks ago

  • Milestone changed from Future Release to 5.3.1

Discussed during today's accessibility bug-scrub: agreed this ticket would fit with a next minor release as it just needs testing and adding 1px solid transparent on focus where needed. Milestoning accordingly.

This ticket was mentioned in Slack in #accessibility by audrasjb. View the logs.


2 weeks ago

This ticket was mentioned in Slack in #core by audrasjb. View the logs.


4 days ago

#35 @audrasjb
4 days ago

  • Milestone changed from 5.3.1 to 5.4

Moving the ticket to 5.4 since it still need some work and as it's not a regression from WP 5.3.
Feel free to move it back to 5.3.1 if the ticket can be fixed in the next few days!

Note: See TracTickets for help on using tickets.