WordPress.org

Make WordPress Core

Opened 5 months ago

Closed 4 weeks ago

#47113 closed defect (bug) (fixed)

Media views: dismiss notice button is invisible

Reported by: afercia Owned by: afercia
Milestone: 5.2.3 Priority: normal
Severity: normal Version:
Component: Media Keywords: wpcampus-report has-screenshots has-patch fixed-major
Focuses: ui, accessibility Cc:

Description

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

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

Attachments (4)

47113.png (180.1 KB) - added by afercia 5 months ago.
Button is invisible but still focusable and announced by assistive technologies
close-icon.png (71.6 KB) - added by mukesh27 4 months ago.
After applying recommended css see screenshot.
47113.diff (2.7 KB) - added by afercia 4 months ago.
dismiss upload error.png (100.4 KB) - added by afercia 4 months ago.

Download all attachments as: .zip

Change History (17)

@afercia
5 months ago

Button is invisible but still focusable and announced by assistive technologies

#1 @afercia
5 months ago

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

#2 @afercia
5 months ago

  • Keywords has-screenshots added

@mukesh27
4 months ago

After applying recommended css see screenshot.

#3 @afercia
4 months ago

  • Milestone changed from Future Release to 5.3

@afercia
4 months ago

#4 @afercia
4 months ago

  • Keywords has-patch added
  • Owner set to afercia
  • Status changed from new to assigned

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.

#5 @afercia
4 months ago

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

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.

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


3 months ago

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


5 weeks ago

#8 @anevins
5 weeks ago

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

#9 @joemcgill
5 weeks ago

  • Keywords fixed-major added
  • Milestone changed from 5.3 to 5.2.3
  • Resolution fixed deleted
  • Status changed from closed to reopened

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

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


5 weeks ago

#11 @audrasjb
5 weeks ago

  • Keywords needs-testing added

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

#12 @audrasjb
4 weeks ago

  • Keywords needs-testing removed

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

#13 @SergeyBiryukov
4 weeks ago

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

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.

Note: See TracTickets for help on using tickets.