Texto en marquesina

Categoría: Comunicación
Tokens: comp.marquee-text
Nivel: Base

Descripción general

Web: tanrei-marquee-text; clock_loader_40
SwiftUI: TanreiMarqueeText; radio_button_unchecked
Jetpack Compose: TanreiMarqueeText; radio_button_unchecked
Flutter: TanreiMarqueeText; radio_button_unchecked
React Native: MarqueeText; radio_button_unchecked

Generado a partir de docs/status/status.json, specs/marquee-text.spec.json

Un título que no cabe y otro que sí

Pista 7 — Un título muy largo que no cabe en la fila en la que está

Título corto

Un texto en marquesina es una línea del texto del producto en un sitio demasiado estrecho para ella. En reposo se lee como cualquier línea cortada: empieza en el inicio de la línea y termina con puntos suspensivos donde se corta. Mientras dura su activador (de forma predeterminada, mientras el puntero está encima o el control en el que está tiene el foco del teclado), se desplaza de lado a un ritmo constante, expresado en píxeles por segundo, de modo que cada parte del texto pasa por la vista; luego vuelve a su inicio y se detiene. Pon el puntero sobre la primera línea de arriba. La segunda cabe, así que nunca se mueve: un texto en marquesina cuyo texto cabe es una línea de texto sin más.

Encaja en los sitios donde una línea tiene un ancho fijo y su texto suele ser corto, pero a veces no lo es: el título de una fila de lista, una etiqueta de una barra o un panel de navegación, un chip, el nombre de lo que se está reproduciendo, una celda de una tabla. Donde una línea cortada basta casi siempre, la otra opción es dejarla cortada y dar el texto completo en un tooltip, que lo muestra entero de una vez y no mueve nada.

Uso

Los ejemplos de Web y React muestran la especificación actual. SwiftUI, Compose, Flutter y React Native están previstos: todavía no ofrecen un texto en marquesina.

<!-- Lo predeterminado: se mueve mientras el puntero está sobre la línea o sobre el control en el que está, o mientras ese control tiene el foco del teclado. -->
<tanrei-marquee-text>Pista 7 — Un título muy largo que no cabe en la fila en la que está</tanrei-marquee-text>

<!-- Va hasta su final y vuelve, una vez por cada paso del cursor o cada foco. -->
<tanrei-marquee-text loop="bounce" iterations="1">…</tanrei-marquee-text>

<!-- El nombre de lo que se reproduce: se mueve solo, con su propio botón de pausa. -->
<tanrei-marquee-text trigger="always" playback-control play-label="Reproducir el texto en movimiento" pause-label="Pausar el texto en movimiento">
  Reproduciendo ahora: un título muy largo de una canción de un artista con un nombre largo
</tanrei-marquee-text>

<script type="module">
  import '@tanrei/web/components/marquee-text';
</script>

import { MarqueeText } from '@tanrei/react';

<MarqueeText>{track.title}</MarqueeText>

<MarqueeText loop="bounce" iterations={1}>{track.title}</MarqueeText>

{/* Se mueve solo; el control propio de la página que pausa todo lo que se mueve fija paused. */}
<MarqueeText trigger="always" paused={motionPaused}>
  {`Reproduciendo ahora: ${track.title}`}
</MarqueeText>

Especificaciones

Anatomía

Parte	Descripción
1 `viewport`	The line's box: as wide as its place, one line high, clipping the text. While the text moves, its clipped edges fade out.
2 `text`	The product's text, on one line, in the text style of where it stands. At rest it starts at the line's start and ends with an ellipsis where it is cut.
3 `copy` · opcional	While the text repeats, a second drawing of it a gap after the first, so that the line never empties. Hidden from assistive technology.
4 `playback-control` · opcional	While the text scrolls by itself all the time, an icon-only Button of the text variant and the small size at the line's end, pausing and playing the motion.

Propiedades

