Components › Overlays & dialogs › Dialog › MorphText

MorphText

canon

A text layer whose width moves on the spring while the old and new text cross-fade in place — one element that reshapes, never two labels swapped. First shipped use: the New deal search step's primary action, "Select record" ↔ "Create person".

27 September 2026: merged on main as !3957. Used live in DealSubjectStep's footer CTA (feat/acrm-322-vyber-zaznamu, main 40402b85).

Used in 1 file · 1 area · 1× — components/search

Keyboard

  • Not focusable and not interactive. MorphText renders inline text only; the host control (Button, chip) keeps its own keyboard behaviour untouched.

ARIA

  • No role, no aria-live region. The outgoing text layer is aria-hidden="true" (.acrm-morph-text-l.is-leaving); the incoming layer is plain visible text with no hiding attribute.
  • Consequence: the component itself does not announce the change. Whether a screen reader notices the new text depends entirely on the host: if the host is a live region or already carries aria-live, the new text is picked up as part of that; a button whose accessible name changes on click is, in most screen readers, re-announced only when it regains focus or when the interaction that changed it (a click) is itself being narrated — there is no guarantee across browsers/AT. A caller for whom the label change must be announced immediately (e.g. a change the user did not directly trigger) should wrap the host in aria-live="polite" itself; MorphText does not add this by default because most of its call sites are the direct result of the user's own action, where an explicit announcement would be redundant.
  • The accessible name of the host element (a Button's label) is simply whatever text is currently rendering — MorphText does not maintain a separate accessible name.

Focus

  • Nothing focusable inside; the host keeps whatever focus ring and focus behaviour it already has (see button.a11y.md). Focus never moves as a side effect of the text morphing.

Contrast

  • Draws no colour of its own — text inherits color/font from the host, so contrast is governed by the host component's tokens.

Known limits

  • No live-region announcement by default (see ARIA above) — a caller that needs the swap narrated as it happens must add aria-live around the host.
  • prefers-reduced-motion: reduce swaps the text with no width animation and no cross-fade (leaving is skipped entirely — see MorphText.tsx's prefersReducedMotion() check), so the accessible name simply updates instantly.
  • Because the outgoing layer briefly coexists in the DOM (aria-hidden), a screen reader that ignores aria-hidden in some edge case could theoretically read stale text; this has not been observed but is a property of the technique, not of this specific implementation.

Source: docs/dialog/morph-text.a11y.md · GitLab