[wp-trac] [WordPress Trac] #47113: Media views: dismiss notice button is invisible

[WordPress Trac]

#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