Propiedad	Tipo	Valor predeterminado	Descripción
`trigger`	`hover-or-focus` \| `hover` \| `focus` \| `always`	`"hover-or-focus"`	When the text scrolls. hover: while a fine pointer is over the line or the control it stands in. focus: while that control, or something in the line, has keyboard focus. hover-or-focus: either. always: from when the line is shown, by itself, with a way to pause it.
`loop`	`repeat` \| `bounce`	`"repeat"`	How a pass goes. repeat: the text moves toward its start until its end has passed, a copy following it a gap behind, so that the line comes back to where it began. bounce: the text moves until its end is in view, pauses, and moves back.
`speed`	`number`	`null`	How fast the text moves, in pixels per second, so that a long text and a short one move at the same pace. Null takes comp.marquee-text.speed.
`startPause`	`number`	`null`	How long the text rests at its start before each pass, in milliseconds; 0 rests none. Null takes comp.marquee-text.motion.start-pause.
`endPause`	`number`	`null`	While loop is bounce: how long the text rests with its end in view before it moves back, in milliseconds. Null takes comp.marquee-text.motion.end-pause.
`iterations`	`number`	`null`	How many passes a trigger plays before the text rests at its start. Null plays passes without end while the trigger holds: until the pointer leaves or focus moves away for hover, focus and hover-or-focus, and for as long as the line is shown for always.
`paused`	`boolean`	`false`	Holds the motion where it is: set by the playback control, or by the product's own control that pauses every moving part of the page.
`playbackControl`	`boolean`	`false`	While trigger is always: whether the line draws its playback control. Off by default: a product that moves text all the time gives a way to pause it — this control, or its own control that pauses every moving part of the page and sets paused; without either, a person cannot stop the motion, which WCAG 2.2.2 requires of motion that lasts more than five seconds.
`playLabel`	`string`	`""`	The playback control's accessible name while the motion is paused ("Play scrolling text"). Required while the control is drawn.
`pauseLabel`	`string`	`""`	The playback control's accessible name while the text moves ("Pause scrolling text"). Required while the control is drawn.

Slots

Slot	Descripción
`default`	The text: plain text, or inline content of the product's (a bold run, an inline mark). A fixture's string is drawn as plain text.

Eventos

Evento	Descripción
`pausedChange`	The person paused or played the motion with the playback control; carries paused. The product that sets paused emits nothing.

Estados

Comportamiento

Requisitos en formato EARS. Cada implementación de plataforma se prueba contra estos identificadores. El texto de los requisitos se muestra tal como está en la especificación, en inglés.

