Add Caps lock message to login screen

[dartiss]

Users are often experiencing issues logging in which is a result of them having CAPS LOCK on, without them realising. Many wireless keyboards too don't have a light on them, which makes noticing this even trickier.

There are a number of plugins available that will flag to the user when the CAPS LOCK is on (a message rather than a warning as it may be intentional!) but it would make sense for this to be added into core (possibly alongside other request improvements, such as the ability to display the typed password).

Apologies if this is already a ticket - I did look but my search-fu on Trac isn't great.

[swissspidy]

Here's how the password field on the macOS login screen warns about caps lock

[desrosj]

Thanks for this one, @dartiss! IF this gets implemented, it should probably be added to the user edit screen as well.

I'm going to move this to future release as I think this would be a good enhancement. It would be great to get some design guidance here.

[devsabbirahmed]

To enhance readability and improve user interaction, we can implement a caps lock alert by displaying a clear HTML message when the caps lock key is activated. Here's a revised version:

<div id="caps-lock-alert">
  Caps Lock is currently on.
</div>

So we can add a function that directly imports JavaScript code to the login page and loads it there.

<?php
function add_custom_login_script() {
    wp_enqueue_script('custom-login-script', get_stylesheet_directory_uri() . '/js/custom-login-script.js', array('jquery'), '1.0', true);
}
add_action('login_enqueue_scripts', 'add_custom_login_script');

Then we can add jQuery/JS code

jQuery(document).ready(function($) {
    var passwordField = $('#user_pass');
    var capsLockAlert = $('<div id="caps-lock-alert">Caps Lock is currently on.</div>').hide();
    
    passwordField.after(capsLockAlert);
    
    passwordField.on('keyup', function(event) {
        var capsLockStatus = event.getModifierState && event.getModifierState('CapsLock');
        
        if (capsLockStatus) {
            capsLockAlert.show();
        } else {
            capsLockAlert.hide();
        }
    });
});

That will be more readable because an icon sometime not be that much eye interactive.

[kawsar007]

I agree with @swissspidy and I attached 3 design style.
​https://ibb.co/hWB6MNh
​https://ibb.co/Xbh90yd
​https://ibb.co/RvzbWPg

[dartiss]

Replying to kawsar007:

I agree with @swissspidy and I attached 3 design style.
​https://ibb.co/hWB6MNh
​https://ibb.co/Xbh90yd
​https://ibb.co/RvzbWPg

That last one is certainly the cleanest and most discrete but I'd worry that users wouldn't understand what it meant. The others, whilst being a bit "in your face" certainly don't leave you confused!

[kawsar007]

Can we make it minimal design for this and like my 3rd attached file.

[najmulsaju]

I think using this design with a CAPS LOCK icon and text will be easy for users to understand.
Here is the design ​https://ibb.co/5nv6GqH

[dartiss]

Replying to najmulsaju:

I think using this design with a CAPS LOCK icon and text will be easy for users to understand.
Here is the design ​https://ibb.co/5nv6GqH

Love this design!

Trac ticket: https://core.trac.wordpress.org/ticket/48345

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

## Unlinked Accounts
The following contributors have not linked their GitHub and WordPress.org accounts: @nhatkar@….

Contributors, please ​read how to link your accounts to ensure your work is properly credited in WordPress releases.

To understand the WordPress project's expectations around crediting contributors, please ​review the Contributor Attribution page in the Core Handbook.

Please use @nikunj8866 WordPress profile.

### After

[SirLouen]

Test Report

Description

❌ This report validates that the indicated patch fully works as expected.

Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/8726.diff

Environment

• WordPress: 6.9-alpha-60093-src
• PHP: 8.2.28
• Server: nginx/1.27.5
• Database: mysqli (Server: 8.4.5 / Client: mysqlnd 8.2.28)
• Browser: Chrome 136.0.0.0
• OS: Windows 10/11
• Theme: Twenty Twenty-Five 1.2
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0

Reproduction Steps

