LG-5187:Implement Improvements to focus and increase pixel size

[jmdembe]

This ticket increases the pixel size of the focus outline and the outline offset

Why: To enhance the user experience for users

[jmdembe]

I added this class because .usa-success-message is used in different places. So until it is decided that the checkmark will be used in all success messages, I added another class.

[aduth]

I added this class because .usa-success-message is used in different places. So until it is decided that the checkmark will be used in all success messages, I added another class.

I think we only use it within the document capture step, to my knowledge. Should be safe to update the base styles directly.

(I'm also considering this from a design system perspective, since I assume we might want to pull these styles into the design system as well)

[jmdembe]

I just realized that this is in a ticket to come.

[aduth]

Are we expecting this to apply to all inputs in the application?

[jmdembe]

no, i did not.

[anniehirshman-gsa]

Looks good @jmdembe! One small issue I noticed testing on mobile: when you click "Take photo" and use the Acuant SDK auto-capture, the focus ring seems to "linger" behind the enable camera access modal. Any way to resolve that?

ETA: better screenshot @jmdembe @nickttng

[jmdembe]

Looks good @jmdembe! One small issue I noticed testing on mobile: when you click "Take photo" and use the Acuant SDK auto-capture, the focus ring seems to "linger" behind the enable camera access modal. Any way to resolve that?

This is something that is also happening in production. We can investigate this further at another time.

[aduth]

Out of curiosity, do we need both of these sets of styles? I see the one added below would apply for an input with a value, but it also seems to apply for one without a value. Could we remove this set of styles altogether then?

[jmdembe]

Yes, this can be removed. I think this was from when I was hammering away at the focus.

[aduth]

Does this offset account for the border of the input itself? For a field with a value, it seems to be much bigger an offset:

I can see how we'd need a big offset for the chunkier 3px border, but should it be reduced when it's the thinner border when a value is assigned? Like 4px or 5px?