From 7f26a0b5ce9fdd5899598343cb84e8ad0c9eac6c Mon Sep 17 00:00:00 2001 From: Joe Dolson Date: Thu, 7 Apr 2022 16:42:11 +0000 Subject: [PATCH] Quick/Bulk Edit: Fix initial focus and keyboard operability. Fix the quick and bulk edit forms to set an appropriate initial focus, use native HTML controls for all interactions, and set appropriate labels for controls. Improve the semantics of HTML wrappers so lists are enumerable by screen readers. Props afercia, azaozz. Fixes #35483. git-svn-id: https://develop.svn.wordpress.org/trunk@53096 602fd350-edb4-49c9-b593-d223f7449a82 --- src/js/_enqueues/admin/inline-edit-post.js | 46 +++-- src/wp-admin/css/common.css | 10 +- src/wp-admin/css/list-tables.css | 172 +++++++++++------- .../includes/class-wp-posts-list-table.php | 12 +- 4 files changed, 151 insertions(+), 89 deletions(-) diff --git a/src/js/_enqueues/admin/inline-edit-post.js b/src/js/_enqueues/admin/inline-edit-post.js index 4d297e0c1a..46fba439fb 100644 --- a/src/js/_enqueues/admin/inline-edit-post.js +++ b/src/js/_enqueues/admin/inline-edit-post.js @@ -131,7 +131,7 @@ window.wp = window.wp || {}; $('#bulk-edit').find('fieldset:first').after( $('#inline-edit fieldset.inline-edit-categories').clone() ).siblings( 'fieldset:last' ).prepend( - $('#inline-edit label.inline-edit-tags').clone() + $( '#inline-edit .inline-edit-tags-wrap' ).clone() ); $('select[name="_status"] option[value="future"]', bulkRow).remove(); @@ -197,9 +197,15 @@ window.wp = window.wp || {}; // If the checkbox for a post is selected, add the post to the edit list. if ( $(this).prop('checked') ) { c = false; - var id = $(this).val(), theTitle; - theTitle = $('#inline_'+id+' .post_title').html() || wp.i18n.__( '(no title)' ); - te += '
X'+theTitle+'
'; + var id = $( this ).val(), + theTitle = $( '#inline_' + id + ' .post_title' ).html() || wp.i18n.__( '(no title)' ), + buttonVisuallyHiddenText = wp.i18n.sprintf( + /* translators: %s: Post title. */ + wp.i18n.__( 'Remove “%s” from Bulk Edit' ), + theTitle + ); + + te += '
    • '; } }); @@ -208,18 +214,34 @@ window.wp = window.wp || {}; return this.revert(); } - // Add onclick events to the delete-icons in the bulk editors the post title list. - $('#bulk-titles').html(te); + // Populate the list of items to bulk edit. + $( '#bulk-titles' ).html( '' ); + /** - * Binds on click events to the checkboxes before the posts in the table. + * Binds on click events to handle the list of items to bulk edit. * * @listens click */ - $('#bulk-titles a').on( 'click', function(){ - var id = $(this).attr('id').substr(1); + $( '#bulk-titles .ntdelbutton' ).click( function() { + var $this = $( this ), + id = $this.attr( 'id' ).substr( 1 ), + $prev = $this.parent().prev().children( '.ntdelbutton' ), + $next = $this.parent().next().children( '.ntdelbutton' ); - $('table.widefat input[value="' + id + '"]').prop('checked', false); - $('#ttle'+id).remove(); + $( 'table.widefat input[value="' + id + '"]' ).prop( 'checked', false ); + $( '#_' + id ).parent().remove(); + wp.a11y.speak( wp.i18n.__( 'Item removed.' ), 'assertive' ); + + // Move focus to a proper place when items are removed. + if ( $next.length ) { + $next.focus(); + } else if ( $prev.length ) { + $prev.focus(); + } else { + $( '#bulk-titles-list' ).remove(); + inlineEditPost.revert(); + wp.a11y.speak( wp.i18n.__( 'All selected items have been removed. Select new items to use Bulk Actions.' ) ); + } }); // Enable auto-complete for tags when editing posts. @@ -238,6 +260,8 @@ window.wp = window.wp || {}; } ); } + // Set initial focus on the Bulk Edit region. + $( '#bulk-edit .inline-edit-wrapper' ).attr( 'tabindex', '-1' ).focus(); // Scrolls to the top of the table where the editor is rendered. $('html, body').animate( { scrollTop: 0 }, 'fast' ); }, diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index e138edaae4..95235666bd 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -789,7 +789,7 @@ img.emoji { /* @todo can we combine these into a class or use an existing dashicon one? */ .welcome-panel .welcome-panel-close:before, .tagchecklist .ntdelbutton .remove-tag-icon:before, -#bulk-titles div a:before, +#bulk-titles .ntdelbutton:before, .notice-dismiss:before { background: none; color: #787c82; @@ -808,10 +808,6 @@ img.emoji { margin: 0; } -#bulk-titles div a:before { - margin: 1px 0; -} - .tagchecklist .ntdelbutton .remove-tag-icon:before { margin-left: 2px; border-radius: 50%; @@ -826,8 +822,8 @@ img.emoji { .tagchecklist .ntdelbutton:hover .remove-tag-icon:before, .tagchecklist .ntdelbutton:focus .remove-tag-icon:before, -#bulk-titles div a:hover:before, -#bulk-titles div a:focus:before { +#bulk-titles .ntdelbutton:hover:before, +#bulk-titles .ntdelbutton:focus:before { color: #d63638; } diff --git a/src/wp-admin/css/list-tables.css b/src/wp-admin/css/list-tables.css index e9a97680b9..84e390d83e 100644 --- a/src/wp-admin/css/list-tables.css +++ b/src/wp-admin/css/list-tables.css @@ -858,16 +858,35 @@ tr:hover .row-actions, /* Layout */ #wpbody-content .inline-edit-row fieldset { - font-size: 12px; float: left; margin: 0; - padding: 0; + padding: 0 12px 0 0; width: 100%; + box-sizing: border-box; } -tr.inline-edit-row td, -#wpbody-content .inline-edit-row fieldset .inline-edit-col { - padding: 0 0.5em; +#wpbody-content .inline-edit-row td fieldset:last-of-type { + padding-right: 0; +} + +tr.inline-edit-row td { + padding: 0; + /* Prevents the focus style on .inline-edit-wrapper from being cutted-off */ + position: relative; +} + +.inline-edit-wrapper { + display: flow-root; + padding: 0 12px; + border: 1px solid transparent; + border-radius: 4px; +} + +.inline-edit-wrapper:focus { + border-color: #2271b1; + box-shadow: 0 0 0 1px #2271b1; + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; } #wpbody-content .quick-edit-row-post .inline-edit-col-left { @@ -888,7 +907,7 @@ tr.inline-edit-row td, #wpbody-content .quick-edit-row-page .inline-edit-col-right, #wpbody-content .bulk-edit-row-post .inline-edit-col-right { - width: 49%; + width: 50%; } #wpbody-content .bulk-edit-row .inline-edit-col-left { @@ -918,8 +937,8 @@ tr.inline-edit-row td, flex-wrap: wrap; align-items: center; clear: both; - padding: 0.5em; - margin: 0.5em 0 0; + margin: 0; + padding: 0.5em 0 1em; } .inline-edit-save.submit .button { @@ -947,15 +966,11 @@ tr.inline-edit-row td, /* Needs higher specificity for the padding */ #the-list .inline-edit-row .inline-edit-legend { margin: 0; - padding: 0.2em 0.5em 0; + padding: 0.2em 0; line-height: 2.5; font-weight: 600; } -#the-list #bulk-edit.inline-edit-row .inline-edit-legend { - padding: 0.2em 0.5em; -} - .inline-edit-row fieldset span.title, .inline-edit-row fieldset span.checkbox-title { margin: 0; @@ -1062,34 +1077,17 @@ tr.inline-edit-row td, width: 8em; } -ul.cat-checklist { - height: 12em; - border: solid 1px #dcdcde; - overflow-y: scroll; - padding: 0 5px; - margin: 0; - background-color: #fff; -} - -#bulk-titles { - display: block; - height: 12em; - border: 1px solid #dcdcde; - overflow-y: scroll; - padding: 0 5px; - margin: 0 0 5px; -} - +#bulk-titles-list, +#bulk-titles-list li, .inline-edit-row fieldset ul.cat-checklist li, .inline-edit-row fieldset ul.cat-checklist input { margin: 0; position: relative; /* RTL fix, #WP27629 */ } -.inline-edit-row fieldset ul.cat-checklist label, -.inline-edit-row #bulk-titles div { - font-style: normal; - font-size: 11px; +.inline-edit-row fieldset ul.cat-checklist input { + margin-top: -1px; + margin-left: 3px; } .inline-edit-row fieldset label input.inline-edit-menu-order-input { @@ -1109,27 +1107,48 @@ ul.cat-checklist { float: left; } -#bulk-titles { - line-height: 140%; -} -#bulk-titles div { - margin: 0.2em 0.3em; +#bulk-titles, +ul.cat-checklist { + height: 14em; + border: 1px solid #ddd; + margin: 0 0 5px; + padding: 0.2em 5px; + overflow-y: scroll; } -#bulk-titles div a { - cursor: pointer; - display: block; - float: left; - height: 18px; - margin: 0 3px 0 -2px; - overflow: hidden; - position: relative; - width: 20px; +#bulk-titles .ntdelbutton, +#bulk-titles .ntdeltitle, +.inline-edit-row fieldset ul.cat-checklist label { + display: inline-block; + margin: 0; + padding: 3px 0; + line-height: 20px; + vertical-align: top; } -#bulk-titles div a:before { - position: relative; - top: -3px; +#bulk-titles .ntdelitem { + padding-left: 23px; +} + +#bulk-titles .ntdelbutton { + width: 26px; + height: 26px; + margin: 0 0 0 -26px; + text-align: center; + border-radius: 3px; +} + +#bulk-titles .ntdelbutton:before { + display: inline-block; + vertical-align: top; +} + +#bulk-titles .ntdelbutton:focus { + box-shadow: 0 0 0 2px #3582c4; + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; + /* Reset inherited offset from Gutenberg */ + outline-offset: 0; } /*------------------------------------------------------------------------------ @@ -1945,6 +1964,20 @@ div.action-links, #wpbody-content .bulk-edit-row .inline-edit-col-bottom { float: none; width: 100%; + padding: 0; + } + + #the-list .inline-edit-row .inline-edit-legend, + .inline-edit-row span.title { + font-size: 16px; + } + + .inline-edit-row p.howto { + font-size: 14px; + } + + #wpbody-content .inline-edit-row-page .inline-edit-col-right { + margin-top: 0; } #wpbody-content .quick-edit-row fieldset .inline-edit-col label, @@ -1972,9 +2005,28 @@ div.action-links, padding: 3px 4px; } - .inline-edit-row fieldset ul.cat-checklist label, - .inline-edit-row #bulk-titles div { + #bulk-titles .ntdelbutton, + #bulk-titles .ntdeltitle, + .inline-edit-row fieldset ul.cat-checklist label { + padding: 6px 0; font-size: 16px; + line-height: 28px; + } + + #bulk-titles .ntdelitem { + padding-left: 37px; + } + + #bulk-titles .ntdelbutton { + width: 40px; + height: 40px; + margin: 0 0 0 -40px; + overflow: hidden; + } + + #bulk-titles .ntdelbutton:before { + font-size: 20px; + line-height: 28px; } .inline-edit-row fieldset label span.title, @@ -1982,10 +2034,6 @@ div.action-links, float: none; } - .inline-edit-row fieldset label.inline-edit-tags { - padding: 0 0.5em; - } - .inline-edit-row fieldset .inline-edit-col label.inline-edit-tags { padding: 0; } @@ -2015,14 +2063,6 @@ div.action-links, display: block; } - #bulk-titles div { - margin: 0.8em 0.3em; - } - - #bulk-titles div a { - height: 22px; - } - /* Updates */ #wpbody-content .updates-table .plugin-title { width: auto; diff --git a/src/wp-admin/includes/class-wp-posts-list-table.php b/src/wp-admin/includes/class-wp-posts-list-table.php index 99a84da59b..b6858a1e10 100644 --- a/src/wp-admin/includes/class-wp-posts-list-table.php +++ b/src/wp-admin/includes/class-wp-posts-list-table.php @@ -1611,9 +1611,9 @@ class WP_Posts_List_Table extends WP_List_Table { ?> - +
    - +
    post_type, 'title' ) ) : ?> @@ -1828,12 +1828,13 @@ class WP_Posts_List_Table extends WP_List_Table { cap->assign_terms ) ) : ?> name ); ?> - +
    - +

    labels->separate_items_with_commas ); ?>

    +
    @@ -2030,6 +2031,7 @@ class WP_Posts_List_Table extends WP_List_Table {

    +