WordPress.org
Get WordPress

Make WordPress Core

Ticket #31608: 31608.3.patch

File 31608.3.patch, 11.9 KB (added by afercia, 11 years ago)

Accessibility treatment first pass

  • src/wp-admin/css/forms.css

     
    864864        margin: 25px;
    865865}
    866866
    867 .request-filesystem-credentials-dialog-content input[type="text"],
    868 .request-filesystem-credentials-dialog-content input[type="password"] {
    869         width: 85%;
     867.request-filesystem-credentials-form input[type="text"],
     868.request-filesystem-credentials-form input[type="password"] {
     869        display: block;
    870870}
    871871
     872.request-filesystem-credentials-dialog input[type="text"],
     873.request-filesystem-credentials-dialog input[type="password"] {
     874        width: 100%;
     875}
     876
     877.request-filesystem-credentials-form .field-title {
     878        font-weight: 600;
     879}
     880
     881.request-filesystem-credentials-dialog label[for="hostname"],
     882.request-filesystem-credentials-dialog label[for="public_key"],
     883.request-filesystem-credentials-dialog label[for="private_key"] {
     884        display: block;
     885        margin-bottom: 1em;
     886}
     887
     888.request-filesystem-credentials-dialog .ftp-username,
     889.request-filesystem-credentials-dialog .ftp-password {
     890        float: left;
     891        width: 48%;
     892}
     893
     894.request-filesystem-credentials-dialog .ftp-password {
     895        margin-left: 4%;
     896}
     897
     898.request-filesystem-credentials-dialog .request-filesystem-credentials-action-buttons {
     899        text-align: right;
     900}
     901
     902.request-filesystem-credentials-dialog label[for="ftp"] {
     903        margin-right: 10px;
     904}
     905
     906#request-filesystem-credentials-dialog .button:not(:last-child) {
     907        margin-right: 10px;
     908}
     909
     910#request-filesystem-credentials-form .cancel-button {
     911        display: none;
     912}
     913
     914#request-filesystem-credentials-dialog .cancel-button {
     915        display: inline;
     916}
     917
     918
    872919/* =Media Queries
    873920-------------------------------------------------------------- */
    874921

  • src/wp-admin/includes/file.php

     
    11121112-->
    11131113</script>
    11141114<form action="<?php echo esc_url( $form_post ) ?>" method="post">
    1115 <div>
    1116 <h3><?php _e('Connection Information') ?></h3>
    1117 <p><?php
     1115<div id="request-filesystem-credentials-form" class="request-filesystem-credentials-form">
     1116<h3 id="request-filesystem-credentials-title"><?php _e( 'Connection Information' ) ?></h3>
     1117<p id="request-filesystem-credentials-desc"><?php
    11181118        $label_user = __('Username');
    11191119        $label_pass = __('Password');
    11201120        _e('To perform the requested action, WordPress needs to access your web server.');
    … …  
    11331133        }
    11341134        _e('If you do not remember your credentials, you should contact your web host.');
    11351135?></p>
    1136 <table class="form-table">
    1137 <tr>
    1138 <th scope="row"><label for="hostname"><?php _e('Hostname') ?></label></th>
    1139 <td><input name="hostname" type="text" id="hostname" value="<?php echo esc_attr($hostname); if ( !empty($port) ) echo ":$port"; ?>"<?php disabled( defined('FTP_HOST') ); ?> size="40" /></td>
    1140 </tr>
    1141 
    1142 <tr>
    1143 <th scope="row"><label for="username"><?php echo $label_user; ?></label></th>
    1144 <td><input name="username" type="text" id="username" value="<?php echo esc_attr($username) ?>"<?php disabled( defined('FTP_USER') ); ?> size="40" /></td>
    1145 </tr>
    1146 
    1147 <tr>
    1148 <th scope="row"><label for="password"><?php echo $label_pass; ?></label></th>
    1149 <td><div><input name="password" type="password" id="password" value="<?php if ( defined('FTP_PASS') ) echo '*****'; ?>"<?php disabled( defined('FTP_PASS') ); ?> size="40" /></div>
    1150 <div><em><?php if ( ! defined('FTP_PASS') ) _e( 'This password will not be stored on the server.' ); ?></em></div></td>
    1151 </tr>
    1152 
     1136<label for="hostname">
     1137        <span class="field-title"><?php _e( 'Hostname' ) ?></span>
     1138        <input name="hostname" type="text" id="hostname" aria-describedby="request-filesystem-credentials-desc" class="code" placeholder="<?php esc_attr_e( __( 'example: www.mysite.com' ) ) ?>" value="<?php echo esc_attr($hostname); if ( !empty($port) ) echo ":$port"; ?>"<?php disabled( defined('FTP_HOST') ); ?> />
     1139</label>
     1140<div class="ftp-username">
     1141        <label for="username">
     1142                <span class="field-title"><?php echo $label_user; ?></span>
     1143                <input name="username" type="text" id="username" value="<?php echo esc_attr($username) ?>"<?php disabled( defined('FTP_USER') ); ?> />
     1144        </label>
     1145</div>
     1146<div class="ftp-password">
     1147        <label for="password">
     1148                <span class="field-title"><?php echo $label_pass; ?></span>
     1149                <input name="password" type="password" id="password" value="<?php if ( defined('FTP_PASS') ) echo '*****'; ?>"<?php disabled( defined('FTP_PASS') ); ?> />
     1150                <em><?php if ( ! defined('FTP_PASS') ) _e( 'This password will not be stored on the server.' ); ?></em>
     1151        </label>
     1152</div>
    11531153<?php if ( isset($types['ssh']) ) : ?>
    1154 <tr id="ssh_keys" style="<?php if ( 'ssh' != $connection_type ) echo 'display:none' ?>">
    1155 <th scope="row"><?php _e('Authentication Keys') ?>
    1156 <div class="key-labels textright">
    1157 <label for="public_key"><?php _e('Public Key:') ?></label ><br />
    1158 <label for="private_key"><?php _e('Private Key:') ?></label>
    1159 </div></th>
    1160 <td><br /><input name="public_key" type="text" id="public_key" value="<?php echo esc_attr($public_key) ?>"<?php disabled( defined('FTP_PUBKEY') ); ?> size="40" />
    1161         <br /><input name="private_key" type="text" id="private_key" value="<?php echo esc_attr($private_key) ?>"<?php disabled( defined('FTP_PRIKEY') ); ?> size="40" />
    1162 <div><?php _e('Enter the location on the server where the keys are located. If a passphrase is needed, enter that in the password field above.') ?></div></td>
    1163 </tr>
     1154<h4><?php _e('Authentication Keys') ?></h4>
     1155<label for="public_key">
     1156        <span class="field-title"><?php _e('Public Key:') ?></span>
     1157        <input name="public_key" type="text" id="public_key" aria-describedby="auth-keys-desc" value="<?php echo esc_attr($public_key) ?>"<?php disabled( defined('FTP_PUBKEY') ); ?> />
     1158</label>
     1159<label for="private_key">
     1160        <span class="field-title"><?php _e('Private Key:') ?></span>
     1161        <input name="private_key" type="text" id="private_key" value="<?php echo esc_attr($private_key) ?>"<?php disabled( defined('FTP_PRIKEY') ); ?> />
     1162</label>
     1163<span id="auth-keys-desc"><?php _e('Enter the location on the server where the public and private keys are located. If a passphrase is needed, enter that in the password field above.') ?></span>
    11641164<?php endif; ?>
    1165 
    1166 <tr>
    1167 <th scope="row"><?php _e('Connection Type') ?></th>
    1168 <td>
     1165<h4><?php _e('Connection Type') ?></h4>
    11691166<fieldset><legend class="screen-reader-text"><span><?php _e('Connection Type') ?></span></legend>
    11701167<?php
    11711168        $disabled = disabled( (defined('FTP_SSL') && FTP_SSL) || (defined('FTP_SSH') && FTP_SSH), true, false );
    … …  
    11761173        </label>
    11771174        <?php endforeach; ?>
    11781175</fieldset>
    1179 </td>
    1180 </tr>
    1181 </table>
    1182 
    11831176<?php
    11841177foreach ( (array) $extra_fields as $field ) {
    11851178        if ( isset( $_POST[ $field ] ) )
    11861179                echo '<input type="hidden" name="' . esc_attr( $field ) . '" value="' . esc_attr( wp_unslash( $_POST[ $field ] ) ) . '" />';
    11871180}
    1188 submit_button( __( 'Proceed' ), 'button', 'upgrade' );
    11891181?>
     1182        <p class="request-filesystem-credentials-action-buttons">
     1183                <button class="button cancel-button" data-js-action="close" type="button"><?php _e( 'Cancel' ); ?></button>
     1184                <?php submit_button( __( 'Proceed' ), 'button', 'upgrade', false ); ?>
     1185        </p>
    11901186</div>
    11911187</form>
    11921188<?php
    … …  
    11941190}
    11951191
    11961192/**
    1197  * Print the credentials modal when needed 
     1193 * Print the credentials modal when needed
    11981194 *
    11991195 * @since 4.2.0
    12001196 */
    … …  
    12101206        ?>
    12111207        <div id="request-filesystem-credentials-dialog" class="notification-dialog-wrap request-filesystem-credentials-dialog">
    12121208                <div class="notification-dialog-background"></div>
    1213                 <div class="notification-dialog">
     1209                <div class="notification-dialog" role="dialog" aria-labelledby="request-filesystem-credentials-title" tabindex="0">
    12141210                        <div class="request-filesystem-credentials-dialog-content">
    12151211                                <?php request_filesystem_credentials( site_url() ); ?>
    12161212                        <div>

  • src/wp-admin/js/updates.js

     
    392392         *
    393393         * @since 4.2.0
    394394         */
    395         wp.updates.requestFilesystemCredentials = function() {
     395        wp.updates.requestFilesystemCredentials = function( event ) {
    396396                if ( wp.updates.updateDoneSuccessfully === false ) {
     397                        var $dialog = $( '#request-filesystem-credentials-dialog' );
     398                        // Get the clicked element
     399                        wp.updates.activeEl = $( event.target );
     400
    397401                        wp.updates.updateLock = true;
    398402                        $( 'body' ).addClass( 'modal-open' );
    399                         $( '#request-filesystem-credentials-dialog' ).show();
     403                        $dialog.show();
     404
     405                        // Set focus to the modal first input
     406                        $dialog.find( '#hostname' ).focus();
     407                        // Bind keydown event handler
     408                        $dialog.keydown( wp.updates.keydown );
    400409                }
    401410        };
    402411
     412        /**
     413         * Close on Escape and constrain keyboard navigation inside the Credentials modal.
     414         *
     415         * @since 4.2.0
     416         */
     417        wp.updates.keydown = function( event ) {
     418                var id,
     419                        key = event.keyCode || event.charCode;
     420
     421                if ( 27 === key ) {
     422                        wp.updates.dialogClose();
     423                } else if ( 9 === key ) {
     424                        id = event.target.id;
     425                        // #upgrade button must always be the last focusable element in the dialog.
     426                        if ( id === 'upgrade' && ! event.shiftKey ) {
     427                                $( '#hostname' ).focus();
     428                                event.preventDefault();
     429                        } else if ( id === 'hostname' && event.shiftKey ) {
     430                                $( '#upgrade' ).focus();
     431                                event.preventDefault();
     432                        }
     433                }
     434        };
     435
     436        /**
     437         * Store the active element that was clicked before the Credentials modal opens.
     438         *
     439         * @since 4.2.0
     440         *
     441         * @var jQuery object
     442         */
     443        wp.updates.activeEl = null;
     444
     445        /**
     446         * Store the active update row.
     447         *
     448         * @since 4.2.0
     449         *
     450         * @var jQuery object
     451         */
     452        wp.updates.updateRow = null;
     453
    403454        $( document ).ready( function() {
    404455                /*
    405456                 * Check whether a user needs to submit filesystem credentials based on whether
    … …  
    419470                        wp.updates.filesystemCredentials.ssh.publicKey = $('#public_key').val();
    420471                        wp.updates.filesystemCredentials.ssh.privateKey = $('#private_key').val();
    421472
    422                         $( '#request-filesystem-credentials-dialog' ).hide();
    423                         $( 'body' ).removeClass( 'modal-open' );
     473                        wp.updates.dialogClose();
    424474
    425475                        // Unlock and invoke the queue.
    426476                        wp.updates.updateLock = false;
    … …  
    429479                        return false;
    430480                });
    431481
     482                wp.updates.dialogClose = function() {
     483                        var slug;
     484
     485                        $( '#request-filesystem-credentials-dialog' ).hide();
     486                        $( 'body' ).removeClass( 'modal-open' );
     487                        // Plugin updates: set focus back to the Select checkbox.
     488                        if ( wp.updates.updateRow ) {
     489                                slug = wp.updates.updateRow.data( 'slug' );
     490                                $( '#' + slug ).find( '.check-column input' ).focus();
     491                        // Plugin install: set focus back to the Install button.
     492                        } else {
     493                                wp.updates.activeEl.focus();
     494                        }
     495                };
     496
     497                $( '#request-filesystem-credentials-dialog [data-js-action="close"], #request-filesystem-credentials-dialog' ).on( 'click', function() {
     498                        wp.updates.dialogClose();
     499                });
     500
    432501                // Click handler for plugin updates in List Table view.
    433502                $( '.plugin-update-tr .update-link' ).on( 'click', function( e ) {
    434503                        e.preventDefault();
    435504                        if ( wp.updates.shouldRequestFilesystemCredentials && ! wp.updates.updateLock ) {
    436                                 wp.updates.requestFilesystemCredentials();
     505                                wp.updates.requestFilesystemCredentials( e );
    437506                        }
    438                         var $row = $( e.target ).parents( '.plugin-update-tr' );
    439                         wp.updates.updatePlugin( $row.data( 'plugin' ), $row.data( 'slug' ) );
     507                        wp.updates.updateRow = $( e.target ).parents( '.plugin-update-tr' );
     508                        wp.updates.updatePlugin( wp.updates.updateRow.data( 'plugin' ), wp.updates.updateRow.data( 'slug' ) );
    440509                } );
    441510
    442511                $( '#bulk-action-form' ).on( 'submit', function( e ) {
    … …  
    466535                $( '.plugin-card .install-now' ).on( 'click', function( e ) {
    467536                        e.preventDefault();
    468537                        if ( wp.updates.shouldRequestFilesystemCredentials && ! wp.updates.updateLock ) {
    469                                 wp.updates.requestFilesystemCredentials();
     538                                wp.updates.requestFilesystemCredentials( e );
    470539                        }
    471540                        var $button = $( e.target );
    472541                        if ( $button.hasClass( 'button-disabled' ) ) {