WordPress.org
Get WordPress

Make WordPress Core

Changeset 53096


Ignore:
Timestamp:
04/07/2022 04:42:11 PM (3 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.