Carbon: "Button With icon" should have aria-hidden="true" on the svg

[carmacleod]

The icon in a "Button With icon" is purely decorative, and as such, it (the svg) should have aria-hidden="true" so that screen readers don't try to say something about them.

Please add aria-hidden="true" to the svg element for all of the "Xxx Button With icon" examples on the Carbon Button component page.

It might be nice if there was an "Accessibility Notes" section on the Button Component page that mentioned this, i.e. something like:

• Note: The SVG in a "Button With icon" is purely decorative, and so it should have aria-hidden="true" to hide it from Assistive Technology such as screen readers. It does not need to have a title or desc.

[carbon-bot]

:tada: This issue has been resolved in version 9.66.5 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket:

[carmacleod]

@emyarod Thank-you! Haven't tried this yet, but just making sure that if the Button _only_ has an icon (i.e. no visible text) then the icon needs to _not_ be hidden... sorry if I wasn't clear about this before. i.e. for a "close" button that has only an 'x' icon, the svg for the 'x' needs to have role="img" and aria-label="close".
Is that still the case?

[emyarod]

hi @carmacleod thank you for the clarification! The changes I am making are in the documentation, and I believe if the user would have to add the role and aria-label attributes in their own code when using a button with an icon and without any text.

I can probably enforce this on the React side, but probably not on the vanilla side if I'm not mistaken. I can open another ticket in the React repo and reference your latest comment, but please let me know if I have misunderstood your comment!

[carmacleod]

Ah, of course. Sorry - some of our code uses vanilla and some uses react, and I keep going back and forth. :)

I think the following carbon react issue probably covers enforcing presentational vs. non-presentational icon markup: https://github.com/IBM/carbon-components-react/issues/1695

Thanks for fixing up the vanilla doc! Do you think it might be useful to show an "Icon only" button (like the close button mentioned above) in the vanilla doc as well? Carbon users often create icon buttons, and it would be nice to show them the correct accessible markup. :)
If you agree, then I can open a new issue to request it.

[emyarod]

I thought about adding an "icon only" example after seeing your comment yesterday and agree that it would be useful to include in the documentation. It would be great if you could create a new issue about that for me, and I suppose I can use https://github.com/IBM/carbon-components-react/issues/1695 to take care of the similar changes in the React repo

[carmacleod]

Hi @emyarod. I opened https://github.com/IBM/carbon-components/issues/1667 to create an "icon only" example.
I notice that the https://www.carbondesignsystem.com/components/button/code page is not yet updated with your fixes for this issue - when will that happen?

[emyarod]

hi @carmacleod thank you for opening up that ticket! I believe the docs require a manual build and deploy. at the moment I don't have an exact date on when the site will be updated but I expect it to update sooner rather than later