[Accessibility] Button fixes

[aleksik]

WIP - Requires https://helsinkisolutionoffice.atlassian.net/browse/HDS-449

Description

Accessibility fixes for the Button component:

• Set button minimum width and height to 44px
• Require iconLeft or iconRight for supplementary button
• Changed documentation to mention that Supplementary buttons should not be used without an icon
• Added a mention that HDS Buttons comply with WCAG Target Size guideline
• Shortened the spacing between icon and label in Supplementary button to 4px

How Has This Been Tested?

Tested by running Storybook and documentation site locally.

[ronijaakkola]

Since mobile navigation uses a supplementary button as a "sign out" button, we need to add an icon to it to comply with this new requirement.

The icon we should use is signout.

[niglu1]

👍

[ronijaakkola]

@aleksik Documentation was done in this branch. We could merge these together.
#262

[aleksik]

@ronijaakkola I cherry-picked your documentation commit to this branch.

#262 can now be closed.

[ronijaakkola]

@ronijaakkola I cherry-picked your documentation commit to this branch.

#262 can now be closed.

Thanks! I will check the documentation and update the examples if needed.

[niglu1]

I noticed that the size and margins of the small button icons are wrong. According to the button design, the size should be the same as for the normal button. The margin between the label and the left/right icons should be 8px, now it's 12px, so it should be changed to use the var(--spacing-2-xs) token. Maybe that could be changed as part of this task as we're changing the small button appearance anyway?

/* left - small */
.hds-button--small .hds-icon {
  height: 1.125em;
  margin-left: var(--spacing-xs);
  width: 1.125em;
}