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.
Built from https://develop.svn.wordpress.org/trunk@53096


git-svn-id: http://core.svn.wordpress.org/trunk@52685 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
joedolson 2022-04-07 16:44:05 +00:00
parent 758211c9b8
commit 337e4a8d90
12 changed files with 266 additions and 168 deletions

View File

@ -790,7 +790,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;
@ -809,10 +809,6 @@ img.emoji {
margin: 0;
}
#bulk-titles div a:before {
margin: 1px 0;
}
.tagchecklist .ntdelbutton .remove-tag-icon:before {
margin-right: 2px;
border-radius: 50%;
@ -827,8 +823,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;
}

File diff suppressed because one or more lines are too long

View File

@ -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;
}

File diff suppressed because one or more lines are too long

View File

@ -859,16 +859,35 @@ tr:hover .row-actions,
/* Layout */
#wpbody-content .inline-edit-row fieldset {
font-size: 12px;
float: right;
margin: 0;
padding: 0;
padding: 0 0 0 12px;
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-left: 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 {
@ -889,7 +908,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 {
@ -919,8 +938,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 {
@ -948,15 +967,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;
@ -1063,34 +1078,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-right: 3px;
}
.inline-edit-row fieldset label input.inline-edit-menu-order-input {
@ -1110,27 +1108,48 @@ ul.cat-checklist {
float: right;
}
#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: right;
height: 18px;
margin: 0 -2px 0 3px;
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-right: 23px;
}
#bulk-titles .ntdelbutton {
width: 26px;
height: 26px;
margin: 0 -26px 0 0;
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;
}
/*------------------------------------------------------------------------------
@ -1946,6 +1965,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,
@ -1973,9 +2006,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-right: 37px;
}
#bulk-titles .ntdelbutton {
width: 40px;
height: 40px;
margin: 0 -40px 0 0;
overflow: hidden;
}
#bulk-titles .ntdelbutton:before {
font-size: 20px;
line-height: 28px;
}
.inline-edit-row fieldset label span.title,
@ -1983,10 +2035,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;
}
@ -2016,14 +2064,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;

File diff suppressed because one or more lines are too long

View File

@ -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;

File diff suppressed because one or more lines are too long

View File

@ -1611,9 +1611,9 @@ class WP_Posts_List_Table extends WP_List_Table {
?>
<tr id="<?php echo $bulk ? 'bulk-edit' : 'inline-edit'; ?>" class="<?php echo $classes; ?>" style="display: none">
<td colspan="<?php echo $this->get_column_count(); ?>" class="colspanchange">
<div class="inline-edit-wrapper" role="region" aria-labelledby="inline-edit-legend">
<fieldset class="inline-edit-col-left">
<legend class="inline-edit-legend"><?php echo $bulk ? __( 'Bulk Edit' ) : __( 'Quick Edit' ); ?></legend>
<legend class="inline-edit-legend" id="inline-edit-legend"><?php echo $bulk ? __( 'Bulk Edit' ) : __( 'Quick Edit' ); ?></legend>
<div class="inline-edit-col">
<?php if ( post_type_supports( $screen->post_type, 'title' ) ) : ?>
@ -1828,12 +1828,13 @@ class WP_Posts_List_Table extends WP_List_Table {
<?php if ( current_user_can( $taxonomy->cap->assign_terms ) ) : ?>
<?php $taxonomy_name = esc_attr( $taxonomy->name ); ?>
<div class="inline-edit-tags-wrap">
<label class="inline-edit-tags">
<span class="title"><?php echo esc_html( $taxonomy->labels->name ); ?></span>
<textarea data-wp-taxonomy="<?php echo $taxonomy_name; ?>" cols="22" rows="1" name="tax_input[<?php echo $taxonomy_name; ?>]" class="tax_input_<?php echo $taxonomy_name; ?>"></textarea>
<textarea data-wp-taxonomy="<?php echo $taxonomy_name; ?>" cols="22" rows="1" name="tax_input[<?php echo esc_attr( $taxonomy->name ); ?>]" class="tax_input_<?php echo esc_attr( $taxonomy->name ); ?>" aria-describedby="inline-edit-<?php echo esc_attr( $taxonomy->name ); ?>-desc"></textarea>
</label>
<p class="howto" id="inline-edit-<?php echo esc_attr( $taxonomy->name ); ?>-desc"><?php echo esc_html( $taxonomy->labels->separate_items_with_commas ); ?></p>
</div>
<?php endif; // current_user_can( 'assign_terms' ) ?>
<?php endforeach; // $flat_taxonomies as $taxonomy ?>
@ -2030,6 +2031,7 @@ class WP_Posts_List_Table extends WP_List_Table {
<p class="error"></p>
</div>
</div>
</div> <!-- end of .inline-edit-wrapper -->
</td></tr>

View File

@ -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 += '<div id="ttle'+id+'"><a id="_'+id+'" class="ntdelbutton" title="'+ wp.i18n.__( 'Remove From Bulk Edit' ) +'">X</a>'+theTitle+'</div>';
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 &#8220;%s&#8221; from Bulk Edit' ),
theTitle
);
te += '<li class="ntdelitem"><button type="button" id="_' + id + '" class="button-link ntdelbutton"><span class="screen-reader-text">' + buttonVisuallyHiddenText + '</span></button><span class="ntdeltitle" aria-hidden="true">' + theTitle + '</span></li>';
}
});
@ -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( '<ul id="bulk-titles-list" role="list">' + te + '</ul>' );
/**
* 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' );
},

File diff suppressed because one or more lines are too long

View File

@ -16,7 +16,7 @@
*
* @global string $wp_version
*/
$wp_version = '6.0-alpha-53095';
$wp_version = '6.0-alpha-53096';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.