Add focus outline back to default buttons

[yvonnetangsu]

READY FOR REVIEW

Summary

• Put focus outline back on default buttons and let developers remove them in their own projects if needed, since it's really difficult to put outline back once it's been removed (no good CSS code to reset it). Having the outline as default helps with accessibility.
• Also remove extra bottom margin on some of the CTA variants.

Needed By (Date)

• Whenever

Urgency

• N/A

Steps to Test

1. Pull this branch and compile styleguide
2. Go to the Components -> button section and tab through the buttons, check that the browser default outline ring is back when button is on focus.
3. Look at the Site Search component and check that the magnifying glass icon still has outline when tab to it.
4. Check Main Nav and Masthead component at MD breakpoint or smaller. See that the hamburger menu toggle button has no outline on focus (this is an exception case that has no focus outline since it has the thick border underneath already).

Affected Projects or Products

• Decanter
• Redwood WP theme

Associated Issues and/or People

• @JBCSU
• Remove {outline: none} for buttons #472

[JBCSU]

Why was this necessary? Just curious.

[yvonnetangsu]

In the current one, when you tab to the CTA, in a couple of them, there's a white space the whole CTA (more obvious when you tab to it so you see the focus outline).

[JBCSU]

Ok, I see why you want to remove the bottom margin on the CTA button. But this has the effect of changing the vertical spacing of the entire CTA. Should we not just move the bottom margin to the whole CTA, vs. eliminating it?

[yvonnetangsu]

I believe we don't actually want any external spacing that's outside any Decanter elements (no spacing outside the top level wrapper) so I'm removing it all together.

[JBCSU]

Hmmm. Yes, I agree with that in principle. However, the fact is we did effectively have external spacing on the CTA component. If people upgrade to the latest master, their layout will be affected if they use CTA's. Maybe that's ok, but I want to make a conscious decision about it.

@sherakama, your thoughts? Are CTA's used on any of your decanter-based sites? Is SWS okay with the bottom margin going away?

[yvonnetangsu]

That's a good point about backward compatibility 😄

[sherakama]

CSS can change and the styles applied to elements can change, esp, if the new code keeps the end result the same without changing or removing variables mixins, or placeholders. Keep in mind, we try to avoid top margin and try to only apply margin to the bottom of elements to stay consistent.

[sherakama]

Thanks for the changes.

[JBCSU]

Looks great! GTG