Passwords: Add password strength meter feedback for screen readers.

Also gives context to the show/hide button.

Props rianrietveld, afercia.
Fixes #33032.


Built from https://develop.svn.wordpress.org/trunk@33353


git-svn-id: http://core.svn.wordpress.org/trunk@33325 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Konstantin Obenland 2015-07-22 00:15:25 +00:00
parent 482f174f2e
commit 45bfab3aa8
8 changed files with 19 additions and 19 deletions

View File

@ -140,12 +140,12 @@ function display_setup_form( $error = null ) {
<button type="button" class="button button-secondary wp-generate-pw hide-if-no-js"><?php _e( 'Show password' ); ?></button>
<div class="wp-pwd hide-if-js">
<?php $initial_password = wp_generate_password( 24 ); ?>
<input type="password" name="admin_password" id="pass1" class="regular-text" autocomplete="off" data-reveal="1" data-pw="<?php echo esc_attr( $initial_password ); ?>" />
<button type="button" class="button button-secondary wp-hide-pw hide-if-no-js" data-toggle="0">
<input type="password" name="admin_password" id="pass1" class="regular-text" autocomplete="off" data-reveal="1" data-pw="<?php echo esc_attr( $initial_password ); ?>" aria-describedby="pass-strength-result" />
<button type="button" class="button button-secondary wp-hide-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Hide password' ); ?>">
<span class="dashicons dashicons-visibility"></span>
<span class="text"><?php _e( 'Hide' ); ?></span>
</button>
<div id="pass-strength-result"></div>
<div id="pass-strength-result" aria-live="polite"></div>
</div>
<p><span class="description hide-if-no-js"><?php _e( 'A password reset link will be sent to you via email.' ); ?></span></p>
</td>

View File

@ -94,15 +94,13 @@
var show = pw_togglebtn.attr( 'data-toggle' );
if ( show == 1 ) {
pw_field.attr( 'type', 'text' );
pw_togglebtn.attr( 'data-toggle', 0 )
.find( '.text' )
.text( userProfileL10n.hide )
pw_togglebtn.attr({ 'data-toggle': 0, 'aria-label': userProfileL10n.ariaHide })
.find( '.text' ).text( userProfileL10n.hide )
;
} else {
pw_field.attr( 'type', 'password' );
pw_togglebtn.attr( 'data-toggle', 1 )
.find( '.text' )
.text( userProfileL10n.show )
pw_togglebtn.attr({ 'data-toggle': 1, 'aria-label': userProfileL10n.ariaShow })
.find( '.text' ).text( userProfileL10n.show )
;
}
pw_field.focus();

View File

@ -1 +1 @@
!function(a){function b(){var b,c=a("#pass1").val(),d=a("#pass2").val();if(a("#pass-strength-result").removeClass("short bad good strong"),!c)return void a("#pass-strength-result").html("&nbsp;");switch(b=wp.passwordStrength.meter(c,wp.passwordStrength.userInputBlacklist(),d)){case 2:a("#pass-strength-result").addClass("bad").html(pwsL10n.bad);break;case 3:a("#pass-strength-result").addClass("good").html(pwsL10n.good);break;case 4:a("#pass-strength-result").addClass("strong").html(pwsL10n.strong);break;case 5:a("#pass-strength-result").addClass("short").html(pwsL10n.mismatch);break;default:a("#pass-strength-result").addClass("short").html(pwsL10n["short"])}}a(function(){var b=a(".user-pass1-wrap"),c=b.find(".wp-pwd"),d=a("#pass1"),e=a("#pass2"),f=b.find(".wp-hide-pw"),g=b.find("button.wp-generate-pw"),h=a(".user-pass2-wrap"),i=b.closest("form"),j=a("#pass-strength-result"),k=a("#submit"),l=a("#createusersub"),m=a(".pw-checkbox"),n=a(".pw-weak"),o=window.generatePassword=function(){"function"!=typeof zxcvbn?setTimeout(o,50):(d.val(d.data("pw")),d.trigger("propertychange"),d.attr("type","text").focus(),d[0].setSelectionRange(100,100))};h.hide(),c.hide(),f.show(),g.show(),1==d.data("reveal")&&o(),i.on("submit",function(){e.val(d.val()),d.attr("type","password")}),d.on("input propertychange",function(){setTimeout(function(){var a=j.attr("class");d.removeClass("short bad good strong"),"undefined"!=typeof a&&(d.addClass(a),"short"==a||"bad"==a?(m.attr("checked")||(l.attr("disabled","disabled"),k.attr("disabled","disabled")),n.show()):(l.removeAttr("disabled"),k.removeAttr("disabled"),n.hide()))},1)}),m.change(function(){m.attr("checked")?(l.removeAttr("disabled"),k.removeAttr("disabled")):(l.attr("disabled","disabled"),k.attr("disabled","disabled"))}),e.on("input propertychange",function(){d.val(e.val()),d.trigger("propertychange")}),b.on("click","button.wp-generate-pw",function(){g.hide(),c.show(),o()}),f.on("click",function(){var a=f.attr("data-toggle");1==a?(d.attr("type","text"),f.attr("data-toggle",0).find(".text").text(userProfileL10n.hide)):(d.attr("type","password"),f.attr("data-toggle",1).find(".text").text(userProfileL10n.show)),d.focus(),d[0].setSelectionRange(100,100)})}),a(document).ready(function(){var c,d,e,f,g=a("#display_name");a("#pass1").val("").on("input propertychange",b),a("#pass2").val("").on("input propertychange",b),a("#pass-strength-result").show(),a(".color-palette").click(function(){a(this).siblings('input[name="admin_color"]').prop("checked",!0)}),g.length&&a("#first_name, #last_name, #nickname").bind("blur.user_profile",function(){var b=[],c={display_nickname:a("#nickname").val()||"",display_username:a("#user_login").val()||"",display_firstname:a("#first_name").val()||"",display_lastname:a("#last_name").val()||""};c.display_firstname&&c.display_lastname&&(c.display_firstlast=c.display_firstname+" "+c.display_lastname,c.display_lastfirst=c.display_lastname+" "+c.display_firstname),a.each(a("option",g),function(a,c){b.push(c.value)}),a.each(c,function(d,e){if(e){var f=e.replace(/<\/?[a-z][^>]*>/gi,"");c[d].length&&-1===a.inArray(f,b)&&(b.push(f),a("<option />",{text:f}).appendTo(g))}})}),c=a("#color-picker"),d=a("#colors-css"),e=a("input#user_id").val(),f=a('input[name="checkuser_id"]').val(),c.on("click.colorpicker",".color-option",function(){var b,c=a(this);if(!c.hasClass("selected")&&(c.siblings(".selected").removeClass("selected"),c.addClass("selected").find('input[type="radio"]').prop("checked",!0),e===f)){if(0===d.length&&(d=a('<link rel="stylesheet" />').appendTo("head")),d.attr("href",c.children(".css_url").val()),"undefined"!=typeof wp&&wp.svgPainter){try{b=a.parseJSON(c.children(".icon_colors").val())}catch(g){}b&&(wp.svgPainter.setColors(b),wp.svgPainter.paint())}a.post(ajaxurl,{action:"save-user-color-scheme",color_scheme:c.children('input[name="admin_color"]').val(),nonce:a("#color-nonce").val()}).done(function(b){b.success&&a("body").removeClass(b.data.previousScheme).addClass(b.data.currentScheme)})}})}),a("#destroy-sessions").on("click",function(b){var c=a(this);wp.ajax.post("destroy-sessions",{nonce:a("#_wpnonce").val(),user_id:a("#user_id").val()}).done(function(a){c.prop("disabled",!0),c.siblings(".notice").remove(),c.before('<div class="notice notice-success inline"><p>'+a.message+"</p></div>")}).fail(function(a){c.siblings(".notice").remove(),c.before('<div class="notice notice-error inline"><p>'+a.message+"</p></div>")}),b.preventDefault()})}(jQuery);
!function(a){function b(){var b,c=a("#pass1").val(),d=a("#pass2").val();if(a("#pass-strength-result").removeClass("short bad good strong"),!c)return void a("#pass-strength-result").html("&nbsp;");switch(b=wp.passwordStrength.meter(c,wp.passwordStrength.userInputBlacklist(),d)){case 2:a("#pass-strength-result").addClass("bad").html(pwsL10n.bad);break;case 3:a("#pass-strength-result").addClass("good").html(pwsL10n.good);break;case 4:a("#pass-strength-result").addClass("strong").html(pwsL10n.strong);break;case 5:a("#pass-strength-result").addClass("short").html(pwsL10n.mismatch);break;default:a("#pass-strength-result").addClass("short").html(pwsL10n["short"])}}a(function(){var b=a(".user-pass1-wrap"),c=b.find(".wp-pwd"),d=a("#pass1"),e=a("#pass2"),f=b.find(".wp-hide-pw"),g=b.find("button.wp-generate-pw"),h=a(".user-pass2-wrap"),i=b.closest("form"),j=a("#pass-strength-result"),k=a("#submit"),l=a("#createusersub"),m=a(".pw-checkbox"),n=a(".pw-weak"),o=window.generatePassword=function(){"function"!=typeof zxcvbn?setTimeout(o,50):(d.val(d.data("pw")),d.trigger("propertychange"),d.attr("type","text").focus(),d[0].setSelectionRange(100,100))};h.hide(),c.hide(),f.show(),g.show(),1==d.data("reveal")&&o(),i.on("submit",function(){e.val(d.val()),d.attr("type","password")}),d.on("input propertychange",function(){setTimeout(function(){var a=j.attr("class");d.removeClass("short bad good strong"),"undefined"!=typeof a&&(d.addClass(a),"short"==a||"bad"==a?(m.attr("checked")||(l.attr("disabled","disabled"),k.attr("disabled","disabled")),n.show()):(l.removeAttr("disabled"),k.removeAttr("disabled"),n.hide()))},1)}),m.change(function(){m.attr("checked")?(l.removeAttr("disabled"),k.removeAttr("disabled")):(l.attr("disabled","disabled"),k.attr("disabled","disabled"))}),e.on("input propertychange",function(){d.val(e.val()),d.trigger("propertychange")}),b.on("click","button.wp-generate-pw",function(){g.hide(),c.show(),o()}),f.on("click",function(){var a=f.attr("data-toggle");1==a?(d.attr("type","text"),f.attr({"data-toggle":0,"aria-label":userProfileL10n.ariaHide}).find(".text").text(userProfileL10n.hide)):(d.attr("type","password"),f.attr({"data-toggle":1,"aria-label":userProfileL10n.ariaShow}).find(".text").text(userProfileL10n.show)),d.focus(),d[0].setSelectionRange(100,100)})}),a(document).ready(function(){var c,d,e,f,g=a("#display_name");a("#pass1").val("").on("input propertychange",b),a("#pass2").val("").on("input propertychange",b),a("#pass-strength-result").show(),a(".color-palette").click(function(){a(this).siblings('input[name="admin_color"]').prop("checked",!0)}),g.length&&a("#first_name, #last_name, #nickname").bind("blur.user_profile",function(){var b=[],c={display_nickname:a("#nickname").val()||"",display_username:a("#user_login").val()||"",display_firstname:a("#first_name").val()||"",display_lastname:a("#last_name").val()||""};c.display_firstname&&c.display_lastname&&(c.display_firstlast=c.display_firstname+" "+c.display_lastname,c.display_lastfirst=c.display_lastname+" "+c.display_firstname),a.each(a("option",g),function(a,c){b.push(c.value)}),a.each(c,function(d,e){if(e){var f=e.replace(/<\/?[a-z][^>]*>/gi,"");c[d].length&&-1===a.inArray(f,b)&&(b.push(f),a("<option />",{text:f}).appendTo(g))}})}),c=a("#color-picker"),d=a("#colors-css"),e=a("input#user_id").val(),f=a('input[name="checkuser_id"]').val(),c.on("click.colorpicker",".color-option",function(){var b,c=a(this);if(!c.hasClass("selected")&&(c.siblings(".selected").removeClass("selected"),c.addClass("selected").find('input[type="radio"]').prop("checked",!0),e===f)){if(0===d.length&&(d=a('<link rel="stylesheet" />').appendTo("head")),d.attr("href",c.children(".css_url").val()),"undefined"!=typeof wp&&wp.svgPainter){try{b=a.parseJSON(c.children(".icon_colors").val())}catch(g){}b&&(wp.svgPainter.setColors(b),wp.svgPainter.paint())}a.post(ajaxurl,{action:"save-user-color-scheme",color_scheme:c.children('input[name="admin_color"]').val(),nonce:a("#color-nonce").val()}).done(function(b){b.success&&a("body").removeClass(b.data.previousScheme).addClass(b.data.currentScheme)})}})}),a("#destroy-sessions").on("click",function(b){var c=a(this);wp.ajax.post("destroy-sessions",{nonce:a("#_wpnonce").val(),user_id:a("#user_id").val()}).done(function(a){c.prop("disabled",!0),c.siblings(".notice").remove(),c.before('<div class="notice notice-success inline"><p>'+a.message+"</p></div>")}).fail(function(a){c.siblings(".notice").remove(),c.before('<div class="notice notice-error inline"><p>'+a.message+"</p></div>")}),b.preventDefault()})}(jQuery);

View File

@ -464,12 +464,12 @@ if ( $show_password_fields ) :
<input class="hidden" value=" " /><!-- #24364 workaround -->
<button type="button" class="button button-secondary wp-generate-pw hide-if-no-js"><?php _e( 'Generate new password' ); ?></button>
<div class="wp-pwd hide-if-js">
<input type="password" name="pass1" id="pass1" class="regular-text" value="" autocomplete="off" data-pw="<?php echo esc_attr( wp_generate_password( 24 ) ); ?>" />
<button type="button" class="button button-secondary wp-hide-pw hide-if-no-js" data-toggle="0">
<input type="password" name="pass1" id="pass1" class="regular-text" value="" autocomplete="off" data-pw="<?php echo esc_attr( wp_generate_password( 24 ) ); ?>" aria-describedby="pass-strength-result" />
<button type="button" class="button button-secondary wp-hide-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Hide password' ); ?>">
<span class="dashicons dashicons-visibility"></span>
<span class="text"><?php _e( 'Hide' ); ?></span>
</button>
<div style="display:none" id="pass-strength-result"></div>
<div style="display:none" id="pass-strength-result" aria-live="polite"></div>
</div>
</td>
</tr>

View File

@ -402,12 +402,12 @@ if ( apply_filters( 'show_password_fields', true ) ) : ?>
<button type="button" class="button button-secondary wp-generate-pw hide-if-no-js"><?php _e( 'Show password' ); ?></button>
<div class="wp-pwd hide-if-js">
<?php $initial_password = wp_generate_password( 24 ); ?>
<input type="password" name="pass1" id="pass1" class="regular-text" autocomplete="off" data-reveal="1" data-pw="<?php echo esc_attr( $initial_password ); ?>" />
<button type="button" class="button button-secondary wp-hide-pw hide-if-no-js" data-toggle="0">
<input type="password" name="pass1" id="pass1" class="regular-text" autocomplete="off" data-reveal="1" data-pw="<?php echo esc_attr( $initial_password ); ?>" aria-describedby="pass-strength-result" />
<button type="button" class="button button-secondary wp-hide-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Hide password' ); ?>">
<span class="dashicons dashicons-visibility"></span>
<span class="text"><?php _e( 'Hide' ); ?></span>
</button>
<div style="display:none" id="pass-strength-result"></div>
<div style="display:none" id="pass-strength-result" aria-live="polite"></div>
</div>
<p><span class="description"><?php _e( 'A password reset link will be sent to the user via email.' ); ?></span></p>
</td>

View File

@ -376,6 +376,8 @@ function wp_default_scripts( &$scripts ) {
did_action( 'init' ) && $scripts->localize( 'user-profile', 'userProfileL10n', array(
'show' => __( 'Show' ),
'hide' => __( 'Hide' ),
'ariaShow' => esc_attr__( 'Show password' ),
'ariaHide' => esc_attr__( 'Hide password' ),
) );
$scripts->add( 'language-chooser', "/wp-admin/js/language-chooser$suffix.js", array( 'jquery' ), false, 1 );

View File

@ -4,7 +4,7 @@
*
* @global string $wp_version
*/
$wp_version = '4.3-beta3-33352';
$wp_version = '4.3-beta3-33353';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.

View File

@ -655,8 +655,8 @@ case 'rp' :
<p class="user-pass1-wrap">
<label for="pass1"><?php _e('New password') ?></label><br />
<div class="wp-pwd">
<input type="password" data-reveal="1" data-pw="<?php echo esc_attr( wp_generate_password( 24 ) ); ?>" name="pass1" id="pass1" class="input" size="20" value="" autocomplete="off" />
<div id="pass-strength-result" class="hide-if-no-js"><?php _e( 'Strength indicator' ); ?></div>
<input type="password" data-reveal="1" data-pw="<?php echo esc_attr( wp_generate_password( 24 ) ); ?>" name="pass1" id="pass1" class="input" size="20" value="" autocomplete="off" aria-describedby="pass-strength-result" />
<div id="pass-strength-result" class="hide-if-no-js" aria-live="polite"><?php _e( 'Strength indicator' ); ?></div>
</div>
</p>
<p class="user-pass2-wrap">