MorphText
canonA 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.
MorphTextrenders inline text only; the host control (Button, chip) keeps its own keyboard behaviour untouched.
ARIA
- No role, no
aria-liveregion. The outgoing text layer isaria-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 inaria-live="polite"itself;MorphTextdoes 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 whatevertextis currently rendering —MorphTextdoes 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/fontfrom 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-livearound the host. prefers-reduced-motion: reduceswaps the text with no width animation and no cross-fade (leavingis skipped entirely — seeMorphText.tsx'sprefersReducedMotion()check), so the accessible name simply updates instantly.- Because the outgoing layer briefly coexists in the DOM (
aria-hidden), a screen reader that ignoresaria-hiddenin 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