Reorder new button :active and :focus states, and add :active:focus combo

Problem

The button states cascade like this…

• default
• :hover
• :active/.selected
• :focus

Here’s a quick video showing the current behavior. You can see that if the button has focus, the active (pressed) state has no impact.

Screen_Recording_2020-02-18_at_4.19.48_PM

Which means that focus styles will always override :active or .selected.

Solution

Order the cascade like this…

• default
• :hover
• :focus
• :active / .selected
  • :active:focus
  • .selected:focus

Active and selected buttons should still have a focus state, but it should not fully override the styles. For example, only adding a focus ring, instead of altering border or fill.

See this example from Bootstrap on how the SCSS is structured.

/cc @ealcantara