style: removing outlines on a few key elements

[rusackas]

SUMMARY

React-bootstrap adds styles with a VERY broad :focus style, adding goofy outlines all over the place.

I'm removing that outline for a few key elements, namely div span and i so we don't see them in strange places. This should not affect focus on form elements and such, so it has a relatively low impact on accessibility. That said, I admit there may be areas where there's tab-based navigation we DO want to support. In such cases, we should make sure that it's supported (and styled) properly in those relevant components, when we get to do a broader accessibility sweep to meet WCAG standards.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before:

After:

TEST PLAN

ADDITIONAL INFORMATION

• Has associated issue:
• Changes UI
• Requires DB Migration.
• Confirm DB Migration upgrade and downgrade tested.
• Introduces new feature or API
• Removes existing feature or API

[codecov-io]

Codecov Report

Merging #11372 into master will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master   #11372   +/-   ##
=======================================
  Coverage   61.57%   61.57%           
=======================================
  Files         838      838           
  Lines       39839    39839           
  Branches     3655     3655           
=======================================
  Hits        24532    24532           
  Misses      15126    15126           
  Partials      181      181           

Flag	Coverage Δ
#javascript	62.63% <ø> (ø)
#python	60.94% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update f14cf9d...12cd1f8. Read the comment docs.

[rusackas]

@junlincc FYI.

[mistercrunch]

These funky outlines must GO!