ID	Requisito
`MRQ-1`	THE marquee text SHALL lay its content out on one line, in the text style, color and direction of where it stands, in a viewport as wide as its place and one line high, and SHALL clip it there; WHILE the content fits, THE marquee text SHALL draw it as plain text, start nothing, draw no copy and no playback control, and be in every way a line of text.
`MRQ-2`	WHILE the content does not fit and does not move THE marquee text SHALL rest it with its start at the viewport's start, cut at the viewport's end with an ellipsis of the platform's text, so that the line reads as any cut line does.
`MRQ-3`	WHILE its trigger holds — trigger hover: a fine pointer is over the line or over the nearest element around it that takes presses or focus; focus: that element, or something inside the line, has keyboard focus; hover-or-focus: either; always: the line is shown and in view — and the content does not fit, THE marquee text SHALL wait comp.marquee-text.motion.start-delay (for always, startPause) and then play its passes (MRQ-4, MRQ-5): iterations passes where iterations is not null, and without end while the trigger holds where it is null; after the last pass it SHALL rest as MRQ-2 says. WHEN the trigger ends before the passes do THE marquee text SHALL return the content to its start over comp.marquee-text.motion.return-duration with comp.marquee-text.motion.return-easing and rest; a new trigger SHALL play its passes again from the start.
`MRQ-4`	WHILE loop is repeat THE marquee text SHALL play a pass by moving the content toward its start edge at speed (comp.marquee-text.speed while speed is null) in pixels per second, steadily, with comp.marquee-text.motion.easing, a copy of the content following it comp.marquee-text.gap behind, until the copy stands where the content began — then the line looks as it did — and SHALL rest there startPause (comp.marquee-text.motion.start-pause while it is null) before the next pass.
`MRQ-5`	WHILE loop is bounce THE marquee text SHALL play a pass by moving the content toward its start edge at speed until its end stands at the viewport's end, resting there endPause (comp.marquee-text.motion.end-pause while it is null), moving it back at the same speed until its start stands at the viewport's start, and resting there startPause before the next pass; it SHALL draw no copy.
`MRQ-6`	WHILE the marquee text plays its passes — moving, or resting between two passes — THE marquee text SHALL draw no ellipsis and SHALL fade each edge of the viewport behind which content lies hidden over comp.marquee-text.fade.extent, from clear to the content's full color; WHEN it rests after its passes, or because its trigger ended, it SHALL draw the ellipsis of MRQ-2 again and no fade.
`MRQ-7`	THE marquee text SHALL move the content in the direction its text is written: toward the left for text whose direction is left to right and toward the right for text whose direction is right to left, the direction being the content's own — the base direction of its first strong character, or the layout direction where it has none — so that the line always moves to bring the text's hidden end into view; it SHALL rest it at the start edge of that direction, cut at the other.
`MRQ-8`	WHERE motion is reduced THE marquee text SHALL NOT move its content; WHILE a trigger other than always holds it SHALL instead show the hidden part at once, without a motion, by placing the content so that the next viewport's width of it lies in view, the last view ending at the content's end, with the fade of MRQ-6 at each edge behind which content lies hidden, resting startPause on each such view and returning to the start at once after the last, so that every part of the text can be seen; it SHALL go through the views iterations times, or without end while the trigger holds where iterations is null. WHILE trigger is always it SHALL rest as MRQ-2 says and draw no playback control.
`MRQ-9`	WHILE trigger is always and the content moves THE marquee text SHALL hold its motion where it is while a pointer is over the line or focus is within it, and go on from there when neither is; WHILE paused is true it SHALL hold its motion where it is until paused is false; WHILE the line is out of view or its page is hidden it SHALL hold its motion and start the pass again from the start when it is back. Holding on hover and focus SHALL NOT be taken as the way to stop the motion: that is MRQ-10.
`MRQ-10`	WHILE trigger is always, playbackControl is true, the content does not fit and motion is not reduced, THE marquee text SHALL draw at the end of its line, comp.marquee-text.playback.gap after the viewport, an icon-only Button of the text variant and the small size, showing the icon set's pause glyph while the text moves and play_arrow while it is paused, named by pauseLabel while it moves and playLabel while it is paused; WHEN the person activates it THE marquee text SHALL toggle paused and emit pausedChange once, keeping focus on the button. WHILE trigger is always, the content does not fit, motion is not reduced and playbackControl is false, THE marquee text SHALL in debug builds report once that the product must give the page a control that sets paused, or set playbackControl (WCAG 2.2.2).
`MRQ-11`	THE marquee text SHALL expose its content to assistive technology once, whole, as the text it is, read where the line stands, and SHALL hide the copy, the ellipsis and the fade from it; the motion SHALL change nothing it exposes, SHALL make no announcement, and SHALL take no focus: the line itself is not a focus stop.
`MRQ-12`	WHILE playbackControl would be drawn and playLabel or pauseLabel is empty THE marquee text SHALL read the missing name from the product's words, still draw the control where neither gives it, and in debug builds report that it has no accessible name; THE marquee text SHALL have no words of its own.
`MRQ-13`	WHILE the text size is enlarged THE marquee text SHALL grow its line with the text and move it at speed times the ratio of its text's size to the size of that text style at the default text size, so that as many characters pass in a second at every text size; the fade and the gap SHALL keep their sizes.
`MRQ-14`	WHEN the content, the viewport's width or the text size changes THE marquee text SHALL measure again whether the content fits, and WHILE a pass is playing SHALL end it at once and start again from the start where it still does not fit, or rest as MRQ-1 says where it now does; WHEN speed, startPause, endPause, loop or trigger changes it SHALL take the new value from the next pass.
`MRQ-15`	IF speed is not a positive number, or startPause, endPause or iterations is negative, THE marquee text SHALL treat it as null and in debug builds report it; WHEN trigger or loop names a value the component does not define THE marquee text SHALL use the default value (hover-or-focus, repeat) and in debug builds report the unknown value.
`MRQ-16`	WHERE the layout direction is right-to-left THE marquee text SHALL place its playback control at the left end of the line, and the content SHALL move and rest by its own direction as MRQ-7 says, whatever the layout direction.
`MRQ-17`	THE marquee text SHALL take its layout direction from where it is used — the direction of the nearest ancestor that sets one, and the platform's own where none does — and SHALL have no direction setting of its own; WHEN that direction changes while the line is shown THE marquee text SHALL rest at once and draw itself for the new direction.
`MRQ-18`	WHERE the platform draws with a person's own forced colors THE marquee text SHALL draw its text in the color the platform gives the element around it, and its fade SHALL be no fade: the content is clipped at the viewport's edge.

