Skip to content

Commit 9144551

Browse files
nikunj8866nikunj8866
committed
Changed notification color to yellow, Added screen readers capabilities and used KeyboardEvent.getModifierState() for checking
1 parent 245a022 commit 9144551

File tree

6 files changed

+35
-81
lines changed

6 files changed

+35
-81
lines changed

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

Lines changed: 29 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -85,14 +85,16 @@
8585

8686
/**
8787
* Monitors the Caps Lock status while the user is typing in the password input field.
88-
* If Caps Lock is detected to be ON, a warning message is shown.
89-
* The warning is hidden when the input field loses focus or when Caps Lock is OFF.
88+
*
89+
* Shows a warning if Caps Lock is detected. Also uses wp.a11y.speak()
90+
* for screen readers. Hides the warning on blur or when Caps Lock is not on.
9091
*/
9192
var $capsWarning = $( '#caps-warning' );
9293

93-
$pass1.on( 'keypress', function( e ) {
94-
if ( isCapsLockOn( e ) ) {
94+
$pass1.on( 'keydown', function( e ) {
95+
if ( isCapsLockOn( e.originalEvent || e ) ) {
9596
$capsWarning.show();
97+
wp.a11y.speak( __( 'Caps lock is on.' ) );
9698
} else {
9799
$capsWarning.hide();
98100
}
@@ -230,14 +232,16 @@
230232

231233
/**
232234
* Monitors the Caps Lock status while the user is typing in the password input field.
233-
* If Caps Lock is detected to be ON, a warning message is shown.
234-
* The warning is hidden when the input field loses focus or when Caps Lock is OFF.
235+
*
236+
* Shows a warning if Caps Lock is detected. Also uses wp.a11y.speak()
237+
* for screen readers. Hides the warning on blur or when Caps Lock is not on.
235238
*/
236239
var $capsWarning = $( '#caps-warning' );
237240

238-
$pass1.on( 'keypress', function( e ) {
239-
if ( isCapsLockOn( e ) ) {
241+
$pass1.on( 'keydown', function( e ) {
242+
if ( isCapsLockOn( e.originalEvent || e ) ) {
240243
$capsWarning.show();
244+
wp.a11y.speak( __( 'Caps lock is on.' ) );
241245
} else {
242246
$capsWarning.hide();
243247
}
@@ -369,23 +373,28 @@
369373
}
370374

371375
/**
372-
* Determines if the Caps Lock is on based on keypress event.
376+
* Determines if Caps Lock is currently enabled.
377+
*
378+
* Uses `KeyboardEvent.getModifierState()` when available, with a fallback
379+
* for older browsers. On macOS Safari and Chrome, the native warning is preferred,
380+
* so this function returns false to suppress custom warnings.
381+
*
382+
* @param {KeyboardEvent} e The keydown event object.
383+
*
384+
* @return {boolean} True if Caps Lock is on, false otherwise.
373385
*/
374386
function isCapsLockOn( e ) {
375-
const char = String.fromCharCode( e.which || e.keyCode );
376-
377-
// Skip non-printable characters
378-
if (!char.match(/[a-zA-Z]/)) return false;
379-
380-
// Skip warning on macOS Safari or Chrome (they show native caps lock warnings)
381-
if ( isMac && ( ua.indexOf( 'safari' ) !== -1 || ua.indexOf( 'chrome' ) !== -1 ) ) {
387+
// Skip warning on macOS Safari or Chrome (they show native indicators).
388+
if (
389+
isMac &&
390+
( ua.indexOf( 'safari' ) !== -1 || ua.indexOf( 'chrome' ) !== -1 )
391+
) {
382392
return false;
383393
}
384394

385-
return (
386-
(char === char.toUpperCase() && !e.shiftKey) ||
387-
(char === char.toLowerCase() && e.shiftKey)
388-
);
395+
if ( typeof e.getModifierState === 'function' ) {
396+
return e.getModifierState( 'CapsLock' );
397+
}
389398
}
390399

391400
function showOrHideWeakPasswordCheckbox() {

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -723,7 +723,7 @@ fieldset label,
723723
.wp-pwd .caps-warning {
724724
display: none;
725725
position: absolute;
726-
background: #FFE9DE;
726+
background: #FFFDD6;
727727
border: 1px solid #ddd;
728728
border-radius: 3px;
729729
color: #1E1E20;
@@ -755,13 +755,13 @@ fieldset label,
755755
margin-left: -7px;
756756
border-width: 7px;
757757
border-style: solid;
758-
border-color: transparent transparent #FFE9DE transparent;
758+
border-color: transparent transparent #FFFDD6 transparent;
759759
}
760760

761761
.wp-pwd .caps-icon {
762762
display: inline-flex;
763763
justify-content: center;
764-
background-color: #E26F56;
764+
background-color: #FFF972;
765765
width: 20px;
766766
height: 20px;
767767
border-radius: 3px;

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

Lines changed: 0 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -452,61 +452,6 @@ input::-ms-reveal {
452452
margin-bottom: 0;
453453
}
454454

455-
/* Caps lock warning */
456-
.login .caps-warning {
457-
display: none;
458-
position: absolute;
459-
background: #FFE9DE;
460-
border: 1px solid #ddd;
461-
border-radius: 3px;
462-
color: #1E1E20;
463-
font-size: 13px;
464-
padding: 6px 10px;
465-
top: calc(100% - 10px);
466-
left: 24px;
467-
white-space: nowrap;
468-
z-index: 10;
469-
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
470-
}
471-
472-
.login .caps-warning::before {
473-
content: '';
474-
position: absolute;
475-
bottom: 100%;
476-
left: 15px;
477-
margin-left: -8px;
478-
border-width: 8px;
479-
border-style: solid;
480-
border-color: transparent transparent #ddd transparent;
481-
}
482-
483-
.login .caps-warning::after {
484-
content: '';
485-
position: absolute;
486-
bottom: 100%;
487-
left: 15px;
488-
margin-left: -7px;
489-
border-width: 7px;
490-
border-style: solid;
491-
border-color: transparent transparent #FFE9DE transparent;
492-
}
493-
494-
.login .caps-icon {
495-
display: inline-flex;
496-
justify-content: center;
497-
background-color: #E26F56;
498-
width: 20px;
499-
height: 20px;
500-
border-radius: 3px;
501-
margin-right: 5px;
502-
vertical-align: middle;
503-
}
504-
505-
.login .caps-warning-text {
506-
vertical-align: middle;
507-
}
508-
/* Caps lock warning */
509-
510455
@media screen and (max-height: 550px) {
511456
#login {
512457
padding: 20px 0;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -691,7 +691,7 @@
691691
</button>
692692
<div id="caps-warning" class="caps-warning">
693693
<span class="caps-icon">
694-
<svg viewBox="0 0 24 26" xmlns="http://www.w3.org/2000/svg" fill="white" stroke="white" stroke-width="0.5">
694+
<svg viewBox="0 0 24 26" xmlns="http://www.w3.org/2000/svg" fill="#2c3338" stroke="#2c3338" stroke-width="0.5">
695695
<path d="M12 5L19 15H16V19H8V15H5L12 5Z"/>
696696
<rect x="8" y="21" width="8" height="1.5" rx="0.75"/>
697697
</svg>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -609,7 +609,7 @@
609609
</button>
610610
<div id="caps-warning" class="caps-warning">
611611
<span class="caps-icon">
612-
<svg viewBox="0 0 24 26" xmlns="http://www.w3.org/2000/svg" fill="white" stroke="white" stroke-width="0.5">
612+
<svg viewBox="0 0 24 26" xmlns="http://www.w3.org/2000/svg" fill="#2c3338" stroke="#2c3338" stroke-width="0.5">
613613
<path d="M12 5L19 15H16V19H8V15H5L12 5Z"/>
614614
<rect x="8" y="21" width="8" height="1.5" rx="0.75"/>
615615
</svg>

‎src/wp-login.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1524,7 +1524,7 @@ function wp_login_viewport_meta() {
15241524
</button>
15251525
<div id="caps-warning" class="caps-warning">
15261526
<span class="caps-icon">
1527-
<svg viewBox="0 0 24 26" xmlns="http://www.w3.org/2000/svg" fill="white" stroke="white" stroke-width="0.5">
1527+
<svg viewBox="0 0 24 26" xmlns="http://www.w3.org/2000/svg" fill="#2c3338" stroke="#2c3338" stroke-width="0.5">
15281528
<path d="M12 5L19 15H16V19H8V15H5L12 5Z"/>
15291529
<rect x="8" y="21" width="8" height="1.5" rx="0.75"/>
15301530
</svg>

0 commit comments

Comments
 (0)