WordPress.org
Get WordPress

Make WordPress Core

Changeset 53096


Ignore:
Timestamp:
04/07/2022 04:42:11 PM (5 years ago)
Author:
joedolson
Message:

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.

Location:
trunk/src
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/js/_enqueues/admin/inline-edit-post.js

    r50547 r53096  
    132132                        $('#inline-edit fieldset.inline-edit-categories').clone()
    133133                ).siblings( 'fieldset:last' ).prepend(
    134                         $('#inline-edit label.inline-edit-tags').clone()
     134                        $( '#inline-edit .inline-edit-tags-wrap' ).clone()
    135135                );
    136136
    … …  
    198198                        if ( $(this).prop('checked') ) {
    199199                                c = false;
    200                                 var id = $(this).val(), theTitle;
    201                                 theTitle = $('#inline_'+id+' .post_title').html() || wp.i18n.__( '(no title)' );
    202                                 te += '<div id="ttle'+id+'"><a id="_'+id+'" class="ntdelbutton" title="'+ wp.i18n.__( 'Remove From Bulk Edit' ) +'">X</a>'+theTitle+'</div>';
     200                                var id = $( this ).val(),
     201                                        theTitle = $( '#inline_' + id + ' .post_title' ).html() || wp.i18n.__( '(no title)' ),
     202                                        buttonVisuallyHiddenText = wp.i18n.sprintf(
     203                                                /* translators: %s: Post title. */
     204                                                wp.i18n.__( 'Remove &#8220;%s&#8221; from Bulk Edit' ),
     205                                                theTitle
     206                                        );
     207
     208                                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>';
    203209                        }
    204210                });
    … …  
    209215                }
    210216
    211                 // Add onclick events to the delete-icons in the bulk editors the post title list.
    212                 $('#bulk-titles').html(te);
    213                 /**
    214                  * Binds on click events to the checkboxes before the posts in the table.
     217                // Populate the list of items to bulk edit.
     218                $( '#bulk-titles' ).html( '<ul id="bulk-titles-list" role="list">' + te + '</ul>' );
     219
     220                /**
     221                 * Binds on click events to handle the list of items to bulk edit.
    215222                 *
    216223                 * @listens click
    217224                 */
    218                 $('#bulk-titles a').on( 'click', function(){
    219                         var id = $(this).attr('id').substr(1);
    220 
    221                         $('table.widefat input[value="' + id + '"]').prop('checked', false);
    222                         $('#ttle'+id).remove();
     225                $( '#bulk-titles .ntdelbutton' ).click( function() {
     226                        var $this = $( this ),
     227                                id = $this.attr( 'id' ).substr( 1 ),
     228                                $prev = $this.parent().prev().children( '.ntdelbutton' ),
     229                                $next = $this.parent().next().children( '.ntdelbutton' );
     230
     231                        $( 'table.widefat input[value="' + id + '"]' ).prop( 'checked', false );
     232                        $( '#_' + id ).parent().remove();
     233                        wp.a11y.speak( wp.i18n.__( 'Item removed.' ), 'assertive' );
     234
     235                        // Move focus to a proper place when items are removed.
     236                        if ( $next.length ) {
     237                                $next.focus();
     238                        } else if ( $prev.length ) {
     239                                $prev.focus();
     240                        } else {
     241                                $( '#bulk-titles-list' ).remove();
     242                                inlineEditPost.revert();
     243                                wp.a11y.speak( wp.i18n.__( 'All selected items have been removed. Select new items to use Bulk Actions.' ) );
     244                        }
    223245                });
    224246
    … …  
    239261                }
    240262
     263                // Set initial focus on the Bulk Edit region.
     264                $( '#bulk-edit .inline-edit-wrapper' ).attr( 'tabindex', '-1' ).focus();
    241265                // Scrolls to the top of the table where the editor is rendered.
    242266                $('html, body').animate( { scrollTop: 0 }, 'fast' );

  • trunk/src/wp-admin/css/common.css

    r52790 r53096  
    790790.welcome-panel .welcome-panel-close:before,
    791791.tagchecklist .ntdelbutton .remove-tag-icon:before,
    792 #bulk-titles div a:before,
     792#bulk-titles .ntdelbutton:before,
    793793.notice-dismiss:before {
    794794        background: none;
    … …  
    809809}
    810810
    811 #bulk-titles div a:before {
    812         margin: 1px 0;
    813 }
    814 
    815811.tagchecklist .ntdelbutton .remove-tag-icon:before {
    816812        margin-left: 2px;
    … …  
    827823.tagchecklist .ntdelbutton:hover .remove-tag-icon:before,
    828824.tagchecklist .ntdelbutton:focus .remove-tag-icon:before,
    829 #bulk-titles div a:hover:before,
    830 #bulk-titles div a:focus:before {
     825#bulk-titles .ntdelbutton:hover:before,
     826#bulk-titles .ntdelbutton:focus:before {
    831827        color: #d63638;
    832828}

  • trunk/src/wp-admin/css/list-tables.css

    r53023 r53096  
    859859
    860860#wpbody-content .inline-edit-row fieldset {
    861         font-size: 12px;
    862861        float: left;
    863862        margin: 0;
     863        padding: 0 12px 0 0;
     864        width: 100%;
     865        box-sizing: border-box;
     866}
     867
     868#wpbody-content .inline-edit-row td fieldset:last-of-type {
     869        padding-right: 0;
     870}
     871
     872tr.inline-edit-row td {
    864873        padding: 0;
    865         width: 100%;
    866 }
    867 
    868 tr.inline-edit-row td,
    869 #wpbody-content .inline-edit-row fieldset .inline-edit-col {
    870         padding: 0 0.5em;
     874        /* Prevents the focus style on .inline-edit-wrapper from being cutted-off */
     875        position: relative;
     876}
     877
     878.inline-edit-wrapper {
     879        display: flow-root;
     880        padding: 0 12px;
     881        border: 1px solid transparent;
     882        border-radius: 4px;
     883}
     884
     885.inline-edit-wrapper:focus {
     886        border-color: #2271b1;
     887        box-shadow: 0 0 0 1px #2271b1;
     888        /* Only visible in Windows High Contrast mode */
     889        outline: 2px solid transparent;
    871890}
    872891
    … …  
    889908#wpbody-content .quick-edit-row-page .inline-edit-col-right,
    890909#wpbody-content .bulk-edit-row-post .inline-edit-col-right {
    891         width: 49%;
     910        width: 50%;
    892911}
    893912
    … …  
    919938        align-items: center;
    920939        clear: both;
    921         padding: 0.5em;
    922         margin: 0.5em 0 0;
     940        margin: 0;
     941        padding: 0.5em 0 1em;
    923942}
    924943
    … …  
    948967#the-list .inline-edit-row .inline-edit-legend {
    949968        margin: 0;
    950         padding: 0.2em 0.5em 0;
     969        padding: 0.2em 0;
    951970        line-height: 2.5;
    952971        font-weight: 600;
    953 }
    954 
    955 #the-list #bulk-edit.inline-edit-row .inline-edit-legend {
    956         padding: 0.2em 0.5em;
    957972}
    958973
    … …  
    10631078}
    10641079
    1065 ul.cat-checklist {
    1066         height: 12em;
    1067         border: solid 1px #dcdcde;
    1068         overflow-y: scroll;
    1069         padding: 0 5px;
    1070         margin: 0;
    1071         background-color: #fff;
    1072 }
    1073 
    1074 #bulk-titles {
    1075         display: block;
    1076         height: 12em;
    1077         border: 1px solid #dcdcde;
    1078         overflow-y: scroll;
    1079         padding: 0 5px;
    1080         margin: 0 0 5px;
    1081 }
    1082 
     1080#bulk-titles-list,
     1081#bulk-titles-list li,
    10831082.inline-edit-row fieldset ul.cat-checklist li,
    10841083.inline-edit-row fieldset ul.cat-checklist input {
    … …  
    10871086}
    10881087
    1089 .inline-edit-row fieldset ul.cat-checklist label,
    1090 .inline-edit-row #bulk-titles div {
    1091         font-style: normal;
    1092         font-size: 11px;
     1088.inline-edit-row fieldset ul.cat-checklist input {
     1089        margin-top: -1px;
     1090        margin-left: 3px;
    10931091}
    10941092
    … …  
    11101108}
    11111109
    1112 #bulk-titles {
    1113         line-height: 140%;
    1114 }
    1115 #bulk-titles div {
    1116         margin: 0.2em 0.3em;
    1117 }
    1118 
    1119 #bulk-titles div a {
    1120         cursor: pointer;
    1121         display: block;
    1122         float: left;
    1123         height: 18px;
    1124         margin: 0 3px 0 -2px;
    1125         overflow: hidden;
    1126         position: relative;
    1127         width: 20px;
    1128 }
    1129 
    1130 #bulk-titles div a:before {
    1131         position: relative;
    1132         top: -3px;
     1110#bulk-titles,
     1111ul.cat-checklist {
     1112        height: 14em;
     1113        border: 1px solid #ddd;
     1114        margin: 0 0 5px;
     1115        padding: 0.2em 5px;
     1116        overflow-y: scroll;
     1117}
     1118
     1119#bulk-titles .ntdelbutton,
     1120#bulk-titles .ntdeltitle,
     1121.inline-edit-row fieldset ul.cat-checklist label {
     1122        display: inline-block;
     1123        margin: 0;
     1124        padding: 3px 0;
     1125        line-height: 20px;
     1126        vertical-align: top;
     1127}
     1128
     1129#bulk-titles .ntdelitem {
     1130        padding-left: 23px;
     1131}
     1132
     1133#bulk-titles .ntdelbutton {
     1134        width: 26px;
     1135        height: 26px;
     1136        margin: 0 0 0 -26px;
     1137        text-align: center;
     1138        border-radius: 3px;
     1139}
     1140
     1141#bulk-titles .ntdelbutton:before {
     1142        display: inline-block;
     1143        vertical-align: top;
     1144}
     1145
     1146#bulk-titles .ntdelbutton:focus {
     1147        box-shadow: 0 0 0 2px #3582c4;
     1148        /* Only visible in Windows High Contrast mode */
     1149        outline: 2px solid transparent;
     1150        /* Reset inherited offset from Gutenberg */
     1151        outline-offset: 0;
    11331152}
    11341153
    … …  
    19461965                float: none;
    19471966                width: 100%;
     1967                padding: 0;
     1968        }
     1969
     1970        #the-list .inline-edit-row .inline-edit-legend,
     1971        .inline-edit-row span.title {
     1972                font-size: 16px;
     1973        }
     1974
     1975        .inline-edit-row p.howto {
     1976                font-size: 14px;
     1977        }
     1978
     1979        #wpbody-content .inline-edit-row-page .inline-edit-col-right {
     1980                margin-top: 0;
    19481981        }
    19491982
    … …  
    19732006        }
    19742007
    1975         .inline-edit-row fieldset ul.cat-checklist label,
    1976         .inline-edit-row #bulk-titles div {
     2008        #bulk-titles .ntdelbutton,
     2009        #bulk-titles .ntdeltitle,
     2010        .inline-edit-row fieldset ul.cat-checklist label {
     2011                padding: 6px 0;
    19772012                font-size: 16px;
     2013                line-height: 28px;
     2014        }
     2015
     2016        #bulk-titles .ntdelitem {
     2017                padding-left: 37px;
     2018        }
     2019
     2020        #bulk-titles .ntdelbutton {
     2021                width: 40px;
     2022                height: 40px;
     2023                margin: 0 0 0 -40px;
     2024                overflow: hidden;
     2025        }
     2026
     2027        #bulk-titles .ntdelbutton:before {
     2028                font-size: 20px;
     2029                line-height: 28px;
    19782030        }
    19792031
    … …  
    19812033        .inline-edit-row fieldset.inline-edit-date legend {
    19822034                float: none;
    1983         }
    1984 
    1985         .inline-edit-row fieldset label.inline-edit-tags {
    1986                 padding: 0 0.5em;
    19872035        }
    19882036
    … …  
    20142062        #edithead label {
    20152063                display: block;
    2016         }
    2017 
    2018         #bulk-titles div {
    2019                 margin: 0.8em 0.3em;
    2020         }
    2021 
    2022         #bulk-titles div a {
    2023                 height: 22px;
    20242064        }
    20252065

  • trunk/src/wp-admin/includes/class-wp-posts-list-table.php

    r53049 r53096  
    16121612                        <tr id="<?php echo $bulk ? 'bulk-edit' : 'inline-edit'; ?>" class="<?php echo $classes; ?>" style="display: none">
    16131613                        <td colspan="<?php echo $this->get_column_count(); ?>" class="colspanchange">
    1614 
     1614                        <div class="inline-edit-wrapper" role="region" aria-labelledby="inline-edit-legend">
    16151615                        <fieldset class="inline-edit-col-left">
    1616                                 <legend class="inline-edit-legend"><?php echo $bulk ? __( 'Bulk Edit' ) : __( 'Quick Edit' ); ?></legend>
     1616                                <legend class="inline-edit-legend" id="inline-edit-legend"><?php echo $bulk ? __( 'Bulk Edit' ) : __( 'Quick Edit' ); ?></legend>
    16171617                                <div class="inline-edit-col">
    16181618
    … …  
    18291829                                                <?php if ( current_user_can( $taxonomy->cap->assign_terms ) ) : ?>
    18301830                                                        <?php $taxonomy_name = esc_attr( $taxonomy->name ); ?>
    1831 
     1831                                                        <div class="inline-edit-tags-wrap">
    18321832                                                        <label class="inline-edit-tags">
    18331833                                                                <span class="title"><?php echo esc_html( $taxonomy->labels->name ); ?></span>
    1834                                                                 <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>
     1834                                                                <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>
    18351835                                                        </label>
    1836 
     1836                                                        <p class="howto" id="inline-edit-<?php echo esc_attr( $taxonomy->name ); ?>-desc"><?php echo esc_html( $taxonomy->labels->separate_items_with_commas ); ?></p>
     1837                                                        </div>
    18371838                                                <?php endif; // current_user_can( 'assign_terms' ) ?>
    18381839
    … …  
    20312032                                </div>
    20322033                        </div>
     2034                </div> <!-- end of .inline-edit-wrapper -->
    20332035
    20342036                        </td></tr>
Note: See TracChangeset for help on using the changeset viewer.