Correspondencia de nombres por plataforma

Paridad no significa API idénticas. Cada plataforma expresa el mismo contrato con su propio estilo.

Especificación	Web	SwiftUI	Jetpack Compose	Flutter	React Native
Componente	`tanrei-marquee-text`	`TanreiMarqueeText`	`TanreiMarqueeText`	`TanreiMarqueeText`	`MarqueeText`
`trigger` · Propiedad	`trigger`	`trigger`	`trigger`	`trigger`	`trigger`
`loop` · Propiedad	`loop`	`loop`	`loop`	`loop`	`loop`
`speed` · Propiedad	`speed`	`speed`	`speed`	`speed`	`speed`
`startPause` · Propiedad	`startPause`	`startPause`	`startPause`	`startPause`	`startPause`
`endPause` · Propiedad	`endPause`	`endPause`	`endPause`	`endPause`	`endPause`
`iterations` · Propiedad	`iterations`	`iterations`	`iterations`	`iterations`	`iterations`
`paused` · Propiedad	`paused`	`isPaused`	`paused`	`paused`	`paused`
`playbackControl` · Propiedad	`playbackControl`	`showsPlaybackControl`	`playbackControl`	`playbackControl`	`playbackControl`
`playLabel` · Propiedad	`playLabel`	`playLabel`	`playLabel`	`playLabel`	`playLabel`
`pauseLabel` · Propiedad	`pauseLabel`	`pauseLabel`	`pauseLabel`	`pauseLabel`	`pauseLabel`
`pausedChange` · Evento	`pausedchange`	`isPaused binding`	`onPausedChange`	`onPausedChanged`	`onPausedChange`
Notas	`<tanrei-marquee-text trigger loop speed start-pause end-pause iterations paused playback-control play-label pause-label>text</tanrei-marquee-text>`. The slotted text is drawn once; the copy of MRQ-4 is a clone in the shadow root with `aria-hidden="true"` and `inert`. Whether the text fits is read with a `ResizeObserver` on the viewport and when the slotted text changes; the motion of a whole run of passes is one Web Animations API `translate` animation whose keyframes hold the pauses, each pass's travel lasting the distance divided by speed. The fade is a `mask-image` gradient. The trigger's area is the nearest ancestor, across shadow roots, that takes presses or focus, and the host where there is none; hover is read from `pointerenter` and `pointerleave` of a mouse or a pen, focus from `focusin` and `focusout` of an element that matches `:focus-visible`. The playback control is a `<tanrei-button variant="text" size="small">` in the shadow root. The text size of MRQ-13 is the ratio of the browser's default font size (`font-size: medium`) to 16 px. The element `<marquee>` is not used: it is deprecated, ignores reduced motion and cannot be paused by the person.	A `TimelineView(.animation)` offset inside a clipped `ViewThatFits`-measured line; the copy is `accessibilityHidden(true)`; `accessibilityReduceMotion` from the environment.	Not `Modifier.basicMarquee` alone: it cannot pause, has no bounce, and ignores the motion settings by design (it runs under a fixed motion scale). Built on the same measurement (no motion when the content fits) with an `Animatable` offset, and reads the animator duration scale for reduced motion.	A `Ticker`-driven offset in a `ClipRect`; the copy inside `ExcludeSemantics`; `MediaQuery.disableAnimationsOf` for reduced motion.	An `Animated` offset on the native driver; the copy with `importantForAccessibility="no-hide-descendants"` and `accessibilityElementsHidden`; `AccessibilityInfo.isReduceMotionEnabled` for reduced motion. hover applies where the platform has a pointer (iPadOS, the web build).

