keyboard focus outline obscures text in perseus question

[indirectlylit]

Observed behavior

Reported by a user:

When typing the values to your answer, the outline becomes too big blocking some of the letters from the instruction:

(note that the 'c' in 'chicks' is partially obscured)

Expected behavior

smaller inner padding for focus outline, or larger outer margins on input

User-facing consequences

difficulty reading question

Steps to reproduce

tab to an input box in basic math counting

Context

• Operating system used: Windows 10 Pro
• Browser: Version 74.0.3729.169
• Kolibri Beta Version 0.12.4b7

[jonboiser]

This happens with focusing in general (keyboard and mouse).

It's also not consistent. In the screenshot, we're seeing the global :focus style being applied. But I think some perseus questions have a higher-specifity :focus rule so you get the browser-stylesheet blue outline sometimes.

To fix this, we need to make sure a perseus-specific :focus rule is being applied and not the global one.

[indirectlylit]

At one point we also considered sandboxing Perseus in Hashi, which would also address this. (cc @rtibbles)

That said, I don't think this issue is particularly egregious, unless we come across an instance which makes things unusuable.

[rtibbles]

I think the simpler resolution would just be to wrap perseus in an iframe, rather than sandboxing completely.