Skip to content

Commit a136b18

Browse files
joedolsonjoedolson
committed
Caps lock warning improvements
Move caps lock warning output to JS to reduce code duplication; fix issue where changes were not registered in capslock key pressed; improve comments; styling changes.
1 parent 325b0ef commit a136b18

File tree

5 files changed

+22
-48
lines changed

5 files changed

+22
-48
lines changed

‎src/js/_enqueues/admin/user-profile.js‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -346,26 +346,24 @@
346346
* @param {jQuery} $input The password input field.
347347
*/
348348
function bindCapsLockWarning( $input ) {
349-
var $capsWarning = $( '#caps-warning' ),
350-
capsLockOn = false;
349+
var $capsWarning,
350+
capsLockOn = false;
351351

352352
// Skip warning on macOS Safari + Firefox (they show native indicators).
353353
if ( isMac && ( isSafari || isFirefox ) ) {
354354
return;
355355
}
356356

357+
$capsWarning = $( '<div id="caps-warning" class="caps-warning"></div>' );
358+
$capsIcon = $( '<span class="caps-icon" aria-hidden="true"><svg viewBox="0 0 24 26" xmlns="http://www.w3.org/2000/svg" fill="#3c434a" stroke="#3c434a" stroke-width="0.5"><path d="M12 5L19 15H16V19H8V15H5L12 5Z"/><rect x="8" y="21" width="8" height="1.5" rx="0.75"/></svg></span>' );
359+
$capsText = $( '<span class="caps-warning-text">' + __( 'Caps lock is on.' ) + '</span>' );
360+
$capsWarning.append( $capsIcon, $capsText );
361+
362+
$input.parent( 'div' ).append( $capsWarning );
363+
357364
$input.on( 'keydown', function( jqEvent ) {
358365
var event = jqEvent.originalEvent;
359366

360-
// Skip CapsLock key itself.
361-
if ( ev.key === 'CapsLock' ) {
362-
if ( capsLockOn ) {
363-
capsLockOn = false;
364-
$capsWarning.hide();
365-
}
366-
return;
367-
}
368-
369367
// Skip if key is not a printable character.
370368
// Key length > 1 usually means non-printable (e.g., "Enter", "Tab").
371369
if ( event.ctrlKey || event.metaKey || event.altKey || ! event.key || event.key.length !== 1 ) {
@@ -374,13 +372,16 @@
374372

375373
var state = isCapsLockOn( event );
376374

377-
// Only react when the state changes.
375+
// React when the state changes or if caps lock is on when the user starts typing.
378376
if ( state !== capsLockOn ) {
379377
capsLockOn = state;
380378

381379
if ( capsLockOn ) {
382380
$capsWarning.show();
383-
wp.a11y.speak( __( 'Caps lock is on.' ) );
381+
// Don't duplicate existing screen reader Caps lock notifications.
382+
if ( event.key !== 'CapsLock' ) {
383+
wp.a11y.speak( __( 'Caps lock is on.' ), 'assertive' );
384+
}
384385
} else {
385386
$capsWarning.hide();
386387
}

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -717,20 +717,20 @@ fieldset label,
717717
.wp-pwd .caps-warning {
718718
display: none;
719719
position: relative;
720-
background: #f5e6ab;
720+
background: #fcf9e8;
721+
border: 1px solid #f0c33c;
722+
color: #1d2327;
721723
padding: 6px 10px;
722724
top: -8px;
723725
}
724726

725727
.wp-pwd .caps-icon {
726728
display: inline-flex;
727-
justify-content: center;
728-
background-color: #fcf9e8;
729-
width: 20px;
730-
height: 20px;
731-
border-radius: 3px;
732-
margin-right: 5px;
733-
vertical-align: middle;
729+
justify-content: center;
730+
width: 20px;
731+
height: 20px;
732+
margin-right: 5px;
733+
vertical-align: middle;
734734
}
735735

736736
.wp-pwd .caps-warning-text {

‎src/wp-admin/user-edit.php‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -698,15 +698,6 @@
698698
<div class="password-input-wrapper">
699699
<input type="password" name="pass1" id="pass1" class="regular-text" value="" autocomplete="new-password" spellcheck="false" data-pw="<?php echo esc_attr( wp_generate_password( 24 ) ); ?>" aria-describedby="pass-strength-result" />
700700
<div style="display:none" id="pass-strength-result" aria-live="polite"></div>
701-
<div id="caps-warning" class="caps-warning">
702-
<span class="caps-icon">
703-
<svg viewBox="0 0 24 26" xmlns="http://www.w3.org/2000/svg" fill="#3c434a" stroke="#3c434a" stroke-width="0.5">
704-
<path d="M12 5L19 15H16V19H8V15H5L12 5Z"/>
705-
<rect x="8" y="21" width="8" height="1.5" rx="0.75"/>
706-
</svg>
707-
</span>
708-
<span class="caps-warning-text"><?php _e( 'Caps lock is on.' ); ?></span>
709-
</div>
710701
</div>
711702
<button type="button" class="button wp-hide-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Hide password' ); ?>">
712703
<span class="dashicons dashicons-hidden" aria-hidden="true"></span>

‎src/wp-admin/user-new.php‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -602,15 +602,6 @@
602602
<div class="password-input-wrapper">
603603
<input type="password" name="pass1" id="pass1" class="regular-text" autocomplete="new-password" spellcheck="false" data-reveal="1" data-pw="<?php echo esc_attr( $initial_password ); ?>" aria-describedby="pass-strength-result" />
604604
<div style="display:none" id="pass-strength-result" aria-live="polite"></div>
605-
<div id="caps-warning" class="caps-warning">
606-
<span class="caps-icon">
607-
<svg viewBox="0 0 24 26" xmlns="http://www.w3.org/2000/svg" fill="#3c434a" stroke="#3c434a" stroke-width="0.5">
608-
<path d="M12 5L19 15H16V19H8V15H5L12 5Z"/>
609-
<rect x="8" y="21" width="8" height="1.5" rx="0.75"/>
610-
</svg>
611-
</span>
612-
<span class="caps-warning-text"><?php _e( 'Caps lock is on.' ); ?></span>
613-
</div>
614605
</div>
615606
<button type="button" class="button wp-hide-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Hide password' ); ?>">
616607
<span class="dashicons dashicons-hidden" aria-hidden="true"></span>

‎src/wp-login.php‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1522,15 +1522,6 @@ function wp_login_viewport_meta() {
15221522
<button type="button" class="button button-secondary wp-hide-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Show password' ); ?>">
15231523
<span class="dashicons dashicons-visibility" aria-hidden="true"></span>
15241524
</button>
1525-
<div id="caps-warning" class="caps-warning">
1526-
<span class="caps-icon">
1527-
<svg viewBox="0 0 24 26" xmlns="http://www.w3.org/2000/svg" fill="#3c434a" stroke="#3c434a" stroke-width="0.5">
1528-
<path d="M12 5L19 15H16V19H8V15H5L12 5Z"/>
1529-
<rect x="8" y="21" width="8" height="1.5" rx="0.75"/>
1530-
</svg>
1531-
</span>
1532-
<span class="caps-warning-text"><?php _e( 'Caps lock is on.' ); ?></span>
1533-
</div>
15341525
</div>
15351526
</div>
15361527
<?php

0 commit comments

Comments
 (0)