feat(tooltip): add toggletip support with click-to-toggle behavior#733
Draft
jgorfine-zendesk wants to merge 3 commits intomainfrom
Draft
feat(tooltip): add toggletip support with click-to-toggle behavior#733jgorfine-zendesk wants to merge 3 commits intomainfrom
jgorfine-zendesk wants to merge 3 commits intomainfrom
Conversation
Add isToggletip prop to useTooltip hook for click-based interaction, essential for touch devices where hover doesn't exist. Toggletips use role="status" for screen reader announcements and include outside click detection, Escape key handling, and smart focus management. Changes: - Add isToggletip, window, and document props to IUseTooltipProps - Add isAnnouncementReady to IUseTooltipReturnValue for SR re-announcements - Add getDocument() helper for SSR-safe document access - Add tooltipRef and isAnnouncementReady state to useTooltip hook - Add handleEscapeKey() to close toggletip with smart focus restoration - Add handleToggletipTriggerClick() to handle open/re-announcement logic - Add outside click detection effect (closes on clicks outside trigger/tooltip) - Add document-level Escape key detection effect - Update getTriggerProps() with conditional toggletip behavior (click handler, no hover/focus, no aria-describedby) - Update getTooltipProps() with conditional toggletip behavior (role="status", ref for outside click detection) - Update TooltipContainer defaultProps to include isToggletip: false - Update TooltipContainer propTypes to include isToggletip, window, and document - Add 15 comprehensive toggletip tests (ARIA attributes, click interaction, re-announcement, blur, outside clicks, Escape key, SSR) - Add toggletip usage documentation to README with examples and best practices Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Add ToggletipStory.tsx showcasing toggletip click-to-toggle behavior - Register Toggletip story in patterns.stories.tsx - Demo includes visual styling and proper use of isAnnouncementReady Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
…tests Fix TS2322 errors in CircleCI where button type property was incompatible: "Type 'string | undefined' is not assignable to type '"button" | "submit" | "reset" | undefined'." Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
This PR adds toggletip support to the tooltip container, providing click-to-toggle behavior that follows accessibility best practices. The implementation follows the pattern outlined in the Inclusive Toggletips section of Heydon Pickering's Inclusive Components pattern library.
Toggletips are distinct from tooltips: they open/close on click rather than hover/focus, making them suitable for content that needs to persist for reading.
Key features:
isToggletipprop enables toggletip moderole="status"for live region announcementsisAnnouncementReadyflag controls content population for screen reader re-announcementsDetail
The implementation adds an
isToggletipboolean prop touseTooltipandTooltipContainer. When enabled:role="status"instead ofrole="tooltip", noaria-describedbyon triggerFiles changed:
packages/tooltip/src/useTooltip.ts: Core toggletip logicpackages/tooltip/src/TooltipContainer.tsx: Prop type definitionspackages/tooltip/src/TooltipContainer.spec.tsx: Comprehensive test suitepackages/tooltip/README.md: Usage documentationpackages/tooltip/demo/~patterns/stories/ToggletipStory.tsx: Storybook demoChecklist
npm start)🤖 Built with Claude Code