Fix outlines for KTextbox and KSwitch

[sairina]

Description

Issue addressed

Addresses #131

Before/after screenshots

KTextbox Before	KTextbox After	KTextbox (after background fixed)
(Basically, before there was no outline)

KSwitch Before	KSwitch After

Steps to test

KTextbox

1. On the sign-in page, tab until you get into the username textbox.
2. Check to see that there is an outline around the textbox.

KSwitch

1. Sign in as a coach
2. Click on "Reports" for your class
3. Under "Lessons," toggle the switch on/off for "Visible to learners"
4. Check to see if there is an outline that appears as you are toggling.
5. Please check for an RTL language as well by changing the language in the address bar in your browser from /en/ to /ar/ for example.

(optional) Implementation notes

At a high level, how did you implement this?

For both of these components, I added :style and a ternary for whether or not there was a focus on the element. I also made updates to trackInputModality.js in order to differentiate between keyboard tab and mouse click.

Does this introduce any tech-debt items?

This in itself does not introduce any tech-debt items. However, it should be noted that there is a new CSS pseudo-class called :focus-visible that simplifies a lot of the logic that was introduced in order to track the use of keyboard vs. mouse, and it will likely be a refactor that we will want to look into in the design system. I will be opening an issue and linking this issue.

Reviewer guidance

• Is the code clean and well-commented?
• Are there tests for this change?
• Are all UI components LTR and RTL compliant (if applicable)?

Comments

I accidentally forgot and added both KTextbox and KSwitch together in this PR 😩

[sairina]

@indirectlylit From here:

One thing I'm seeing is that the vertical layout is shifting slightly on focus – though this might be due to the validation and not the new focus outline. Preferably, neither of these would cause a shift in height.

I double-checked with both clicking by mouse or tabbing with the keyboard and it seems to shift with focus, which I think means that it is validation-related. I will open a separate issue for this problem.

[indirectlylit]

That sounds right, thanks!

One question though – I thought we'd switched textboxes to the new style in #167

These look like it's still using the old styling? (cc @nucleogenesis who worked on the other work)

[nucleogenesis]

1. Sorry for not seeing this sooner
2. Also sorry for removing the line that added the background somehow in a follow-up commit to my original KTextbox update PR...

Now it will be fixed here: #240 @indirectlylit

[sairina]

@indirectlylit With the new style for KTextbox:

[indirectlylit]

hooray! thanks guys

[MisRob]

Thank you @sairina, code looks good to me, and I haven't noticed any problems when testing locally.