Add Caps lock message to login screen

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

@@ -20,7 +20,11 @@
 		$form,
 		originalFormContent,
 		$passwordWrapper,
-		successTimeout;
+		successTimeout,
+		isMac = window.navigator.platform ? window.navigator.platform.indexOf( 'Mac' ) !== -1 : false, 
+		ua = navigator.userAgent.toLowerCase(),
+		isSafari = ua.indexOf( 'safari' ) !== -1 && ua.indexOf( 'chrome' ) === -1,
+		isFirefox = ua.indexOf( 'firefox' ) !== -1;
 
 	function generatePassword() {
 		if ( typeof zxcvbn !== 'function' ) {
@@ -80,6 +84,8 @@
 			$pass1.removeClass( 'short bad good strong' );
 			showOrHideWeakPasswordCheckbox();
 		} );
+
+		bindCapsLockWarning( $pass1 );
 	}
 
 	function resetToggle( show ) {
@@ -213,6 +219,8 @@
 		} else {
 			// Password field for the login form.
 			$pass1 = $( '#user_pass' );
+
+			bindCapsLockWarning( $pass1 );
 		}
 
 		/*
@@ -332,6 +340,71 @@
 		}
 	}
 
+	/**
+	 * Binds Caps Lock detection to a given password input field.
+	 *
+	 * @param {jQuery} $input The password input field.
+	 */
+	function bindCapsLockWarning( $input ) {
+		var $capsWarning = $( '#caps-warning' ),
+			capsLockOn   = false;
+
+		$input.on( 'keydown', function( e ) {
+			var ev = e.originalEvent || e;
+
+			// Skip CapsLock key itself.
+			if ( ev.key === 'CapsLock' ) {
+				return;
+			}
+
+			// Skip if key is not a printable character.
+			// Key length > 1 usually means non-printable (e.g., "Enter", "Tab").
+			if ( ev.ctrlKey || ev.metaKey || ev.altKey || ! ev.key || ev.key.length !== 1 ) {
+				return;
+			}
+
+			var state = isCapsLockOn( ev );
+
+			// Only react when the state changes.
+			if ( state !== capsLockOn ) {
+				capsLockOn = state;
+
+				if ( capsLockOn ) {
+					$capsWarning.show();
+					wp.a11y.speak( __( 'Caps lock is on.' ) );
+				} else {
+					$capsWarning.hide();
+				}
+			}
+		} );
+
+		$input.on( 'blur', function() {
+			capsLockOn = false;
+			$capsWarning.hide();
+		} );
+	}
+
+	/**
+	 * Determines if Caps Lock is currently enabled.
+	 *
+	 * On macOS Safari and Firefox, the native warning is preferred,
+	 * so this function returns false to suppress custom warnings.
+	 *
+	 * @param {KeyboardEvent} e The keydown event object.
+	 *
+	 * @return {boolean} True if Caps Lock is on, false otherwise. 
+	 */
+	function isCapsLockOn( e ) {
+		// Skip warning on macOS Safari + Firefox (they show native indicators).
+		if ( isMac && ( isSafari || isFirefox ) ) {
+			return false;
+		}
+
+		if ( typeof e.getModifierState === 'function' ) {
+			return e.getModifierState( 'CapsLock' );
+		}
+	}
+
 	function showOrHideWeakPasswordCheckbox() {
 		var passStrengthResult = $('#pass-strength-result');
 

src/wp-admin/css/forms.css

@@ -714,6 +714,61 @@ fieldset label,
 	display: inline-block;
 }
 
+/* Caps lock warning */
+.wp-pwd .caps-warning {
+	display: none;
+	position: absolute;
+	background: #FFFDD6;
+	border: 1px solid #ddd;
+	border-radius: 3px;
+	color: #1E1E20;
+	font-size: 13px;
+	padding: 6px 10px;
+	top: calc(100% - 25px);
+	left: 24px;
+	white-space: nowrap;
+	z-index: 10;
+	box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+}
+
+.wp-pwd .caps-warning::before {
+	content: '';
+	position: absolute;
+	bottom: 100%;
+	left: 15px;
+	margin-left: -8px;
+	border-width: 8px;
+	border-style: solid;
+	border-color: transparent transparent #ddd transparent;
+}
+
+.wp-pwd .caps-warning::after {
+	content: '';
+	position: absolute;
+	bottom: 100%;
+	left: 15px;
+	margin-left: -7px;
+	border-width: 7px;
+	border-style: solid;
+	border-color: transparent transparent #FFFDD6 transparent;
+}
+
+.wp-pwd .caps-icon {
+	display: inline-flex;
+    justify-content: center;
+    background-color: #FFF972;
+    width: 20px;
+    height: 20px;
+    border-radius: 3px;
+    margin-right: 5px;
+    vertical-align: middle;
+}
+
+.wp-pwd .caps-warning-text {
+	vertical-align: middle;
+}
+/* Caps lock warning */
+
 p.search-box {
 	display: flex;
 	flex-wrap: wrap;

src/wp-admin/user-edit.php

@@ -707,6 +707,15 @@
 											<span class="dashicons dashicons-no" aria-hidden="true"></span>
 											<span class="text"><?php _e( 'Cancel' ); ?></span>
 										</button>
+										<div id="caps-warning" class="caps-warning">
+											<span class="caps-icon">
+												<svg viewBox="0 0 24 26" xmlns="http://www.w3.org/2000/svg" fill="#2c3338" stroke="#2c3338" 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>
+											<span class="caps-warning-text"><?php _e( 'Caps lock is on.' ); ?></span>
+										</div>
 									</div>
 								</td>
 							</tr>

src/wp-admin/user-new.php

@@ -607,6 +607,15 @@
 					<span class="dashicons dashicons-hidden" aria-hidden="true"></span>
 					<span class="text"><?php _e( 'Hide' ); ?></span>
 				</button>
+				<div id="caps-warning" class="caps-warning">
+					<span class="caps-icon">
+						<svg viewBox="0 0 24 26" xmlns="http://www.w3.org/2000/svg" fill="#2c3338" stroke="#2c3338" 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>
+					<span class="caps-warning-text"><?php _e( 'Caps lock is on.' ); ?></span>
+				</div>
 			</div>
 		</td>
 	</tr>

src/wp-login.php

@@ -1522,6 +1522,15 @@ function wp_login_viewport_meta() {
 					<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' ); ?>">
 						<span class="dashicons dashicons-visibility" aria-hidden="true"></span>
 					</button>
+					<div id="caps-warning" class="caps-warning">
+						<span class="caps-icon">
+							<svg viewBox="0 0 24 26" xmlns="http://www.w3.org/2000/svg" fill="#2c3338" stroke="#2c3338" 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>
+						<span class="caps-warning-text"><?php _e( 'Caps lock is on.' ); ?></span>
+					</div>
 				</div>
 			</div>
 			<?php