Media modals: Focus is invisible in Windows high contrast views

[afercia]

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

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

[afercia]

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

See also: #45910

[kjellr]

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. 👍

[afercia]

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

[afercia]

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.

[afercia]

High Contrast Mode edge cases on WordPress trunk 5.3

[joedolson]

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.

[joedolson]

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.

[joedolson]

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.

[afercia]

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.

[joedolson]

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.

[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]

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

[antpb]

@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.

[afercia]

@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]

[kirasong]

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.

[kirasong]

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.

[afercia]

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.

[audrasjb]

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!

[joedolson]

This patch should cover most remaining instances of missing focus in Windows High Contrast mode - hits several instances in the Customizer, Widgets UI, and meta boxes.

Definitely not guaranteeing that I haven't missed something, though - could use a second pair of eyes on this.

[audrasjb]

Hi,

With 5.4 Beta 3 approaching and the Beta period reserved for bugs introduced during the cycle, this is being moved to WP 5.5. If any maintainer or committer feels this should be included or wishes to assume ownership during a specific cycle, feel free to update the milestone accordingly.

[davidbaumwald]

@joedolson Is this still on your radar to handle early in the 5.5 cycle?

[joedolson]

It is, yes.

[Hareesh Pillai]

Refreshed patch. I've added the transparent outline in this patch.

[joedolson]

Adds one missing case, improves visibility of some outlines

[joedolson]

Patch looked good, but in testing I found one missing case & a couple of cases where the styles didn't have good visibility, because outline surfaces were overlapping existing borders. Added negative outline offsets to support that.

All changes are tested in Windows High Contrast mode.

Will run other tests & commit this weekend.

[afercia]

47117.diff​ adds a few missing inline comments /* Only visible in Windows High Contrast mode */.

[afercia]

In 48293:

Accessibility: Improve the focus style for Windows High Contrast mode in various parts of the admin interface.

Continues the introduction in core of new focus styles dedicated to Windows High Contrast mode. The new styles use a transparent CSS outline.
This change covers some parts of the interface for the meta boxes, Widgets, and the Customizer.

Props joedolson, kjellr, antpb, mikeschroder, Hareesh Pillai.
See #41286, #45910.
Fixes #47117.