Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Missing focus ring around password inputs

See original GitHub issue

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:

password-focus-ring

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)

Issue Analytics

State:
Created a year ago
Comments:21 (18 by maintainers)

Top GitHub Comments

2reactions

andersancommented, Sep 20, 2022

@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.

1reaction

marcellamakicommented, Sep 20, 2022

@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 😃)

Top Results From Across the Web

Enable :focus only on keyboard use (or tab press)

While the :focus pseudo-class always matches the currently-focused element, UAs only sometimes visibly indicate focus (such as by drawing a “focus ring”), ...

focus-visible - CSS: Cascading Style Sheets - MDN Web Docs

It may not be obvious as to why the focus indicator is appearing and disappearing if a person is using mixed forms of...

Clicking on a non-text input element does not give it focus

I'm pretty certain we want it be focusable on all non-Mac platforms. > > Perhaps it should depend on tab-focus policy. My feeling...

A Complete Guide To Accessible Front-End Components

An up-to-date collection of accessible front-end components: accordions, form styles, dark mode, data charts, date pickers, form styles, ...

Focusing: focus/blur - The Modern JavaScript Tutorial

Losing the focus generally means: “the data has been entered”, so we can run the code to check it or even to save...