Fix: Accessible name mismatch for AI Chat button

[huangkevin-apr]

Summary

This PR fixes an accessibility violation on website doc page where the accessible name of the AI Chat button did not match its visible label, as reported by the IBM Equal Access Accessibility Checker.

The issue occurred because the button’s accessible name was implicitly derived from a non-string label prop (a JSX node), which resulted in an incorrect or opaque accessible name (e.g. [object Object]). This caused screen readers and a11y tools to report a mismatch between the visible label and the accessible name.

Solution

Explicitly set a string-based accessible name using the aria-label prop.

Keep the existing label prop for tooltip / visual rendering only.

<Button
  iconOnly={!showLabel || isMobile}
  size="medium"
  variant="header"
  label={
+ aria-label={t(language, 'ai_chat_ask', assistant.label)} // Explicit accessible name string
    <div className="flex items-center gap-2">
      {t(language, 'ai_chat_ask', assistant.label)}
      {withShortcut ? (

This ensures:

• The accessible name is always a plain string
• It matches the visible label text
• Screen readers and automated checkers can correctly interpret the control

Testing

The patch submitted in this PR was generated by A11YRepair, an automated Web Accessibility repair tool that I developed to address common accessibility violations in web applications. The generated fixes were manually reviewed and validated before submission.

The fix has been manually verified in the following locales:

✅ English
✅ Chinese
✅ French

[changeset-bot]

🦋 Changeset detected

Latest commit: bc80ccb

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
gitbook	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[SamyPesse]

Thank you! please update the branch with main where we made changes to the CI to trigger preview deployments. And also add a changeset by running bun run changeset

[SamyPesse]

You have to use tString here, otherwise it returns a ReactNode

[huangkevin-apr]

Thanks for your feedback, I have updated these details.