Doc update: Add "Icon only" buttons to the Button examples

[carmacleod]

If a button contains an icon and does not have any visible text, then the icon needs to have role="img" and a proper aria-label.

For example:

<button class="bx--btn bx--btn--primary" type="button">
    <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
role="img" aria-label="Add">
      <path d="M7 7H4v2h3v3h2V9h3V7H9V4H7v3zm1 9A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" fill-rule="evenodd" />
    </svg>
</button>

Would be great to add an example of an icon-only button to all of the Button examples, i.e. Primary Button, Secondary Button, Tertiary Button, Ghost Button, Danger button, Primary Danger button, Small Primary button, Small secondary button, Small tertiary button, Small ghost button, Small primary danger button, Small danger button.

[emyarod]

cc @IBM/carbon-designers for a spec or mockup on how "icon only" buttons should appear as well as some copy describing the use case for this button variant

[jeanservaas]

@carmacleod and @emyarod

We know there's a need for this and have some sketches around specs and potential usage (see below) but the current Carbon v10 effort was to reskin current Carbon functionality... so we haven't added a lot of the variations that we'd like, and that we know we need for a more robust system.

Here's a sketch of some of our thinking around icon only buttons. Also, the security team has an icon- only button in their react storybook too if that helps. Also 2, check out the Carbon Data Table experimental component for some insitu examples of icon-only button functionality (especially the kit, which is set to release in a couple weeks).

Otherwise... Coming Soon! (I hope this helps)

[elizabethsjudd]

Take a look at how WH approaches Icon-only buttons for accessibility: #1714 (comment)

This approach allows clarity for sighted users as well. The aria-label is only available for screen reader users but sighted users may want/need a textual description as well.

[carmacleod]

Agree that a custom tooltip that appears on mouse hover or keyboard focus is an accessibility requirement for icon-only buttons. The WH approach is a good example.