[Bug]: <Button> does not correctly apply aria-describedby when used inside <Callout> (React Carbon)

[grek889]

Package

@carbon/react

Browser

No response

Package version

1.80.0

React version

18.3.1

Description

When using a custom Button component that wraps Carbon’s Button inside a Callout, an accessibility error is thrown in Storybook:

Error: interactive child node(s) should have an `aria-describedby` property with a value matching the value of `titleId`.

Even though I pass aria-describedby explicitly to the custom Button, the rendered output seems to ignore or overwrite it.

Reproduction/example

https://stackblitz.com/edit/github-1qhjyknb?file=src%2FApp.tsx

Steps to reproduce

1. Create a wrapper component around Carbon’s and pass aria-describedby as a direct prop (not via ...rest).

2. Use this custom Button inside a Carbon component that also defines a title and titleId.

3. Pass the titleId as the value for aria-describedby in the Button:

const titleId = useId();

<Callout title="Alert Title" titleId={titleId}>
  <Button
    aria-describedby={titleId}
    iconDescription="Close alert"
    hasIconOnly
  />
</Callout>

4.Render this component.

5. Observe the console.

Suggested Severity

None

Application/PAL

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[annawen1]

Hi @grek889 this issue seems to be caused by the fact that the Button component placed into the Callout is an icon only button. This results in the icon only button having an associated tooltip for accessibility reasons that takes precedence over the passed in id for aria-describedby.

If you pass in a regular button, it will render without the issue. Is there a particular use case for using icon only button within Callout you can share with us?

[grek889]

Yes, for example, like this

[annawen1]

@grek889 is the icon only button you're referring to the close button on the right side of the screenshot you posted?

If so, maybe you can use the InlineNotification component instead?
https://react.carbondesignsystem.com/?path=/story/components-notifications-inline--default

[grek889]

Yes, I can use other components and implementations at the moment, but isn't it a bug that in the current implementation I can't use Callout along with the icon only button?

[annawen1]

According to our design guidance, Callout should not contain an action button and should be placed near an action button instead.

https://carbondesignsystem.com/components/notification/usage/#actions