Carbon: [React] `iconDescription` prop is indirectly required for Button & creates noise

[jendowns]

Detailed description

This has come up in our Security addons library for Carbon, so I wanted to share some thoughts and assumptions that we have with regards to how the Button component with icons should be used. Please let me know if you disagree!

There are times when iconDescription is unnecessary for Button

A Button will include action-based text, like --

Load more

Add user

Sign up

And so forth.

Sometimes, we want to include an icon with a Button. However, given the Button text above, what could iconDescription add to some of those examples?

The icons used, in these cases, would be visually decorative. If iconDescription was included for each, it would be unnecessary noise for a screen reader.

Therefore in these cases, we have tried to use iconDescription="" because --

• We do not want the defaultProp string to be shown to the user (i.e., "Provide icon description if icon is used")
• We are showing that the iconDescription is purposefully empty
• We do not want to see console errors (i.e., "renderIcon property specified without also providing an iconDescription property.")

iconDescription is indirectly required

Even though the iconDescription is not explicitly required in the propTypes, it is still indirectly required as a result of how it's applied.

See: https://github.com/carbon-design-system/carbon/blob/master/packages/react/src/components/Button/Button.js#L105

Button.propTypes = {
  /**
   * If specifying the `icon` prop, provide a description for that icon that can
   * be read by screen readers
   */
  iconDescription: props => {
    if (props.renderIcon && !props.iconDescription) {
      return new Error(
        'renderIcon property specified without also providing an iconDescription property.'
      );
    }
    return undefined;
  },
};

Button.defaultProps = {
  iconDescription: 'Provide icon description if icon is used',
};

We cannot ignore the iconDescription prop because the defaultProp creates noise.

And we cannot use iconDescription="" because the propType error is still raised, and this confuses developers using our addons library.

Summary

We should be able to a use Button with an icon without having an iconDescription, so as not to create noise for our end users' screen readers. As described above, there are times we believe an iconDescription does not add any contextual value to a Button action (and would, in fact, just be an annoyance).

If the purpose of the defaultProp is to remind people the importance of the iconDescription in certain cases, we should be able to use iconDescription="" in order to purposefully leave the prop blank. And when doing so, we would expect not to have error noise in our dev console.

Can we have the option to either not include an iconDescription (without UI noise due to defaultProp), or leave as iconDescription="" without dev error noise in our console?

@dakahn do you have any concerns about this?

[dakahn]

Hiya! Really interesting topic. So -- and this is me thinking through this -- if I have a button and that button contains some text and an icon. From a screen reader standpoint that icon is decorative and the text in the button is what's important. aria-hidden could then be used to take the icon out of the DOM (and reduce noise) so the screen reader sees:

<button>Load more</button>

iconDescription's use case would be if your button is _icon only_. Then you'd want some visually hidden text read as the button's label, while having the icon element itself still ignored by screen readers.

So if your button contains text and an icon, I totally agree that iconDescription is an unnecessary requirement 👍