[wp-trac] [WordPress Trac] #47113: Media views: dismiss notice button is invisible
WordPress Trac
noreply at wordpress.org
Fri May 3 17:27:00 UTC 2019
#47113: Media views: dismiss notice button is invisible
-------------------------------+-----------------------------
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/15354
Control is invisible
- **Severity:** High
- **Affected Populations:**
- Low-Vision
- Motor Impaired
- Cognitively Impaired
- **Platform(s):**
- All / Universal
- **Components affected:**
- Media Dialog
#### Issue description
When users attempt to upload an image in the "Featured Image" modal
dialog, and receive an error, a close button is present to remove the
error message. This button is invisible to most users, although it does
have visually-hidden text for screen reader users.
Sighted keyboard-only users will see only the box-shadow when they
happen to focus on it, while Window High Contrast users see nothing
(because box-shadow is removed by High Contrast themes).
##### Issue Code
{{{
<button type="button" class="button-link upload-dismiss-errors">
<span class="screen-reader-text">Dismiss Errors</span>
</button>
...
.wp-core-ui .button-link:focus {
color: #124964;
box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30,140,190,.8);
}
}}}
#### Remediation Guidance
Add an icon or text to make the button visible, such as an "x" icon.
Add an `outline` property to the button when it's focused so that
Windows High Contrast keyboard users can see where the focus position
is.
Ensure the button is at least 44px by 44px to meet minimum target-size
requirements.
##### Recommended Code
{{{
.wp-core-ui .button-link:before {
content: "f158";
font: normal 20px/1 dashicons;
speak: none;
vertical-align: middle;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
...
.wp-core-ui .button-link:focus {
color: #124964;
box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30,140,190,.8);
outline: 1px dotted transparent;
}
}}}
#### Relevant standards
- [https://www.w3.org/TR/WCAG20/#content-structure-separation-
understanding 1.3.3 Sensory Characteristics (Level A)]
- [https://www.w3.org/TR/WCAG20/#navigation-mechanisms-focus-visible
2.4.7 Focus Visible (Level AA)]
- [https://www.w3.org/TR/WCAG21/#target-size 2.5.5 Target Size (Level
AAA)]
**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-62 in Tenon's
report
--
Ticket URL: <https://core.trac.wordpress.org/ticket/47113>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform
More information about the wp-trac
mailing list