fix(guidelines): guidelines-icons-button-label-audit

[andreancardona]

Closes (Carbon Website): carbon-design-system/carbon-website#1498

• Adds an aria-label in the Tooltip to fix a11y violation

• Adds: ariaLabel: {tooltipText} to TooltipDefinition component

[netlify]

Deploy preview for carbon-elements ready!

Built with commit 3623007

https://deploy-preview-7821--carbon-elements.netlify.app

[netlify]

Deploy preview for carbon-components-react ready!

Built without sensitive environment variables with commit 3623007

https://deploy-preview-7821--carbon-components-react.netlify.app

[joshblack]

Would this end up causes the same text (tooltipText) to be announced twice from both aria-label and aria-describedby

[andreancardona]

@joshblack good point! aria-describedby announces the tooltipId which I think should be different from the text

[joshblack]

@andreancardona I believe the way aria-describedby works is that it uses the id to find the DOM node from which it computes the description. In this case, using aria-label with the tooltipText would give the node the accessible name of tooltipText. It would also give the node the description of tooltipText from aria-describedby as it points to a node that contains that as its accessible label.

In the preview, we can see this in the accessibility tab:

Another issue that this can cause is that now the button no longer uses the underlying text as the label, so the user would only hear the tooltip text but would not know what that text it is defining.

[tw15egan]

I just did some further research into this issue, and it seems like the root of the issue is that we are trying to use TooltipDefinition as an icon-only button. But changing these to Button and not TooltipDefinition in ActionBar.js in the website repo, I was able to get rid of the errors

<Button
        kind="ghost"
        hasIconOnly
        onFocus={() => setIsActionBarVisible(true)}
        onClick={handleDownload}
        tooltipAlignment="center"
        tooltipPosition="top"
        iconDescription="Download SVG"
        className={styles.tooltip}
        triggerClassName={styles.trigger}
        renderIcon={Download16}
      />

@andreancardona I'll throw up a PR so you can take a look and verify if this will close out the linked issue 👍🏻

PR: carbon-design-system/carbon-website#2144

[andreancardona]

Closing this issue with @tw15egan fix :) carbon-design-system/carbon-website#2144