docs: Add AI disclosure example to Tooltip docs - #4126
Conversation
📝 WalkthroughWalkthroughAdds an ChangesAI disclosure Tooltip example
Estimated code review effort: 2 (Simple) | ~10 minutes Possibly related PRs
Suggested labels: Suggested reviewers: 🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Pull request overview
Adds a new Tooltip documentation example illustrating an “AI disclosure” pattern, intended to help consumers communicate when content/functionality is AI-powered.
Changes:
- Adds a new
AIDisclosureStorybook story for Tooltip. - Extends Tooltip MDX docs with an “AI Disclosure” section and embedded example.
- Introduces a new
AIDisclosureexample component demonstrating the pattern in context.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| modules/react/tooltip/stories/Tooltip.stories.ts | Registers the new AIDisclosure story render entry for Storybook. |
| modules/react/tooltip/stories/Tooltip.mdx | Adds an “AI Disclosure” documentation section and renders the new example. |
| modules/react/tooltip/stories/examples/AIDisclosure.tsx | Implements the new example UI combining Card, Tooltip, TertiaryButton, and ExternalHyperlink. |
Suppressed comments (1)
modules/react/tooltip/stories/examples/AIDisclosure.tsx:31
ExternalHyperlinkrenders an external-link icon withrole="img"and usesiconLabelfor its accessible name. In this exampleiconLabelis omitted, so the icon may be announced without a label (or inconsistently across AT), which is an accessibility regression compared to otherExternalHyperlinkexamples in the repo.
<ExternalHyperlink href="https://en.wikipedia.org/wiki/Giant_Pacific_octopus">
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <Tooltip title="This content is generated by AI" variant="alt" placement="right-end"> | ||
| <TertiaryButton | ||
| size="extraSmall" | ||
| icon={infoSparkleIcon} | ||
| aria-label="This functionality is powered by AI" | ||
| /> | ||
| </Tooltip> |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@modules/react/tooltip/stories/examples/AIDisclosure.tsx`:
- Around line 19-24: Update the TertiaryButton aria-label in the AIDisclosure
example to use the same canonical disclosure statement as the Tooltip title, so
both surfaces communicate “This content is generated by AI” while preserving the
button’s accessible name.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: 95427452-5bd8-425b-9e91-f9f73ec081be
📒 Files selected for processing (3)
modules/react/tooltip/stories/Tooltip.mdxmodules/react/tooltip/stories/Tooltip.stories.tsmodules/react/tooltip/stories/examples/AIDisclosure.tsx
| <Tooltip title="This content is generated by AI" variant="alt" placement="right-end"> | ||
| <TertiaryButton | ||
| size="extraSmall" | ||
| icon={infoSparkleIcon} | ||
| aria-label="This functionality is powered by AI" | ||
| /> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Align the accessible name with the disclosure text.
The Tooltip displays This content is generated by AI, but the button name is This functionality is powered by AI. Use one canonical disclosure statement for both surfaces.
Proposed fix
- aria-label="This functionality is powered by AI"
+ aria-label="This content is generated by AI"As per coding guidelines: interactive elements must have accessible names.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <Tooltip title="This content is generated by AI" variant="alt" placement="right-end"> | |
| <TertiaryButton | |
| size="extraSmall" | |
| icon={infoSparkleIcon} | |
| aria-label="This functionality is powered by AI" | |
| /> | |
| <Tooltip title="This content is generated by AI" variant="alt" placement="right-end"> | |
| <TertiaryButton | |
| size="extraSmall" | |
| icon={infoSparkleIcon} | |
| aria-label="This content is generated by AI" | |
| /> |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@modules/react/tooltip/stories/examples/AIDisclosure.tsx` around lines 19 -
24, Update the TertiaryButton aria-label in the AIDisclosure example to use the
same canonical disclosure statement as the Tooltip title, so both surfaces
communicate “This content is generated by AI” while preserving the button’s
accessible name.
Source: Coding guidelines
Summary
Fixes: #4125
Release Category
Components
Checklist
ready for reviewhas been added to PRFor the Reviewer
Where Should the Reviewer Start?
Areas for Feedback? (optional)
Testing Manually
Screenshots or GIFs (if applicable)
Default:
Tooltip visible:
Thank You
Summary by CodeRabbit