Make WordPress Core

Opened 5 years ago

Closed 4 years ago

#47117 closed defect (bug) (fixed)

Media modals: Focus is invisible in Windows high contrast views

Reported by: afercia's profile afercia Owned by: joedolson's profile joedolson
Milestone: 5.5 Priority: normal
Severity: normal Version:
Component: Media Keywords: wpcampus-report has-patch commit
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

Attachments (8)

47117-01.png (493.8 KB) - added by afercia 5 years ago.
47117-02.png (424.8 KB) - added by afercia 5 years ago.
hcm.png (422.4 KB) - added by afercia 5 years ago.
High Contrast Mode edge cases on WordPress trunk 5.3
47117-03.patch (484 bytes) - added by antpb 5 years 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
47117.2.diff (2.4 KB) - added by joedolson 5 years ago.
47117.3.diff (2.6 KB) - added by Hareesh Pillai 4 years ago.
Refreshed patch. I've added the transparent outline in this patch.
47117.4.diff (3.0 KB) - added by joedolson 4 years ago.
Adds one missing case, improves visibility of some outlines
47117.diff (3.8 KB) - added by afercia 4 years ago.

Download all attachments as: .zip

Change History (64)

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

  • Milestone changed from Future Release to 5.3

#3 @karmatosed
5 years ago

  • Keywords needs-design-feedback added

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


5 years ago

#5 @joedolson
5 years ago

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

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


5 years ago

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


5 years ago

#8 @kjellr
5 years 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.


5 years ago

#10 @afercia
5 years ago

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

@afercia
5 years ago

@afercia
5 years ago

#11 @afercia
5 years 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 5 years ago by afercia (previous) (diff)

@afercia
5 years ago

High Contrast Mode edge cases on WordPress trunk 5.3

#12 @joedolson
5 years 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
5 years 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
5 years 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.


5 years ago

#16 @afercia
5 years 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
5 years 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.


5 years ago

#19 @antpb
5 years 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
5 years 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
5 years 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
5 years 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.


5 years ago

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


5 years ago

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


5 years ago

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


5 years ago

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


5 years ago

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


5 years ago

#28 @kirasong
5 years 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.


5 years ago

#30 @kirasong
5 years 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.


5 years ago

#32 @afercia
5 years 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.


5 years ago

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


5 years ago

#35 @audrasjb
5 years 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!

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


5 years ago

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


5 years ago

#38 @joedolson
5 years ago

  • Owner changed from antpb to joedolson
  • Status changed from assigned to accepted

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


5 years ago

@joedolson
5 years ago

#40 @joedolson
5 years ago

  • Keywords has-patch added; needs-patch removed

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.

#41 @audrasjb
5 years ago

  • Milestone changed from 5.4 to 5.5

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.

#42 @joedolson
5 years ago

  • Keywords early added

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


4 years ago

#44 @davidbaumwald
4 years ago

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

#45 @joedolson
4 years ago

It is, yes.

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


4 years ago

#47 @johnbillion
4 years ago

  • Keywords early removed

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


4 years ago

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


4 years ago

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


4 years ago

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


4 years ago

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


4 years ago

@Hareesh Pillai
4 years ago

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

#53 @Hareesh Pillai
4 years ago

  • Keywords needs-testing added

@joedolson
4 years ago

Adds one missing case, improves visibility of some outlines

#54 @joedolson
4 years ago

  • Keywords needs-testing removed

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
4 years ago

#55 @afercia
4 years ago

  • Keywords commit added

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

#56 @afercia
4 years ago

  • Resolution set to fixed
  • Status changed from accepted to closed

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.

Note: See TracTickets for help on using tickets.