Tokens

Token	Alias de	Valor resuelto (claro)
`--tanrei-comp-marquee-text-fade-extent`	`sys.space.space200`	16px
`--tanrei-comp-marquee-text-gap`	`sys.space.space600`	48px
`--tanrei-comp-marquee-text-motion-easing`	`sys.motion.easing.linear`	cubic-bezier(0, 0, 1, 1)
`--tanrei-comp-marquee-text-motion-end-pause`	—	1200ms
`--tanrei-comp-marquee-text-motion-return-duration`	`sys.motion.role.state.default`	250ms
`--tanrei-comp-marquee-text-motion-return-easing`	`sys.motion.easing.state`	cubic-bezier(0.2, 0, 0, 1)
`--tanrei-comp-marquee-text-motion-start-delay`	`sys.motion.role.show-delay`	300ms
`--tanrei-comp-marquee-text-motion-start-pause`	—	1200ms
`--tanrei-comp-marquee-text-playback-gap`	`sys.space.space100`	8px
`--tanrei-comp-marquee-text-speed`	—	30

Fixtures

Representaciones canónicas. Todas las plataformas capturan cada fixture con el mismo identificador para poder comparar los resultados.

default

slots: default

fits

slots: default

bounce

loop: bounce slots: default

always

trigger: always slots: default

always-control

trigger: always playbackControl: true playLabel: Play scrolling text pauseLabel: Pause scrolling text slots: default

always-paused

trigger: always paused: true playbackControl: true playLabel: Play scrolling text pauseLabel: Pause scrolling text slots: default

rtl

trigger: always playbackControl: true playLabel: Play scrolling text pauseLabel: Pause scrolling text direction: rtl slots: default

Generado a partir de specs/marquee-text.spec.json, tokens/comp/marquee-text.tokens.json, design/tokens/

Pautas

Cuándo usarlo

Usa un texto en marquesina donde una línea debe seguir siendo una sola, con un ancho que fija el diseño, y alguien necesita a veces la parte cortada: el título largo de una canción en una fila de una lista de reproducción, la etiqueta de un destino que un idioma alarga, un chip que contiene un nombre. La línea conserva su altura y su sitio, y muestra el resto solo cuando se le pide.

No lo uses para un texto que alguien deba leer entero para actuar: una advertencia, un error, las condiciones de una elección, un importe, una instrucción. El texto en movimiento es lento de leer y fácil de pasar por alto. Dale a ese texto las líneas que necesite y deja que salte de línea.

Cómo elegir el activador

Activador	Para qué
`hover-or-focus`	El predeterminado y la opción correcta casi siempre: la línea se mueve cuando alguien la señala con el puntero o llega con el teclado al control en el que está, así que ambos ven lo mismo.
`hover`	Una lista larga que quienes usan el teclado recorren deprisa, donde que el título de cada fila empiece a moverse al pasar el foco distraería más de lo que ayuda.
`focus`	Una línea en una superficie que se usa sobre todo con el teclado o con un mando a distancia, donde el paso del cursor no significa nada.
`always`	El nombre de lo que se reproduce, y líneas parecidas que se miran de reojo más que señalarse. Se mueve sola desde que se muestra y necesita una forma de pausarla (consulta Accesibilidad).

El área del activador es el control en el que está la línea (una fila, un chip, un destino), no solo la línea: con el puntero en cualquier punto de la fila, su título se mueve. Como paso del cursor solo cuenta un puntero preciso, como un ratón o un lápiz; un toque no inicia el movimiento.

repeat o bounce

repeat (el predeterminado) mueve el texto hacia su inicio hasta que su final ha pasado, con una copia que lo sigue a cierta distancia, de modo que la línea nunca se vacía y vuelve a quedar como empezó. Se lee como un rótulo de noticias y conviene a una línea que se mueve durante un rato.
bounce mueve el texto hasta que su final queda a la vista, se detiene ahí y lo devuelve. No dibuja copia, así que el final y el inicio nunca se ven uno al lado del otro. Conviene a una línea que se mueve una vez, para echar un vistazo breve a su final.

