WordPress.org

Make WordPress Core

Changeset 45840


Ignore:
Timestamp:
08/19/2019 04:30:50 AM (4 weeks ago)
Author:
SergeyBiryukov
Message:

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.

Location:
branches/5.2
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • branches/5.2

  • branches/5.2/src/js/media/views/focus-manager.js

    r43309 r45840  
    1515    },
    1616
    17     focus: function() { // Reset focus on first left menu item
    18         this.$('.media-menu-item').first().focus();
     17    /**
     18     * Moves focus to the first visible menu item in the modal.
     19     */
     20    focus: function() {
     21        this.$( '.media-menu-item' ).filter( ':visible' ).first().focus();
    1922    },
    2023    /**
  • branches/5.2/src/js/media/views/uploader/status.js

    r43309 r45840  
    118118    },
    119119
    120     /**
    121      * @param {Object} event
    122      */
    123     dismiss: function( event ) {
     120    dismiss: function() {
    124121        var errors = this.views.get('.upload-errors');
    125 
    126         event.preventDefault();
    127122
    128123        if ( errors ) {
     
    130125        }
    131126        wp.Uploader.errors.reset();
     127        // Keep focus within the modal after the dismiss button gets removed from the DOM.
     128        this.controller.modal.focusManager.focus();
    132129    }
    133130});
  • branches/5.2/src/wp-includes/css/media-views.css

    r45838 r45840  
    12361236
    12371237.media-uploader-status .upload-dismiss-errors {
     1238    position: absolute;
     1239    top: -3px;
     1240    right: -5px;
     1241    padding: 5px;
     1242    border-radius: 50%;
     1243    transition: none;
    12381244    text-decoration: none;
    12391245}
    12401246
    1241 .media-sidebar .media-uploader-status .upload-dismiss-errors {
    1242     position: absolute;
    1243     top: -10px;
    1244     right: -10px;
    1245     padding: 10px;
    1246     transition: none;
    1247 }
    1248 
    1249 .media-sidebar .media-uploader-status .upload-dismiss-errors:before {
     1247.uploader-inline .media-uploader-status .upload-dismiss-errors {
     1248    top: 2px;
     1249    right: 2px;
     1250}
     1251
     1252.media-uploader-status .upload-dismiss-errors::before {
    12501253    content: "\f153";
    12511254    display: block;
     
    12541257}
    12551258
    1256 .media-sidebar .media-uploader-status .upload-dismiss-errors:hover:before,
    1257 .media-sidebar .media-uploader-status .upload-dismiss-errors:focus:before {
     1259.uploader-inline .errors.media-uploader-status .upload-dismiss-errors::before {
     1260    color: #606a73;
     1261}
     1262
     1263.errors.media-uploader-status .upload-dismiss-errors:hover::before,
     1264.errors.media-uploader-status .upload-dismiss-errors:focus::before {
    12581265    color: #c00;
    12591266}
     
    12681275
    12691276.uploader-inline .upload-errors .upload-error {
     1277    padding: 12px 30px;
    12701278    background-color: #fbeaea;
    12711279    box-shadow: none;
Note: See TracChangeset for help on using the changeset viewer.