Opened 6 years ago
Last modified 13 hours ago
#48345 new feature request
Add Caps lock message to login screen
Reported by: |
|
Owned by: | |
---|---|---|---|
Milestone: | Future Release | Priority: | normal |
Severity: | normal | Version: | |
Component: | Login and Registration | Keywords: | has-patch has-screenshots has-test-info changes-requested |
Focuses: | ui, accessibility | Cc: |
Description
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.
Attachments (3)
Change History (36)
#1
@
6 years ago
- Component changed from General to Login and Registration
- Keywords needs-patch needs-design added
- Milestone changed from Awaiting Review to Future Release
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.
#3
@
2 years ago
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.
#4
follow-up:
↓ 5
@
2 years ago
I agree with @swissspidy and I attached 3 design style.
https://ibb.co/hWB6MNh
https://ibb.co/Xbh90yd
https://ibb.co/RvzbWPg
#5
in reply to:
↑ 4
;
follow-up:
↓ 7
@
2 years ago
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!
This ticket was mentioned in Slack in #design by chaion07. View the logs.
2 years ago
#7
in reply to:
↑ 5
@
2 years ago
Can we make it minimal design for this and like my 3rd attached file.
#8
follow-up:
↓ 9
@
2 years ago
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
#9
in reply to:
↑ 8
@
2 years ago
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!
This ticket was mentioned in PR #8726 on WordPress/wordpress-develop by @nikunj8866.
2 months ago
#11
- Keywords has-patch added; needs-patch removed
Trac ticket: https://core.trac.wordpress.org/ticket/48345
@nikunj8866 commented on PR #8726:
2 months ago
#12
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.
@nikunj8866 commented on PR #8726:
2 months ago
#13
#16
@
6 weeks ago
- Keywords has-testing-info changes-requested added; needs-testing removed
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
- Simply go to /wp-login.php
- Start typing in the pass input with Caps Lock disabled
- Press enter
- 🐞 The message pops while the system is loading the next screen (and it shouldn't, demo video attached)
Actual Results
- ❌ 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)
- 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.
- Code is not considering also this section as @desrosj suggested
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)
#17
follow-up:
↓ 19
@
6 weeks ago
- Keywords needs-testing added; changes-requested removed
@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.
#18
@
6 weeks ago
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.
#19
in reply to:
↑ 17
@
6 weeks ago
- Keywords needs-design-feedback changes-requested added; needs-testing removed
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)
#21
follow-up:
↓ 22
@
5 weeks ago
- Keywords needs-testing added; has-test-info removed
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.
#22
in reply to:
↑ 21
@
5 weeks ago
- Keywords dev-feedback has-screenshots has-test-info added; changes-requested needs-testing removed
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
- Go to login page:
/wp-login.php
- Start typing in the pass input with Caps Lock enable
- "Cap Lock is on" Message appears
- Go to New user page:
/wp-admin/user-new.php
- Start typing in the pass input with Caps Lock enabled
- "Cap Lock is on" Message appears
- The message pops while the system is loading the next screen (and it shouldn't, demo video attached)
Actual Results
- ✅ Message appears for both Login page and New user page
- ✅ Issue with the sudden popup during loading is resolved.
- ❓ I could not test behavior under native MacOS conditions. Pending this test to full pass
Additional Notes
- The color palette is correct according to the official colors
- ⚠️ 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.
- ⚠️ I could not test under macOS conditions @johnbillion, given that you were who commented this, could you test it?
#23
@
5 weeks ago
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
#24
@
11 days ago
- Keywords changes-requested added; dev-feedback needs-design-feedback removed
@nikunj8866 it seems there are a couple of changes to be introduced into the current patch to progress
- Reviewing the colour selection
- Adding screen readers capabilities.
- Maybe considering
KeyboardEvent.getModifierState()
#25
@
11 days ago
- Keywords needs-testing needs-test-info added; has-test-info changes-requested removed
@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().
This ticket was mentioned in Slack in #core-test by sirlouen. View the logs.
11 days ago
#29
@
11 days ago
- Keywords has-test-info added; needs-test-info removed
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
- Caps lock warning appears both in Firefox and Chrome
- Caps lock warning doesn't appear for Mac
- The Caps lock warning can be heard through a screen reader
- Warning appears with expected colours palette according to the brand identity
Actual Results
- ✅ Message appears for both Login page and New user page
- ❓ Can't check the Mac version.
- ✅ 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
#30
follow-up:
↓ 31
@
7 days ago
- Keywords 2nd-opinion added
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.
#31
in reply to:
↑ 30
@
7 days ago
- Keywords changes-requested added; needs-testing 2nd-opinion removed
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.
#32
follow-up:
↓ 33
@
7 days ago
Clarification about the indicator only appearing while not typing: I was referring to the built in caps lock indicator on macOS.
#33
in reply to:
↑ 32
@
13 hours ago
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?
Here's how the password field on the macOS login screen warns about caps lock