kolibri: Missing focus ring around password inputs
Observed behavior
I can’t see the focus ring around password inputs when navigating with the TAB key. This can be observed in several places in the app where we use the PasswordTextbox component.
One of the examples is creating a new account:
Expected behavior
The focus ring around password inputs can be seen when navigating with a keyboard.
User-facing consequences
Problematic for keyboard users
Steps to reproduce
- Make sure that Allow learners to create accounts and Require password for learners is enabled in the facility settings
- Navigate to the sign-in page
- Click the Create an account button
- Use TAB to navigate password inputs
Context
Kolibri version: Kolibri 0.15.6b1 Operating system: Ubuntu 20.04.3 LTS Browser: Chrome 103.0.5060.114 (Official Build) (64-bit)
About this issue
- Original URL
- State: closed
- Created 2 years ago
- Comments: 21 (18 by maintainers)
@MisRob Thanks for the additional context and direction! That was super helpful.
It looks like the bug is likely in the trackInputModality.js file in the kolibri-design-system repo. The “hadKeyboardEvent” condition is evaluating to false on the PW inputs but not on the username/full name inputs. I’ll look into this further and send a PR when fixed.
@andersan - feel free to @ me in a comment here if you have any questions as you’re working on this! @MisRob will be out of office starting early next week, I was making some updates to that file to improve our focus outlines not too long ago, so I’m happy to help you out if I can. (Or accept blame if the git history indicates that this is my fault 😃)