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?

[pmbaldha]

In Mac Chrome, the password field doesn't display the Caps Lock indicator. The text field displays the Caps Lock indicator well in Mac Chrome.

In Mac Safari, the password and text fields display the Caps Lock indicator.

I have confirmed it and attached the related screen recordings to this ticket.

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.

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.

[pmbaldha]

The Mac Chrome password field doesn't display the Caps Lock indicator.

[pmbaldha]

The Mac Safari password field display the Caps Lock indicator.

[SirLouen]

@pmbaldha are you sure this screenshot is from Chrome? I can't recognize that UI 🤔

Here are my conclusions to proceed are:

1. ✅ From what @johnbillion was commenting, only Safari in Mac has an active control of cap locks in password. But this is already being targeted in the current patch, so all good here.
2. ❓ John also comments that a particular behaviour on Safari is that the blue caps lock indicator disappears while typing (not the other one on the right). Moreover, the indicator follows the cursor. Personally, I think these UI elements don't provide any accessibility improvement or additional better UX apart from complicating even more the code. Personally, here, I like as its currently is, with the official colours and a little text cue indicator for a cross-platform integrity.
3. ✅ For the rest, everything is working as expected now.

So it's time for a 2nd-opinion (or even a 3rd-opinion) on this before deciding if proceeding or if further adjustments are required. This report is almost cook, we are almost there, last stretch.

cc @joedolson @swissspidy

[pmbaldha]

@SirLouen, yes, I am sure that the attached screen recording was taken using Chrome. For your clarification, I am attaching a new screen recording video of the Mac Chrome login screen.

[pmbaldha]

The Mac Chrome password field doesn't display the Caps Lock indicator.

[joedolson]

On a quick check of common platforms - Google, X, Facebook, Bluesky, none of those provided a capslock enabled notification on Windows.

This isn't to say that this isn't something worth doing, but it's certainly not a common feature, at least for Windows users.

On the accessibility front, I don't think this offers any special benefits. It'll have a roughly equal benefit for all users. Given the use of password managers and autocomplete, it may not have a large impact for many people.

The implementation should get fairly extensive testing with plugins that modify the login page, however.

[dartiss]

As the person who raised this in the first place, it was much more relevant 6 years ago 😉

I agree that the use of password managers had dulled its advantages but looking up some quick stats (​https://www.security.org/digital-safety/password-manager-annual-report/) shows that, as of the end of last year, only 36% of American adults used one, and I suspect a lot of those are more tech-savvy. When I raised this in the first place, I was always targeting those who are not.

For the examples given, those are closed platforms who offer minimal support - if a user can't log in because they've left their caps lock on, it's no concern to them. However, with WordPress driving 44% of the largest websites, most of whom will be supported by frazzled devs and admins, I think the justification for assisting users is much better placed.

[joedolson]

Having done some thinking and reading about the reasoning here, I think this would overall be a benefit for WordPress to have in the login. Notifying a user of a situation that could impact their password entry is useful. Even in the case where a user wants caps lock on, having that confirmation that it is on can be useful; and this can have a slight benefit for security, by making it a bit less likely that a user will feel they need to use the 'Show Password' option in a public environment.

I'm going to milestone this for 6.9; it's pretty advanced at this point, and I think it should be possible to get it over the line.

[yashyadav247]

Test Report

Description

This report validates whether the indicated patch works as expected.

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

Environment

• WordPress: 6.8.2
• PHP: 8.3.24-dev
• Server: PHP.wasm
• Database: WP_SQLite_Driver (Server: 5.5 / Client: 3.40.1)
• Browser: Firefox 141.0
• OS: Windows 10/11
• Theme: Twenty Twenty 2.9

Actual Results

1.✅ Caps Lock message showing on User Login Page
2.✅ Caps Lock message showing on the New user Registration page inside the admin panel
3.✅ Caps Lock message showing on Existing user password change field inside the admin panel

Additional Notes

• We can show the message when setting up the WordPress site, i.e when we set up an admin user or add the database password in the setup process
• We can hide the message when the user has clicked on the toggle to view the password, as in that case user will already know that the password is in capslock.

[sajjad67]

Test Report

Description

✅ This report validates whether the indicated patch works as expected.

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

Environment

• WordPress: 6.9-alpha-60093-src
• PHP: 8.2.29
• Server: nginx/1.29.1
• Database: mysqli (Server: 8.4.6 / Client: mysqlnd 8.2.29)
• Browser: Chrome 141.0.0.0
• OS: Windows 10/11
• Theme: Twenty Twenty-Five 1.3
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0

Mac-Safari ✅

Mac-Chrome ✅

Mac-Firefox ✅

Windows-Chrome ✅

Windows-Firefox ✅