1. Simply go to /wp-login.php
2. Start typing in the pass input with Caps Lock disabled
3. Press enter
4. 🐞 The message pops while the system is loading the next screen (and it shouldn't, demo video attached)

Actual Results

1. ❌ Issue not fully resolved with the patch.

Additional Notes

Two additional elements that should be considered to improve the patch (apart from the bug detected)

1. The notification looks good, but the color doesn't match the standard WP palette, and it should. For example, #FFA328 is a color that has never been used on WordPress at all. Color palette on design should be respected in that regard.

2. Code is not considering also this section as @desrosj suggested

/wp-admin/user-new.php

Supplemental Artifacts

Demo video with the issue: ​https://f003.backblazeb2.com/file/wordpress-videos/wp-videos/2025/05/48345.mp4 (can be seen in the second 4)

[nikunj8866]

@SirLouen Thanks for your feedback.

✅ Fixed: Prevented the Caps Lock warning message from appearing when Caps Lock is disabled and Enter is pressed on the login screen.

✅ Improved: Added Caps Lock detection and warning message support for the Add/Edit User password fields (/wp-admin/user-new.php, /wp-admin/edit-user.php), as suggested by @desrosj.

🎨 Design Note: The warning color follows the mockup reference provided here: ​https://ibb.co/5nv6GqH.

[johnbillion]

On macOS there is a built-in caps lock warning on password fields in browsers (tested in Chrome and Safari). If a custom caps lock indicator gets added then it needs to not show up when the browser or OS also shows one.

[johnbillion]

Screenshot of caps lock indicator on password field on macOS

[SirLouen]

Replying to nikunj8866:

🎨 Design Note: The warning color follows the mockup reference provided here: ​https://ibb.co/5nv6GqH.

Yes, I know that is the mockup reference, but it was not really approved, was just a random idea, and none told the creator that it was not color-compliant. Still, it looks good, but it doesn't match any of the WP default styles, so I think that just doing some other combination of colors while preserving the format could do the trick. If you can propose something that is compliant with WP colors, it could probably be easier to pass review in the future.

Please check this ​figma for the official WordPress color reference

Also check @johnbillion topic about macOS (and I'm not sure if there are other OSes with this, I believe this is super-tricky and since there could be potentially more scenarios, they could be handled already and just those unknown, reported in the future)

[nikunj8866]

Thanks for the feedback!

@SirLouen I've updated the color combination to align with the official WordPress default styles, based on the provided Figma reference - ​https://prnt.sc/yoIUEp_VvPLh.

Regarding the macOS-specific behavior, I've implemented a condition to suppress the warning message when the user is on macOS using Chrome or Safari, as discussed in @johnbillion’s comments. This should help avoid false positives on those platforms. Please review and let me know if any adjustments are needed.

[SirLouen]

Test Report

Description

✅ This report is a follow-up of this other report and validates that the indicated patch works as expected.

Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/8726.diff

Environment

• WordPress: 6.9-alpha-60093-src
• PHP: 8.2.28
• Server: nginx/1.27.5
• Database: mysqli (Server: 8.4.5 / Client: mysqlnd 8.2.28)
• Browser: Chrome 136.0.0.0
• OS: Windows 10/11
• Theme: Twenty Twenty-Five 1.2
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0

Expected Results

1. Go to login page: /wp-login.php
2. Start typing in the pass input with Caps Lock enable
3. "Cap Lock is on" Message appears

1. Go to New user page: /wp-admin/user-new.php
2. Start typing in the pass input with Caps Lock enabled
3. "Cap Lock is on" Message appears
4. The message pops while the system is loading the next screen (and it shouldn't, demo video attached)

Actual Results

1. ✅ Message appears for both Login page and New user page
2. ✅ Issue with the sudden popup during loading is resolved.
3. ❓ I could not test behavior under native MacOS conditions. Pending this test to full pass

Additional Notes

1. The color palette is correct according to the ​official colors
2. ⚠️ The selection of red colors could be appropriate, given that this in the alert category according to ​Bootstrap's color convention. Also, yellow palette could be an option according to ​Carbon Design System standards regarding notifications. Personally, I believe that both could work, although yellow seems to be the most common choice for these kinds of notifications.
3. ⚠️ I could not test under macOS conditions @johnbillion, given that you were who commented this, could you test it?

[johnbillion]

Notes:

• This should be announced to screen readers too, eg. via wp.a11y.speak()
• ​David Walsh has an article about using KeyboardEvent.getModifierState() instead of performing case comparisons -- is this a better approach?
• ​21 year old feature request for showing a caps lock warning in password inputs in Firefox
• ​Five year old Chromium discussion on the same topic

[SirLouen]

@nikunj8866 it seems there are a couple of changes to be introduced into the current patch to progress

1. Reviewing the colour selection
2. Adding screen readers capabilities.
3. Maybe considering KeyboardEvent.getModifierState()

[nikunj8866]

@SirLouen Thanks for the feedback! I've refreshed the patch to address the suggested changes, including the color selection review, screen reader enhancements, and considerations for KeyboardEvent.getModifierState().

[nikunj8866]

Caps Lock message with yellow color.

[SirLouen]

@nikunj8866 I've sent you a little code review, I think we are almost there 👌

[nikunj8866]

@SirLouen Thanks! I've made the changes as per your review.

[SirLouen]

Test Report v2

Description

This report validate that the new version of patch works as expected and has incorporated all the revisions proposed.

Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/8726.diff

Environment

• WordPress: 6.9-alpha-60093-src
• PHP: 8.2.28
• Server: nginx/1.27.5
• Database: mysqli (Server: 8.4.5 / Client: mysqlnd 8.2.28)
• Browser: Firefox 139.0
• OS: Windows 10/11
• Theme: Twenty Twenty-Five 1.2
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0

Expected Results

1. Caps lock warning appears both in Firefox and Chrome
2. Caps lock warning doesn't appear for Mac
3. The Caps lock warning can be heard through a screen reader
4. Warning appears with expected colours palette according to the ​brand identity

Actual Results

1. ✅ Message appears for both Login page and New user page
2. ❓ Can't check the Mac version.
3. ✅ Caps lock message is read by NVDA

Additional Notes

• ✅ Warnings use: #FFF972 icon background #FFFDD6 for the warning background which match identity colors

• Now I think that this patch fulfils all the requirements only a second test with a Mac/Safari would be great before being shipped.

Supplemental Artifacts

Brand identity:

[johnbillion]

Here's an interesting development and a small correction to my earlier comment. On macOS (tested on 15.0.1) the behaviour of the built-in caps lock indicator is not consistent between browsers. In Chrome the caps lock indicator does not appear in password fields, but does appear for text and textarea fields (which is completely backwards). In Safari it appears for text, textarea, and password fields.

In addition the indicator only appears while the input is focused and the user is not actively typing. As soon as you start typing, the indicator disappears until you stop again.

Who is willing to do some research on other software and platforms to see whether they implement a caps lock warning on their login screen? Ideally users who don't use macOS. I'm thinking to check all the big social networks and service providers plus other CMSes and report back. Then we can make a decision based on the results.

[SirLouen]

Replying to johnbillion:

Here's an interesting development and a small correction to my earlier comment. On macOS (tested on 15.0.1) the behaviour of the built-in caps lock indicator is not consistent between browsers. In Chrome the caps lock indicator does not appear in password fields, but does appear for text and textarea fields (which is completely backwards). In Safari it appears for text, textarea, and password fields.

Good that @johnbillion is a Mac user, we needed some Mac testing here.

In addition the indicator only appears while the input is focused and the user is not actively typing. As soon as you start typing, the indicator disappears until you stop again.

I have not noted this on Windows, so it must be a Mac issue. Wondering how that can be sorted.

@nikunj8866 can you check these two things? I'm not sure if you have a Mac to test.

Who is willing to do some research on other software and platforms to see whether they implement a caps lock warning on their login screen? Ideally users who don't use macOS. I'm thinking to check all the big social networks and service providers plus other CMSes and report back. Then we can make a decision based on the results.

I've checked Drupal and Joomla demos and none of them are providing this feature.

[johnbillion]

Clarification about the indicator only appearing while not typing: I was referring to the built in caps lock indicator on macOS.

[SirLouen]

Replying to johnbillion:

Clarification about the indicator only appearing while not typing: I was referring to the built in caps lock indicator on macOS.

In addition the indicator only appears while the input is focused and the user is not actively typing. As soon as you start typing, the indicator disappears until you stop again.

Do you mean that this is the expected behaviour? To replicate the default Mac indicator behaviour?