WordPress.org
Get WordPress

Make WordPress Core


Ignore:
Timestamp:
04/01/2015 02:47:55 AM (11 years ago)
Author:
jorbin
Message:

Refine UI for FTP modal and shiny updates

Numerous changes to make the FTP modal experience a good one. These include:

  • Update HTML used by both the form here and the form on the standalone screen
  • Allow users to cancel FTP install
  • Focus locking in the modal
  • Focus on modal form on load
  • ARIA Attributes
  • Style Enhancements
  • Add low screen height (such as phone and some tablets) friendly experience for entering credentials

Props ericlewis, afercia
Fixes #31608

File:
1 edited

Legend:

Unmodified
Added
Removed

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

    r31936 r31949  
    11261126</script>
    11271127<form action="<?php echo esc_url( $form_post ) ?>" method="post">
    1128 <div>
    1129 <h3><?php _e('Connection Information') ?></h3>
    1130 <p><?php
     1128<div id="request-filesystem-credentials-form" class="request-filesystem-credentials-form">
     1129<h3 id="request-filesystem-credentials-title"><?php _e( 'Connection Information' ) ?></h3>
     1130<p id="request-filesystem-credentials-desc"><?php
    11311131    $label_user = __('Username');
    11321132    $label_pass = __('Password');
    … …  
    11471147    _e('If you do not remember your credentials, you should contact your web host.');
    11481148?></p>
    1149 <table class="form-table">
    1150 <tr>
    1151 <th scope="row"><label for="hostname"><?php _e('Hostname') ?></label></th>
    1152 <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>
    1153 </tr>
    1154 
    1155 <tr>
    1156 <th scope="row"><label for="username"><?php echo $label_user; ?></label></th>
    1157 <td><input name="username" type="text" id="username" value="<?php echo esc_attr($username) ?>"<?php disabled( defined('FTP_USER') ); ?> size="40" /></td>
    1158 </tr>
    1159 
    1160 <tr>
    1161 <th scope="row"><label for="password"><?php echo $label_pass; ?></label></th>
    1162 <td><div><input name="password" type="password" id="password" value="<?php if ( defined('FTP_PASS') ) echo '*****'; ?>"<?php disabled( defined('FTP_PASS') ); ?> size="40" /></div>
    1163 <div><em><?php if ( ! defined('FTP_PASS') ) _e( 'This password will not be stored on the server.' ); ?></em></div></td>
    1164 </tr>
    1165 
     1149<label for="hostname">
     1150    <span class="field-title"><?php _e( 'Hostname' ) ?></span>
     1151    <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') ); ?> />
     1152</label>
     1153<div class="ftp-username">
     1154    <label for="username">
     1155        <span class="field-title"><?php echo $label_user; ?></span>
     1156        <input name="username" type="text" id="username" value="<?php echo esc_attr($username) ?>"<?php disabled( defined('FTP_USER') ); ?> />
     1157    </label>
     1158</div>
     1159<div class="ftp-password">
     1160    <label for="password">
     1161        <span class="field-title"><?php echo $label_pass; ?></span>
     1162        <input name="password" type="password" id="password" value="<?php if ( defined('FTP_PASS') ) echo '*****'; ?>"<?php disabled( defined('FTP_PASS') ); ?> />
     1163        <em><?php if ( ! defined('FTP_PASS') ) _e( 'This password will not be stored on the server.' ); ?></em>
     1164    </label>
     1165</div>
    11661166<?php if ( isset($types['ssh']) ) : ?>
    1167 <tr id="ssh_keys" style="<?php if ( 'ssh' != $connection_type ) echo 'display:none' ?>">
    1168 <th scope="row"><?php _e('Authentication Keys') ?>
    1169 <div class="key-labels textright">
    1170 <label for="public_key"><?php _e('Public Key:') ?></label ><br />
    1171 <label for="private_key"><?php _e('Private Key:') ?></label>
    1172 </div></th>
    1173 <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" />
    1174     <br /><input name="private_key" type="text" id="private_key" value="<?php echo esc_attr($private_key) ?>"<?php disabled( defined('FTP_PRIKEY') ); ?> size="40" />
    1175 <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>
    1176 </tr>
     1167<h4><?php _e('Authentication Keys') ?></h4>
     1168<label for="public_key">
     1169    <span class="field-title"><?php _e('Public Key:') ?></span>
     1170    <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') ); ?> />
     1171</label>
     1172<label for="private_key">
     1173    <span class="field-title"><?php _e('Private Key:') ?></span>
     1174    <input name="private_key" type="text" id="private_key" value="<?php echo esc_attr($private_key) ?>"<?php disabled( defined('FTP_PRIKEY') ); ?> />
     1175</label>
     1176<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>
    11771177<?php endif; ?>
    1178 
    1179 <tr>
    1180 <th scope="row"><?php _e('Connection Type') ?></th>
    1181 <td>
     1178<h4><?php _e('Connection Type') ?></h4>
    11821179<fieldset><legend class="screen-reader-text"><span><?php _e('Connection Type') ?></span></legend>
    11831180<?php
    … …  
    11901187    <?php endforeach; ?>
    11911188</fieldset>
    1192 </td>
    1193 </tr>
    1194 </table>
    1195 
    11961189<?php
    11971190foreach ( (array) $extra_fields as $field ) {
    … …  
    11991192        echo '<input type="hidden" name="' . esc_attr( $field ) . '" value="' . esc_attr( wp_unslash( $_POST[ $field ] ) ) . '" />';
    12001193}
    1201 submit_button( __( 'Proceed' ), 'button', 'upgrade' );
    12021194?>
     1195    <p class="request-filesystem-credentials-action-buttons">
     1196        <button class="button cancel-button" data-js-action="close" type="button"><?php _e( 'Cancel' ); ?></button>
     1197        <?php submit_button( __( 'Proceed' ), 'button', 'upgrade', false ); ?>
     1198    </p>
    12031199</div>
    12041200</form>
    … …  
    12241220    <div id="request-filesystem-credentials-dialog" class="notification-dialog-wrap request-filesystem-credentials-dialog">
    12251221        <div class="notification-dialog-background"></div>
    1226         <div class="notification-dialog">
     1222        <div class="notification-dialog" role="dialog" aria-labelledby="request-filesystem-credentials-title" tabindex="0">
    12271223            <div class="request-filesystem-credentials-dialog-content">
    12281224                <?php request_filesystem_credentials( site_url() ); ?>
Note: See TracChangeset for help on using the changeset viewer.