Ambos mueven el texto en la dirección en que está escrito: hacia la izquierda un texto de izquierda a derecha, hacia la derecha uno de derecha a izquierda, sea cual sea la página que lo rodea.

Velocidad y pausas

speed se da en píxeles por segundo, no como el tiempo de una pasada entera, así que un título largo y uno corto se mueven al mismo ritmo. Déjalo en manos del token comp.marquee-text.speed, para que todas las líneas en movimiento del producto mantengan un mismo ritmo. Cuando el tamaño del texto se amplía, la velocidad crece con el texto y pasan los mismos caracteres por segundo en cualquier tamaño.
startPause es cuánto descansa el texto en su inicio antes de cada pasada, para que se pueda leer cómo empieza. Con trigger="always" es también la espera antes de la primera pasada.
endPause, con bounce, es cuánto descansa el texto con su final a la vista antes de volver.
iterations es cuántas pasadas reproduce un activador antes de que el texto descanse en su inicio. Si se deja en null, las pasadas siguen hasta que el puntero se va o el foco se mueve a otro sitio, y con always, mientras la línea se muestre. Un número que mantenga el movimiento corto es lo que hace accesible un activador de cursor o de foco (más abajo).

Las pausas son tiempos de lectura. Los ajustes de movimiento del producto, que aceleran o ralentizan las animaciones, no las acortan.

Contenido

Mantén el texto lo bastante corto como para que rara vez haga falta verlo moverse: la marquesina es para el título ocasional más largo que los demás, no una forma de meter una frase en un chip. Pon al principio lo que distingue unos elementos de otros, donde se lee sin movimiento. El texto puede tener contenido en línea, como un fragmento en negrita; siempre es una sola línea.

Evita

No lo uses para un texto que alguien deba leer entero para actuar. Dale a ese texto sus propias líneas.
No pongas varias líneas que se mueven todo el tiempo en una misma pantalla. Una línea en movimiento atrae la mirada; varias compiten entre sí y con todo lo demás de la pantalla.
No conviertas la propia línea en un botón o un enlace para iniciar el movimiento. Es texto; lo que se pulsa es el control que la rodea.
No acortes las pausas para que un texto largo quepa en un recorrido corto. Acorta el texto o muéstralo entero de otra forma.

Accesibilidad

Rol: none (text)
Etiquetado: The text is read once, whole, as text; the copy is hidden. The playback control is named by pauseLabel and playLabel, from the instance and then the product's words.
Objetivo mínimo: El área de pulsación cumple el tamaño mínimo de objetivo aunque el tamaño visual sea menor. minimum 32px · pointer 44px · spacing 8px · touch 48px

Teclado

Teclas	Acción
`Tab`	Reaches the playback control while it is drawn; the line itself is not a stop. Focus on the control the line stands in (a row, a chip) starts the motion for trigger focus and hover-or-focus, and moving focus away stops it.
`Enter` / `Space on the playback control`	Pauses or plays the motion.

Notas

Pause, Stop, Hide (WCAG 2.2.2): motion that starts without a person's direct action and lasts more than five seconds beside other content needs a way to pause, stop or hide it, and the Understanding document counts motion started by a hover, a focus or scrolling into view, and stopped only while focused, as not meeting that. The defaults can conflict with it: trigger always draws no playback control (playbackControl is false), and a hover or a focus plays passes until it ends (iterations is null). A product meets it by drawing the playback control or binding its page-wide pause control to paused for trigger always, and by setting iterations so that the motion a hover or a focus starts ends within five seconds, or by keeping such lines where nothing else is read beside them.
Animation from interactions (WCAG 2.3.3): where motion is reduced, the line never moves; the hidden part is still shown, a viewport at a time, without a motion (MRQ-8).
The minimum target is the playback control's, a Button's; the line takes no input of its own.

Generado a partir de specs/marquee-text.spec.json, tokens/sys/measure.tokens.json

Los valores predeterminados pueden chocar con WCAG 2.2.2

