[wp-trac] [WordPress Trac] #47117: Media modals: Focus is invisible in Windows high contrast views
WordPress Trac
noreply at wordpress.org
Fri May 3 19:59:21 UTC 2019
#47117: Media modals: Focus is invisible in Windows high contrast views
-------------------------------+-----------------------------
Reporter: afercia | Owner: (none)
Type: defect (bug) | Status: new
Priority: normal | Milestone: Future Release
Component: Media | Version:
Severity: normal | Keywords: wpcampus-report
Focuses: ui, accessibility |
-------------------------------+-----------------------------
Moved from the
[https://github.com/WordPress/gutenberg/issues/created_by/karlgroves
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
- [https://www.w3.org/TR/WCAG20/#navigation-mechanisms-focus-visible
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
--
Ticket URL: <https://core.trac.wordpress.org/ticket/47117>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform
More information about the wp-trac
mailing list