Fix keyboard outline in Kolibri - no longer showing unless keyboard navigating

[nucleogenesis]

Description

Issue addressed

Fixes learningequality/kolibri#7974

Steps to test

Kolibri

• yarn link the design system (see KDS Readme for help there)
• Run Kolibri and test that the outline comes up when you're keyboard navigating but does not come up when you're hovering with a mouse.

KDS

• yarn dev the KDS documentation (or just use the Preview link below at the GIthub Actions)
• Make sure that you see the keyboard navigation box when navigating by keyboard there.

(optional) Implementation notes

This commit is where the bug was introduced. @MisRob undoing this fixes the issue - was there some other effect you expected to see when making this change?

At a high level, how did you implement this?

Reverts this commit.

[indirectlylit]

was there some other effect you expected to see when making this change?

Looks like this was discussed and I OK'd the change here: #200 (comment)

Clearly I didn't (don't) fully understand how keyboard modality state is tracked and referenced. However it seems that we do in fact need both a JS and CSS-based state

[nucleogenesis]

Thanks @indirectlylit

I'll merge this as there is low/no chance for regression

[MisRob]

Thank you for fixing this @nucleogenesis, I've had to misunderstand something. I still don't get how come that we rely on the attribute that I had removed but if the commit revert helps with the bug, there will be some dependency in Kolibri. Yes, I wouldn't expect any regressions.

[MisRob]

Wondering if the problem might be rather some CSS specificity issue that has shown up after the selector update rather than the need to have the attribute there, because I think we actually don't update or use the attribute itself.