Skip to content

fix(expandable-tabs-divider): settle without transitions, Divider accessible name - #688

Open
blvdmitry wants to merge 4 commits into
fix/toastfrom
fix/expandable-tabs-divider
Open

blvdmitry wants to merge 4 commits into
fix/toastfrom
fix/expandable-tabs-divider

Conversation

@blvdmitry

Copy link
Copy Markdown
Contributor

Summary

PR 8, the last PR in the Phase −1 bug-fix stack.

  • Expandable (Expandable/Expandable.tsx):
    • After starting the size animation, it checks a couple of frames later (onNextFrame) whether a width/height CSS transition is running. If not, it settles immediately: clears the inline size, sets hidden when closed, and calls onAfterClose.
    • A pendingTransitionRef stops the fallback from settling twice when transitionend does fire, or after active has changed again.
  • Tabs (Tabs/TabsList.tsx): the same fallback for the selection indicator. When the status is animated and the selector has no running animations, the status goes back to idle. It only updates while the status is still animated.
  • Divider (Divider/Divider.tsx): string children are now used as aria-label on the role="separator" element. Separator children are presentational, so the label wasn't announced. An aria-label passed in attributes takes precedence.

Tests (each fails on the base branch and passes here):

  • Expandable.stories.tsx: test: settles without size transition
  • Tabs.stories.tsx: test: selector settles without transition
  • Divider.stories.tsx: test: label

Related Issue

Phase −1 of the headless-extraction plan.

Screenshots / Recordings

No visual changes with the default styles.

Notes for Reviewers

  • This PR is stacked on fix(toast): removal without height transition, resume remaining time, blur while hovered #687 (fix/toast).
  • Existing test leak: some existing story leaves data-rs-no-transition on <html> after it runs. In a full-file run, later stories therefore run with transitions disabled.
    • The new Tabs and Expandable tests call enableTransitions() first so they cover the animated path.
    • Finding the leaking story is worth a follow-up.
  • Note on approach: the Expandable fallback checks for a running size transition, not just an empty getAnimations(). That way it also handles custom styles that keep transitions on other properties.
  • Results: pnpm lint and tsc pass. pnpm test:unit has 181 passing. pnpm test:browser has 628 passing and 1 failing, Image > onLoad, which also fails on main in this sandbox because it has no network access.

Generated by Claude Code

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants