Bring button page in line with CF

[nataliafitzgerald]

The current DM button page is missing items that are available in Capital Framework. The additions here are not exhaustive but are a good start.

Additions

• Focus state for primary button
• Focus state for disabled button

Removals

Changes

• Update text to consistent format

Testing

-

Review

• @anselmbradford @marteki

Preview this PR without the whitespace changes

Screenshots

Notes

-

Todos

-

Checklist

• [ ] Changes are limited to a single goal (no scope creep)
• [ ] Code can be automatically merged (no conflicts)
• [ ] Code follows the standards laid out in the front end playbook
• [ ] Passes all existing automated tests
• [ ] New functions include new tests
• [ ] New functions are documented (with a description, list of inputs, and expected output)
• [ ] Placeholder code is flagged
• [ ] Visually tested in supported browsers and devices
• [ ] Project documentation has been updated (including the "Unreleased" section of the CHANGELOG)

[nataliafitzgerald]

There are additional button options in Capital Framework that we could bring in at this time if we wish:

• Secondary button states
• Destructive action button
• Super button (aka Large primary button) states - Do we have an official name for this button?

[Scotchester]

Pretty sure that disabled buttons shouldn't be focusable, right?

[marteki]

@Scotchester Disabled buttons should be focusable for accessibility reasons. Otherwise, some members of the audience might never know that it exists.

[Scotchester]

Ah, of course.

[Scotchester]

At the risk of taking this discussion out-of-scope, I'm reminded that our hover/focus state is inaccessible with White on Pacific 80.

[marteki]

@nataliafitzgerald Yeah, let's bring in secondary and destructive buttons, but is it okay to do it in a separate PR so we can get this one squared away?

Super button (aka Large primary button) states - Do we have an official name for this button?

I quite like "large primary button." It's clear and direct and easy to understand in a way that "super button" isn't.

[marteki]

@Scotchester On a similar out-of-scope-for-this-PR-but-important-to-identify note: Gray text on a Gray 20 background for our disabled buttons also isn't accessible for color contrast reasons.

(And color contrast errors throughout the header and footer of the Design Manual. Oi.)

[nataliafitzgerald]

@Scotchester Last fall I posted an issue related to the Design Manual header and footer. Here it is: https://github.com/cfpb/design-manual/issues/539. If it helps I can come up with the accessible text colors for that and then perhaps a dev can pick it up?

@marteki @Scotchester Related to the buttons, I will pull the remaining tasks into a separate PR or issue:

• Contrast issues with disabled button (Gray text on Gray 20 background)
• Contrast issues with hover and focus state of primary button (White on Pacific 80)
• Contrast issues with hover and focus state of destructive action button
• Add secondary button states
• Add destructive button including states

[marteki]

@nataliafitzgerald :+1: to everything you just said.

I can also help with the dev work for the DM header and footer stuff, depending on others' availability.

[nataliafitzgerald]

Destructive action hover and focus are also not contrast compliant. So I will add that to the list above.