Media views: dismiss notice button is invisible

[afercia]

Moved from the ​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

• ​1.3.3 Sensory Characteristics (Level A)
• ​2.4.7 Focus Visible (Level AA)
• ​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

[afercia]

Button is invisible but still focusable and announced by assistive technologies

[afercia]

Worth noting this applies to all the related media views, not just the "Featured Image" modal.

[mukesh27]

After applying recommended css see screenshot.

[afercia]

47113.diff​ makes the dismiss error button visible, using the same style of the dismiss error button used in the sidebar. See screenshot attached below.

Also, avoids a focus loss when activating the button: as it gets removed from the DOM, focus needs to be moved programmatically. Further improvements to focusManager.focus() and general focus management in the media views should be addressed separately. See #43169.

[afercia]

In 45376:

Accessibility: Improve the media views upload Dismiss Errors button.

• makes the Dismiss Errors button visible in the media views inline uploader
• avoids a focus loss when activating the Dismiss Errors button

See the related GitHub issue from the WPCampus accessibility audit ​https://github.com/WordPress/gutenberg/issues/15354

Fixes #47113.

[anevins]

Hey @afercia , just checking you're okay owning this for 5.3? If not, no pressure, we can get this reassigned.

[joemcgill]

Reopening this so it can be back-ported to the 5.2 branch.

[audrasjb]

Adding needs-testing keyword to validate if this ticket is good to land in 5.2.3 (should be ok though).

[audrasjb]

Patch tested and good to be backported. Removing needs-testing keyword.

[SergeyBiryukov]

In 45840:

Accessibility: Improve the media views upload Dismiss Errors button.

• makes the Dismiss Errors button visible in the media views inline uploader
• avoids a focus loss when activating the Dismiss Errors button

See the related GitHub issue from the WPCampus accessibility audit ​https://github.com/WordPress/gutenberg/issues/15354

Props afercia.
Merges [45376] to the 5.2 branch.
Fixes #47113.