Pause, Stop, Hide (WCAG 2.2.2, nivel A) pide que un movimiento que empieza solo, dura más de cinco segundos y se presenta junto a otro contenido pueda pausarse, detenerse u ocultarse. Los valores predeterminados de Tanrei no lo cumplen por sí solos, en dos puntos, y el producto decide cómo cumplirlo.

trigger="always" no dibuja ningún control de reproducción de forma predeterminada (playbackControl es false). Una línea que se mueve todo el tiempo durante más de cinco segundos junto a otro contenido necesita una forma de pausarla. Fija playbackControl, y la línea dibuja al final un botón de pausa y reproducción solo con icono, con el nombre de pauseLabel y playLabel o de las palabras del producto marqueePauseLabel y marqueePlayLabel; o vincula a paused el control propio del producto que pausa todo lo que se mueve en la página. Las compilaciones de depuración notifican una línea que se mueve todo el tiempo sin ninguna de las dos cosas.
Con hover, focus y hover-or-focus, si iterations es null, las pasadas siguen hasta que el puntero se va o el foco se mueve a otro sitio. El documento Understanding de WCAG considera que un movimiento iniciado por el paso del cursor o por el foco empieza automáticamente, y dice que un movimiento que solo se detiene cuando el foco se va no es una forma de detenerlo. Para cumplir 2.2.2, fija iterations de modo que el movimiento termine en cinco segundos o menos. Con un texto largo, una sola pasada ya puede durar más: acorta el texto o sube la velocidad, o muestra el texto completo de otra forma.

La línea retiene su movimiento donde está mientras el puntero está encima o el foco está dentro, y también mientras está fuera de la vista o su página está oculta. Eso la hace más fácil de leer, pero no es una forma de detenerla.

De qué se encarga el componente

Solo se mueve cuando el texto no cabe. Una línea cuyo texto cabe dibuja texto sin más y no inicia nada.
Donde el movimiento está reducido (WCAG 2.3.3), nunca se mueve. Al pasar el cursor o recibir el foco, muestra la parte oculta un tramo del ancho de la línea cada vez, sin movimiento, deteniéndose en cada vista, de modo que cada parte del texto se puede ver; una línea con trigger="always" descansa cortada y no dibuja el control de reproducción.
La tecnología de apoyo lee el texto una vez, entero, como texto, donde está la línea. La copia, los puntos suspensivos y el desvanecido están ocultos para ella, y el movimiento no cambia nada de lo que lee ni anuncia nada.
La línea no es una parada de foco. El tabulador llega al control en el que está, y al control de reproducción mientras se dibuja.
El control de reproducción es un botón de la variante text y el tamaño small, con el glifo de pausa del conjunto de iconos mientras el texto se mueve y el de reproducir mientras está en pausa. Enter o Espacio lo alternan, el foco se queda en él y emite pausedChange. Su objetivo cumple el mínimo.
En un diseño de derecha a izquierda, el control de reproducción está en el extremo izquierdo de la línea; el texto se mueve según su propia dirección.
Con colores forzados, el texto toma el color que la plataforma da al elemento que lo rodea, y sus bordes se recortan en lugar de desvanecerse.
No tiene palabras propias. Un control de reproducción sin nombre ni en la instancia ni en las palabras del producto se dibuja igualmente y se notifica en las compilaciones de depuración; también se notifican un trigger o un loop desconocidos y una velocidad, una pausa o un número fuera de rango.

El componente web no es el elemento HTML <marquee>. Ese elemento está obsoleto, ignora el movimiento reducido y no se puede pausar.

Qué debes hacer tú

Cumple WCAG 2.2.2 como se indica arriba: una forma de pausar cada línea con trigger="always", y un valor de iterations que termine en cinco segundos o menos el movimiento de un paso del cursor o de un foco.
Dale al control de reproducción sus dos nombres, en la instancia o una sola vez en las palabras del producto, en el idioma de la página: «Pausar el texto en movimiento» y «Reproducir el texto en movimiento» dicen lo que hace el botón.
No pongas en una marquesina un texto que haya que leer entero: una línea cortada lo oculta a quien nunca activa el movimiento.
Limítate a una línea que se mueva todo el tiempo por pantalla, y ninguna junto a un texto largo que alguien esté leyendo.

Código fuente e incidencias en GitHub