Área de desplazamiento
Una caja que desplaza tu contenido con el desplazamiento propio de la plataforma y muestra, en cada borde que vigila, que hay más contenido más allá (una franja del color de la superficie, un desvanecido del contenido, una línea o un desenfoque) sin cambiar de tamaño ni mover el contenido.
- Categoría
- Contención
- Tokens
comp.scroll-area- Nivel
- Base
- Web
tanrei-scroll-areaclock_loader_40 - SwiftUI
TanreiScrollArearadio_button_unchecked - Jetpack Compose
TanreiScrollArearadio_button_unchecked - Flutter
TanreiScrollArearadio_button_unchecked - React Native
ScrollArearadio_button_unchecked
Generado a partir de docs/status/status.json, specs/scroll-area.spec.json
Una lista en una caja de altura fija
Mientras su contenido cabe, el área no dibuja nada propio. Desplázala: el borde inferior se marca mientras queda más contenido abajo, y el superior en cuanto algo se ha desplazado fuera de la vista por arriba.
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 área de desplazamiento.
<!-- El diseño de página le da su tamaño; de forma predeterminada marca los bordes superior e inferior. -->
<tanrei-scroll-area label="Mensajes" style="block-size: 20rem">
…
</tanrei-scroll-area>
<!-- Sobre una tarjeta filled: la sombra toma el color de la tarjeta, para que la lista se hunda en ella. -->
<tanrei-scroll-area label="Resultados" style="--tanrei-comp-scroll-area-shadow-color: var(--tanrei-comp-card-filled-container-color); block-size: 16rem">
…
</tanrei-scroll-area>
<!-- Sobre una imagen o un video: el propio contenido se desvanece y no se dibuja ningún color. -->
<tanrei-scroll-area scroll-edge="fade" label="Subtítulos">…</tanrei-scroll-area>
<!-- Una fila que se desplaza en horizontal: marca sus bordes de inicio y de fin. -->
<tanrei-scroll-area edges="start end" label="Fotos">…</tanrei-scroll-area>
<script type="module">
import '@tanrei/web/components/scroll-area';
</script>import { ScrollArea } from '@tanrei/react';
<ScrollArea label="Mensajes" style={{ blockSize: '20rem' }}>
{messages}
</ScrollArea>
{/* Sobre una tarjeta filled: la sombra toma el color de la tarjeta. */}
<ScrollArea
label="Resultados"
style={{ '--tanrei-comp-scroll-area-shadow-color': 'var(--tanrei-comp-card-filled-container-color)', blockSize: '16rem' } as React.CSSProperties}
>
{results}
</ScrollArea>
<ScrollArea scrollEdge="fade" label="Subtítulos">{captions}</ScrollArea>
<ScrollArea edges={['start', 'end']} label="Fotos">{photos}</ScrollArea>Bordes de desplazamiento: shadow (la elección del sistema predeterminado), fade, line, blur y none
Sombra. Una franja del color de la superficie sobre la que está el área, plena en el borde y nula a 24 de él. Desplázala para ver marcado también el borde superior. El contenido parece hundirse en la superficie.
Desvanecido. El propio contenido se desvanece hacia el borde y no se dibuja ningún color, así que se ve lo que haya detrás del área. Desplázala para ver marcado también el borde superior.
Línea. Una línea fina a lo largo del borde, del color de un divisor, mientras hay contenido más allá. Desplázala para ver aparecer la línea de arriba y desaparecer la de abajo.
Desenfoque. El contenido se desenfoca en una franja de 48 de profundidad, más en el borde y nada en el extremo interior de la franja. Desplázala para ver marcado también el borde superior.
Ninguno. Nada marca los bordes: solo la barra de desplazamiento de la plataforma dice que el contenido sigue. Desplázala para compararla con las demás.
Anatomía
| Parte | Descripción |
|---|---|
1 container | The scroll box: as large as its layout gives it, scrolling the content up and down, sideways or both where it does not fit, with the platform's own scrolling and scroll bars. It has no fill, edge or corner of its own. |
2 content | Whatever the product puts in it: a list, a column of cards, a form, a row of pictures. The area lays nothing out and styles nothing inside it. |
3 scroll-edge · opcional | The mark at one edge of the box while content lies beyond that edge: a band in the color of the surface the box stands on, full at the edge and none at its inner end; a fade of the content itself toward the edge; a line along it; or a band in which the content is blurred, most at the edge. Drawn over the content (the fade, on it), taking no input. |
4 focus-ring · opcional | The system's focus indicator inside the box's edge, while the box itself has keyboard focus. |
Propiedades
| Propiedad | Tipo | Valor predeterminado | Descripción |
|---|---|---|---|
scrollEdge | auto | shadow | fade | line | blur | none | "auto" | How an edge shows that content lies beyond it. shadow: a band in the color of the surface the area stands on, so that the content sinks into the surface. fade: the content itself fades out toward the edge and no color is drawn, for a transparent surface, a picture or a video behind the area. line: a hairline along the edge. blur: the content blurred in a band along the edge, most at the edge. none: nothing. auto takes comp.scroll-area.scroll-edge, the design system's answer, which follows sys.behavior.scroll-edge (shadow in the default system). |
edges | strings | top,bottom | Which edges show the scroll edge: any of top, bottom, start and end. start is the left in a left-to-right layout and the right in a right-to-left one. |
label | string | "" | The name of the scroll box, for the moments it is a focus stop of its own (SCA-10): what it holds ("Messages", "Results"). Never drawn. |
Slots
| Slot | Descripción |
|---|---|
default | The content the area scrolls. A fixture's string is drawn as plain text in it. |
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 |
|---|---|
SCA-1 | THE scroll area SHALL be as large as its layout gives it, SHALL lay its content out at its own width, and WHERE the content does not fit SHALL scroll it with the platform's own scrolling — wheel, trackpad, touch, scroll bars, keyboard and assistive technology — in each direction it does not fit; it SHALL draw no fill, edge, corner or elevation of its own, and SHALL NOT replace the platform's scroll bars. |
SCA-2 | WHILE content lies beyond an edge that edges names — the content is scrolled away from that edge, so that some of it is out of view past it — THE scroll area SHALL draw the scroll edge of that edge in the form its scroll edge (SCA-7) names; WHILE nothing lies beyond it, or the edge is not named, THE scroll area SHALL draw none there. Each edge SHALL be drawn and faded by itself: content beyond the top and none beyond the bottom draws the top edge only. |
SCA-3 | WHILE the scroll edge is shadow THE scroll area SHALL draw over the content, along the whole length of the edge and inside the box, a band comp.scroll-area.shadow.extent deep in comp.scroll-area.shadow.color — the color of the surface the area stands on, not a color of its own — full at the edge and falling smoothly to none at the band's inner end, and SHALL draw no line. |
SCA-4 | WHILE the scroll edge is fade THE scroll area SHALL fade the content itself along the edge, none of it shown at the edge rising smoothly to all of it at comp.scroll-area.fade.extent in from it, SHALL draw no color and no line, so that whatever lies behind the area — a transparent surface, a picture, a video — shows through where the content fades. |
SCA-5 | WHILE the scroll edge is line THE scroll area SHALL draw it as a line comp.scroll-area.line.width thick in comp.scroll-area.line.color along the whole length of the edge, inside the box. |
SCA-6 | WHILE the scroll edge is blur THE scroll area SHALL blur the content lying in a band comp.scroll-area.blur.extent deep along the edge, by comp.scroll-area.blur.radius at the edge falling to none at the band's inner end, in comp.scroll-area.blur.layers layers of evenly stepped radius, each masked to its part of the band so that no step is seen, and SHALL draw no line and no tint: the scroll area has no fill of its own to tint with. |
SCA-7 | THE scroll area SHALL take its scroll edge from scrollEdge: WHILE scrollEdge is auto, as comp.scroll-area.scroll-edge names, which follows sys.behavior.scroll-edge unless a design system sets the scroll area apart; WHILE it is shadow, fade, line, blur or none, as that value names, whatever the tokens say. WHEN scrollEdge, or the token it follows, changes THE scroll area SHALL draw the other form at once, keeping the scroll position and focus. |
SCA-8 | WHEN content starts or stops lying beyond an edge THE scroll area SHALL fade that edge's scroll edge in or out over comp.scroll-area.motion.duration with comp.scroll-area.motion.easing, and at once where motion is reduced; it SHALL NOT change its size, move the content, or change anything else it draws because of the scroll edge. It SHALL learn whether content lies beyond an edge from what the platform already knows of the scroll — its notice that a mark at that end of the content has entered or left the box, or the scroll's own extents — and SHALL NOT measure the content's layout in a frame of a scroll. |
SCA-9 | WHERE the platform cannot blur what lies behind a band (a browser without backdrop filters, Android before version 12, a platform where the product gave no blur view) THE scroll area SHALL draw shadow (SCA-3), the system's first form, in place of a blur; WHERE the platform draws with a person's own forced colors THE scroll area SHALL draw the line of SCA-5 in the platform's text color in place of a shadow, a fade or a blur. |
SCA-10 | WHILE the content does not fit and nothing inside the box takes keyboard focus THE scroll area SHALL make the box itself one stop in the focus order, exposed as a region named by label, so that a keyboard can scroll it (WCAG 2.1.1); WHILE something inside takes focus, or the content fits, THE scroll area SHALL NOT be a focus stop and SHALL expose no role of its own. WHILE it is a focus stop and label is empty it SHALL still be focusable, and in debug builds report that the region has no accessible name. |
SCA-11 | WHILE the box has keyboard focus THE scroll area SHALL show it as sys.behavior.focus-style names (ring or glow), drawn wholly inside its edge so that nothing around the box covers it, over every scroll edge and never faded by one, without animation, and never for focus gained by pointer or touch; a platform that cannot draw a choice SHALL fall back to the first value and state that in its README. |
SCA-12 | THE scroll area SHALL draw every scroll edge over the content (the fade, on the content itself), hidden from assistive technology, and SHALL let every press, hover and scroll over it reach the content under it. |
SCA-13 | WHERE the layout direction is right-to-left THE scroll area SHALL take start as its right edge and end as its left edge, SHALL begin a sideways scroll at the right, and SHALL mirror no scroll edge otherwise: each form is drawn the same toward whichever edge it stands at. |
SCA-14 | THE scroll area 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 area is shown THE scroll area SHALL draw itself for the new direction at once, keeping its scroll position from the start edge. |
SCA-15 | IF scrollEdge names a value the component does not define THE scroll area SHALL treat it as auto, IF edges names a value other than top, bottom, start and end THE scroll area SHALL ignore it, and in debug builds report the unknown value. |
SCA-16 | WHILE the text size is enlarged THE scroll area SHALL keep its scroll edges at their sizes and lay out the larger content, which scrolls further: a scroll edge is a mark of the box, not of its text. |
SCA-17 | THE scroll area SHALL have no words of its own and SHALL read none of the product's words: label names this one region. |
SCA-18 | WHERE the platform has ARIA attributes (the web), WHEN the product sets an aria- attribute on the host, by the attribute or by the ARIA property that reflects it, THE scroll area SHALL move it to the data-aria- attribute of the same name, so that the host is no second node with its name, description or state, and SHALL expose it on its box — an id reference by the elements it names in the host's tree or a tree around it, a description after its own — but a name only while the box is a focus stop and a region (SCA-10): then label is its name over a name given so, and while label is empty a name given so is its name and SHALL NOT be reported as having none in debug builds. WHILE the box is not a focus stop it has no role a name could stand on: THE scroll area SHALL expose no name the product gives on the host, and SHALL report it in debug builds. WHEN the product removes the aria- attribute or its data-aria- twin, or sets the ARIA property that reflects it (ariaLabel, ariaDescribedByElements…) to null, THE scroll area SHALL take it off the box. |
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-scroll-area | TanreiScrollArea | TanreiScrollArea | TanreiScrollArea | ScrollArea |
scrollEdge · Propiedad | scrollEdge | scrollEdge | scrollEdge | scrollEdge | scrollEdge |
edges · Propiedad | edges | edges | edges | edges | edges |
label · Propiedad | label | label | label | label | label |
| Notas | <tanrei-scroll-area scroll-edge edges="top bottom" label>; edges is a space-separated attribute and an array property. Whether content lies beyond an edge is read from one IntersectionObserver on four thin sentinels at the ends of the content (SCA-8): no scroll listener, no layout read while scrolling. Not CSS scroll-driven animations: they are not in every engine, and they tie the mark to the distance scrolled rather than fading it over the state motion. shadow is a gradient band per edge in --tanrei-comp-scroll-area-shadow-color; set that custom property on the element, or on an ancestor, to the surface it stands on. fade is a mask-image on the scroll box, one gradient per axis, moved by mask-position and mask-size (no registered custom property), so the browser's scroll bar fades with the content at a faded edge. blur is blur.layers layers inside each band, each with backdrop-filter: blur(r × i / n) and a mask-image gradient; @supports not (backdrop-filter: blur(1px)) draws shadow (SCA-9). Every mark is pointer-events: none and aria-hidden. A fixture fills the slot with enough lines (or a row wide enough) to scroll, in a box of a fixed size, scrolled to the middle. | A ScrollView. onScrollGeometryChange tells whether content lies beyond an edge. shadow is a LinearGradient overlay from the surface color; fade a mask of a gradient; on iOS 26 and macOS 26 blur is the system's scrollEdgeEffectStyle(.soft, for:) and line .hard with the line drawn by Tanrei, before them blur is a Material band under a gradient mask. | A verticalScroll/horizontalScroll box (or the product's lazy list through a ScrollState/LazyListState parameter); canScrollBackward/canScrollForward tell the edges. shadow is a drawWithContent gradient in the surface color; fade a BlendMode.DstIn gradient on an offscreen layer; blur draws the band's content again under graphicsLayer { renderEffect = BlurEffect(…) } with a gradient mask on API 31 and later, and shadow below it. | A SingleChildScrollView (or the product's scrollable via its ScrollController); ScrollMetrics.extentBefore/extentAfter, read in a NotificationListener<ScrollMetricsNotification>, tell the edges. shadow is a DecoratedBox gradient in the surface color; fade a ShaderMask with BlendMode.dstIn; blur BackdropFilter bands under ShaderMask. | A ScrollView; onScroll with scrollEventThrottle and the content size tell the edges, and the edge state is set only when it changes. shadow is a gradient view in the surface color where the product passes a gradient component, else a stack of translucent strips; fade needs a masked view the product passes, and is drawn as shadow without it. React Native has no blur of its own: blur is drawn only where the product passes a blur view component; otherwise shadow (SCA-9). |
Tokens
| Token | Alias de | Valor resuelto (claro) |
|---|---|---|
--tanrei-comp-scroll-area-blur-extent | sys.scroll-edge.blur.extent | 48px |
--tanrei-comp-scroll-area-blur-layers | sys.scroll-edge.blur.layers | 4 |
--tanrei-comp-scroll-area-blur-radius | sys.scroll-edge.blur.radius | 8px |
--tanrei-comp-scroll-area-fade-extent | sys.scroll-edge.extent | 24px |
--tanrei-comp-scroll-area-line-color | sys.color.outline-variant | |
--tanrei-comp-scroll-area-line-width | sys.border.hairline | 1px |
--tanrei-comp-scroll-area-motion-duration | sys.motion.role.state.default | 250ms |
--tanrei-comp-scroll-area-motion-easing | sys.motion.easing.state | cubic-bezier(0.2, 0, 0, 1) |
--tanrei-comp-scroll-area-scroll-edge | sys.behavior.scroll-edge | 0 |
--tanrei-comp-scroll-area-shadow-color | sys.color.surface | |
--tanrei-comp-scroll-area-shadow-extent | sys.scroll-edge.extent | 24px |
Fixtures
Representaciones canónicas. Todas las plataformas capturan cada fixture con el mismo identificador para poder comparar los resultados.
default
label: Messages slots: default fade
scrollEdge: fade label: Messages slots: default line
scrollEdge: line label: Messages slots: default blur
scrollEdge: blur label: Messages slots: default none
scrollEdge: none label: Messages slots: default sideways
edges: ["start","end"] label: Photos slots: default rtl-sideways
edges: ["start","end"] label: Photos direction: rtl slots: default Generado a partir de specs/scroll-area.spec.json, tokens/comp/scroll-area.tokens.json, design/tokens/
Usa un área de desplazamiento donde tu diseño de página da a una parte de la pantalla un tamaño fijo y su contenido puede ser más largo: una lista de mensajes junto a una conversación, los resultados bajo un campo de búsqueda, un formulario largo en un panel, una fila de imágenes que se desplaza en horizontal. El área mantiene el contenido donde lo pusiste y dice, en cada borde que vigila, que hay más más allá.
No la necesitas alrededor de un componente que ya se desplaza por sí mismo (una tabla, el contenido de un diálogo, una hoja) ni alrededor de la página: el desplazamiento propio de la página no tiene un borde que marcar. Un diálogo, una hoja, un popover y una barra de la aplicación dibujan su propia línea donde una parte que se queda en su sitio se encuentra con contenido que se desplaza.
| Forma | Úsala para |
|---|---|
shadow |
Una superficie opaca: el contenido se hunde en ella. La franja se dibuja en el color de la superficie sobre la que está el área, no en un gris propio. Es la elección del sistema predeterminado. |
fade |
Una superficie transparente, una imagen o un video detrás del área. El propio contenido se desvanece y no se dibuja ningún color, así que lo que hay detrás se ve. |
line |
Un producto que marca sus bordes con líneas, y un diseño de página denso donde una franja taparía demasiado contenido. La línea es una línea fina del color de un divisor. |
blur |
Un producto cuyas barras y bordes son translúcidos: el contenido se suaviza en el borde. Es la forma que más cuesta dibujar (más abajo). |
none |
Una caja cuyos bordes ya pueden quedar tal cual, como una cuya barra de desplazamiento siempre está a la vista y basta. |
Cada borde se dibuja por separado, y solo mientras hay contenido más allá de él: al principio de la lista solo se marca el borde inferior. La marca de un borde aparece y desaparece con un fundido cuando eso cambia, y de inmediato donde el movimiento está reducido. La marca nunca cambia el tamaño del área ni mueve el contenido.
edges indica qué bordes se vigilan: top y bottom de forma predeterminada, y start y end para una fila que se desplaza en horizontal. El inicio es la izquierda en un diseño de izquierda a derecha y la derecha en uno de derecha a izquierda (RTL).
Una sombra es una franja del color de la propia superficie colocada sobre el contenido, plena en el borde. Sobre la superficie que nombra su color, se une a ella sin costura; sobre cualquier otra, se ve como una mancha del color equivocado. comp.scroll-area.shadow.color es la superficie normal (sys.color.surface) de forma predeterminada. Donde el área está sobre otra superficie (una tarjeta, una hoja, un color de contenedor), dale el color de esa superficie: en una capa, para todas las áreas de desplazamiento que estén ahí, o en esa única instancia. En la web es la propiedad personalizada --tanrei-comp-scroll-area-shadow-color, que se pone en el elemento o en un ancestro.
Donde no hay nada opaco detrás del área (un panel translúcido, una imagen, un video), ningún color es el correcto. Elige fade ahí.
Un desenfoque vuelve a dibujar el contenido de su franja, desenfocado, en cada fotograma de un desplazamiento: comp.scroll-area.blur.layers capas de radio escalonado (4 en el sistema predeterminado, hasta un radio de 8 en el borde, en una franja de 48 de profundidad). Úsalo donde el aspecto del producto lo pide, y limítalo a dos bordes desenfocados como máximo por pantalla: los de arriba y abajo de una lista, no los de cada panel. Donde la plataforma no puede desenfocar lo que hay detrás de una franja (un navegador sin filtros de fondo, Android anterior a la versión 12, React Native sin una vista de desenfoque que tu producto le pase), el área dibuja shadow en su lugar; por eso, define el color de la sombra incluso donde eliges un desenfoque.
Qué marca el borde de una caja que se desplaza es una elección de tipo que se hace una sola vez para el producto: sus listas, formularios y paneles no deberían marcar cada uno sus bordes de una manera distinta.
tanrei.sys.behavior.scroll-edge
What marks an edge of a box that scrolls while content lies beyond it, scrolled out of view past that edge. shadow: a band sys.scroll-edge.extent deep in the color of the surface the box stands on, full at the edge and none at the band's inner end, so that the content sinks into the surface. fade: the content itself fades out over the same depth toward the edge, so that whatever lies behind it — a transparent surface, a picture, a video — shows through. line: a hairline along the edge. blur: the content blurred in a band sys.scroll-edge.blur.extent deep, most at the edge. A platform that cannot blur what lies behind draws shadow, the first value; with a person's own forced colors every choice is drawn as the line. Read by the scroll area through its own component token, so that a design system can set it apart; an instance can set its own.
Generado a partir de tokens/sys/behavior.tokens.json
El área de desplazamiento la lee a través de su propio token, comp.scroll-area.scroll-edge, así que un sistema de diseño puede apartar el área de la elección del sistema. Una instancia fija la suya con scrollEdge (scroll-edge en la web); su valor predeterminado, auto, sigue a los tokens. El sistema predeterminado dibuja shadow; m3-like dibuja line y cupertino blur, como marcan sus originales los bordes que se desplazan.
| Sistema de diseño | scroll-edge |
|---|---|
tanrei | shadow |
cupertino | blur |
m3-expressive-like | line |
m3-like | line |
Generado a partir de tokens/systems/*.system.json, design/tokens/<system>/tanrei.light.tokens.json
Dos elecciones del sistema tienen que ver con el desplazamiento, y responden a preguntas distintas:
sys.behavior.divider-visibilitydice cuándo está la línea de una región fija: el borde de una barra de la aplicación, del encabezado y las acciones de un diálogo, del encabezado de una hoja; una parte que se queda en su sitio mientras el contenido se desplaza por debajo. Se dibuja siempre, o solo mientras algo se ha desplazado más allá de ella.sys.behavior.scroll-edgedice qué marca el borde de una caja que se desplaza mientras hay contenido más allá de ese borde: una sombra, un desvanecido, una línea o un desenfoque.
Un producto puede fijarlas por separado: un diálogo cuya línea de encabezado sigue al desplazamiento y, a su lado, listas que se hunden en su superficie.
El área de desplazamiento es la caja de desplazamiento propia de la plataforma, con marcas dibujadas sobre sus bordes. La rueda, el trackpad, el toque, el teclado, la tecnología de apoyo y las barras de desplazamiento de la plataforma funcionan como en cualquier otra caja, y las barras conservan el aspecto de la plataforma. El área no añade desplazamiento propio, ni ajuste a puntos (snap), ni barra de desplazamiento; no dispone nada en su interior y no tiene relleno, borde ni esquinas. Da estilo al contenido como lo harías en cualquier otro sitio.
- Da al área su tamaño en tu diseño de página: una altura, una parte de una cuadrícula, el espacio que dejan un encabezado y un pie. Toma el tamaño que se le da.
- Da a la sombra el color de la superficie sobre la que está el área, siempre que no sea la superficie normal.
- Dale una etiqueta que diga qué contiene: «Mensajes», «Resultados», «Fotos».
- No dibujes un divisor, un borde ni un degradado propios en un borde que se desplaza. Elige el borde de desplazamiento, para que aparezca solo mientras hay contenido más allá y coincida con el resto del producto.
- No uses una sombra sobre una imagen, un video o una superficie translúcida. Usa un desvanecido.
- No pongas más de dos bordes desenfocados en una pantalla.
- No anides áreas de desplazamiento que se desplazan en la misma dirección. Una persona no puede saber cuál moverá un deslizamiento.
- No ocultes las barras de desplazamiento de la plataforma para dejar sitio a las marcas. Las marcas dicen que hay más; la barra dice cuánto, y es un control por derecho propio.
- Rol
region, only while the box is a focus stop of its own (SCA-10); otherwise none- Etiquetado
- While the box is a focus stop it is a region named by label. The scroll edges are hidden.
- 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 | Moves focus into the content, or to the box itself while nothing inside takes focus and the content does not fit. |
| Arrow keys, Page Up, Page Down, Home, End, Space | Scroll the box while it has focus, as the platform scrolls any scroll box. |
Notas
- Not interactive except as a scroll box: it has no target of its own, and its focus stop exists only so that a keyboard can scroll content that has nothing focusable (WCAG 2.1.1).
- Animation from interactions (WCAG 2.3.3): the scroll edge's fade is a change of opacity, not motion, and is still made at once where motion is reduced.
- A shadow or a fade lowers the contrast of the content it lies over, by design, only within its band and only while that content is scrolled toward the edge; the content is read at full contrast once it is scrolled into view.
Generado a partir de specs/scroll-area.spec.json, tokens/sys/measure.tokens.json
- Mientras su contenido no cabe y nada en su interior recibe el foco del teclado, la propia caja pasa a ser una parada en el orden de foco, expuesta como una región con el nombre de
label, para que un teclado pueda desplazarla (WCAG 2.1.1). Las flechas, Re Pág, Av Pág, Inicio, Fin y la barra espaciadora la desplazan, como la plataforma desplaza cualquier caja. - Mientras algo en su interior recibe el foco, o el contenido cabe, la caja no es una parada de foco y no expone ningún rol: el teclado llega al contenido, y el contenido se desplaza a la vista al recibir el foco.
- El indicador de foco se dibuja dentro del borde de la caja, por encima de todas las marcas y nunca atenuado por una de ellas, y solo con el foco del teclado.
- Las marcas están ocultas para la tecnología de apoyo, y toda pulsación, paso del cursor y desplazamiento sobre ellas llega al contenido que hay debajo.
- La marca de un borde aparece y desaparece con un fundido breve, un cambio de opacidad y no un movimiento; aparece de inmediato cuando se pide reducir movimiento.
- Con colores forzados, cada forma se dibuja como una línea en el color del texto.
- No tiene palabras propias. Las compilaciones de depuración notifican una etiqueta vacía mientras la caja es una parada de foco, y un valor desconocido de
scrollEdgeo deedges.
- Dale una
labelque diga qué contiene. Quien llega a la caja con el tabulador oye ese nombre; sin él, solo oye que hay una región. - Cuenta con que el contenido bajo una franja se lee cuando se desplaza a la vista, no donde está. Una sombra o un desvanecido bajan el contraste del contenido que tienen debajo, a propósito, pero solo dentro de su franja y solo mientras ese contenido está desplazado hacia el borde; el contenido recupera todo su contraste en cuanto se desplaza a la vista.
- Anuncia el contenido que cambia por sí solo (una lista en directo, mensajes nuevos) como lo harías en cualquier otro sitio. El área no anuncia lo que entra al desplazarse.