Standardize focus state on interactive components

[hlminh2000]

Currently, our components visually have different focus states. We want to standardize it so anything that can be focused on on the page (accessible by tab on keyboard) is highlighted in the same manner. This will improve accessibility and also make the focus state visually consistent across browsers.

Implementation details:

• A piece of css to implement a browser :focus state that follows the forms/input/large/focus's style as laid out in https://zpl.io/adzPEOR, that can be reused, separate from any component.
• We need a FocusWrapper component that is implemented as a <button/> with the following characteristics:
  • All browser default styling overridden to have no visual characteristics of a button
  • Uses the above mentioned css for the :focus state
• Any component that is clickable (other than links) should be extending / wrapped by this FocusWrapper component (needs to update previously implemented components, including Button)
• Input components (Input, Select, Checkbox, etc...) must be updated to use the above css style for their :focus state.

Design: see bottom of: https://zpl.io/2pvln6N
Size of box depends on the element (similar to the chrome default focus state)