---
title: "منطقة التمرير"
description: "صندوق يمرّر محتواك بالتمرير الخاص بالمنصة، ويبيّن على كل حافة يراقبها أن وراءها مزيدًا من المحتوى — بشريط بلون السطح، أو بتلاشي المحتوى، أو بخط، أو بتمويه — من غير أن يغيّر حجمه أو يحرّك المحتوى."
url: "https://tanrei.chnotchy.com/ar/components/scroll-area/"
last_updated: 2026-10-23T21:17:12.000Z
---
# منطقة التمرير
> صندوق يمرّر محتواك بالتمرير الخاص بالمنصة، ويبيّن على كل حافة يراقبها أن وراءها مزيدًا من المحتوى — بشريط بلون السطح، أو بتلاشي المحتوى، أو بخط، أو بتمويه — من غير أن يغيّر حجمه أو يحرّك المحتوى.
## نظرة عامة
ما دام المحتوى يتسع، لا ترسم المنطقة شيئًا من عندها. مرّرها: تُعلَّم الحافة السفلية ما دام في الأسفل مزيد، والعلوية حالما يُمرَّر شيء خارج المنظر من الأعلى.
### الاستخدام
عيّنتا Web و React تعرضان المواصفة الحالية. أما SwiftUI و Compose و Flutter و React Native فمخطَّط لها: لا تقدّم منطقة تمرير بعد.
**Web**
```html
…
…
…
…
```
**React**
```tsx
import { ScrollArea } from '@tanrei/react';
{messages}
{/* على بطاقة filled: يأخذ الظل لون البطاقة. */}
{results}
{captions}
{photos}
```
## المواصفات
- Category: Containment
- Level: base
- Listing: default
- Page: https://tanrei.chnotchy.com/components/scroll-area/
- Spec: https://github.com/chnotchy/tanrei/blob/main/specs/scroll-area.spec.json
### Availability
| Design system | Has it | Notes |
| --- | --- | --- |
| Tanrei (`tanrei`) | Yes | — |
| Cupertino (Apple HIG-inspired) (`cupertino`) | Yes | — |
| M3 Expressive-like (Material 3 Expressive-inspired) (`m3-expressive-like`) | Yes | — |
| M3-like (Material 3-inspired) (`m3-like`) | Yes | — |
### Platforms
- Web: the element ``, registered by importing `@tanrei/web` (or only its own module, `@tanrei/web/components/scroll-area`).
- React: `ScrollArea` from `@tanrei/react`.
| Platform | Name | Status |
| --- | --- | --- |
| Web | `tanrei-scroll-area` | alpha |
| SwiftUI | `TanreiScrollArea` | planned |
| Jetpack Compose | `TanreiScrollArea` | planned |
| Flutter | `TanreiScrollArea` | planned |
| React Native | `ScrollArea` | planned |
Statuses: `planned` — In the inventory. Nothing shippable exists yet. `lagging` — An implementation of an earlier spec exists; it has not caught up with the current one. `alpha` — Implemented with tests. The API may still change. `beta` — Feature complete and at parity. Only fixes are expected. `stable` — Covered by semantic versioning. `deprecated` — Still shipped; scheduled for removal.
### Anatomy
- `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.
- `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.
- `scroll-edge` (optional): 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.
- `focus-ring` (optional): The system's focus indicator inside the box's edge, while the box itself has keyboard focus.
### Props
| Prop | Type | Default | Web attribute | Description |
| --- | --- | --- | --- | --- |
| `scrollEdge` | `enum`: `auto`, `shadow`, `fade`, `line`, `blur`, `none` | `"auto"` | `scroll-edge` | 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` | `edges` | 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` | `""` | `label` | 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 | Description |
| --- | --- |
| `default` | The content the area scrolls. A fixture's string is drawn as plain text in it. |
### States
`enabled`, `focused`
### Accessibility
- Role: `region, only while the box is a focus stop of its own (SCA-10); otherwise none`
- Labeling: While the box is a focus stop it is a region named by label. The scroll edges are hidden.
- Minimum target size: yes
| Keys | Action |
| --- | --- |
| 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. |
- 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.
### Behaviour
Requirements in EARS form, each with its stable id.
- **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.
### Tokens
As written in the token documents (DTCG): an alias in braces names the token it takes its value from, which each design system resolves. On the web each token is a CSS custom property: `--tanrei` and the name after `tanrei`, joined by hyphens (`tanrei.comp.scroll-area.…` → `--tanrei-comp-scroll-area-…`).
#### `tanrei.comp.scroll-area`
| Token | Type | Value |
| --- | --- | --- |
| `comp.scroll-area.scroll-edge` | `number` | `{tanrei.sys.behavior.scroll-edge}` |
| `comp.scroll-area.shadow.color` | `color` | `{tanrei.sys.color.surface}` |
| `comp.scroll-area.shadow.extent` | `dimension` | `{tanrei.sys.scroll-edge.extent}` |
| `comp.scroll-area.fade.extent` | `dimension` | `{tanrei.sys.scroll-edge.extent}` |
| `comp.scroll-area.line.color` | `color` | `{tanrei.sys.color.outline-variant}` |
| `comp.scroll-area.line.width` | `dimension` | `{tanrei.sys.border.hairline}` |
| `comp.scroll-area.blur.extent` | `dimension` | `{tanrei.sys.scroll-edge.blur.extent}` |
| `comp.scroll-area.blur.radius` | `dimension` | `{tanrei.sys.scroll-edge.blur.radius}` |
| `comp.scroll-area.blur.layers` | `number` | `{tanrei.sys.scroll-edge.blur.layers}` |
| `comp.scroll-area.motion.duration` | `duration` | `{tanrei.sys.motion.role.state.default}` |
| `comp.scroll-area.motion.easing` | `cubicBezier` | `{tanrei.sys.motion.easing.state}` |
## الإرشادات
### متى يُستخدم
استخدم منطقة التمرير حيث يعطي تخطيطك جزءًا من الشاشة حجمًا ثابتًا وقد يكون محتواه أطول منه: قائمة رسائل بجانب محادثة، النتائج تحت حقل البحث، نموذج طويل في جزء من الشاشة، صف من الصور يُمرَّر أفقيًّا. تُبقي المنطقة المحتوى حيث وضعته، وتقول على كل حافة تراقبها إن وراءها مزيدًا.
لا تحتاج إليها حول مكوّن يُمرَّر بنفسه — [الجدول](https://tanrei.chnotchy.com/ar/components/table/)، ومحتوى مربع الحوار، واللوحة — ولا حول الصفحة: فتمرير الصفحة نفسها ليست له حافة تُعلَّم. ويرسم كلٌّ من مربع الحوار واللوحة واللوحة المنبثقة وشريط التطبيق خطه بنفسه حيث يلتقي جزء ثابت في مكانه بمحتوى يُمرَّر.
### اختيار حافة التمرير
| الهيئة | تُستخدم لـ |
| --- | --- |
| `shadow` | سطح معتم: يغوص المحتوى فيه. يُرسم الشريط بلون السطح الذي تقف عليه المنطقة، لا برمادي خاص به. وهو اختيار النظام الافتراضي. |
| `fade` | سطح شفاف، أو صورة، أو فيديو خلف المنطقة. يتلاشى المحتوى نفسه ولا يُرسم أي لون، فيظهر ما وراءه. |
| `line` | منتج يعلّم حوافه بالخطوط، وتخطيط كثيف يغطي فيه الشريط قدرًا كبيرًا من المحتوى. الخط خط رفيع بلون الفاصل. |
| `blur` | منتج أشرطته وحوافه شبه شفافة: يلين المحتوى عند الحافة. وهو أعلى الهيئات كلفة في الرسم (أدناه). |
| `none` | صندوق يمكن أن تبقى حوافه كما هي، كصندوق شريط تمريره ظاهر دائمًا ويكفي. |
تُرسم كل حافة وحدها، وما دام وراءها محتوى فقط: في أول القائمة لا تُعلَّم إلا الحافة السفلية. وحين يتغير ذلك تظهر علامة الحافة وتختفي تدريجيًّا، وفورًا حيث تُقلَّل الحركة. ولا تغيّر العلامة حجم المنطقة أبدًا، ولا تحرّك المحتوى أبدًا.
تسمّي `edges` الحواف المراقَبة: `top` و `bottom` افتراضيًّا، و `start` و `end` لصف يُمرَّر أفقيًّا. البداية هي اليسار في تخطيط من اليسار إلى اليمين، واليمين في تخطيط من اليمين إلى اليسار (RTL).
### يأخذ الظل لون سطحه
الظل شريط بلون السطح نفسه موضوع فوق المحتوى، كامل عند الحافة. على السطح الذي يسمّيه لونه يلتحم بالسطح بلا أثر؛ وعلى أي سطح آخر يبدو لطخة بلون خاطئ. القيمة الافتراضية لـ `comp.scroll-area.shadow.color` هي السطح العادي (`sys.color.surface`). وحيث تقف المنطقة على سطح آخر — بطاقة، أو لوحة، أو لون حاوية — اجعله لون ذلك السطح: في طبقة، لكل منطقة تمرير تقف هناك، أو على تلك النسخة وحدها. على الويب هذه هي الخاصية المخصَّصة `--tanrei-comp-scroll-area-shadow-color`، تُضبط على العنصر أو على أحد أسلافه.
وحيث لا يقف خلف المنطقة شيء معتم — لوحة شبه شفافة، أو صورة، أو فيديو — لا يكون أي لون صحيحًا. اختر `fade` هناك.
### التمويه أعلى كلفة في الرسم
يعيد التمويه رسم المحتوى الذي في شريطه، مموَّهًا، في كل إطار من التمرير: `comp.scroll-area.blur.layers` طبقات بنصف قطر متدرج (4 في النظام الافتراضي، حتى نصف قطر 8 عند الحافة، في شريط عمقه 48). استخدمه حيث يطلبه مظهر المنتج، واقتصر على **حافتين مموَّهتين على الأكثر في الشاشة الواحدة** — أعلى قائمة واحدة وأسفلها، لا كل جزء من الشاشة. وحيث لا تستطيع المنصة تمويه ما خلف الشريط (متصفح بلا مرشحات خلفية، أو Android قبل الإصدار 12، أو React Native بلا عرض تمويه يمرّره منتجك)، ترسم المنطقة `shadow` بدلًا منه؛ لذا اضبط لون الظل حتى حيث تختار التمويه.
### اختيار واحد للنظام كله
ما يعلّم حافة صندوق يُمرَّر اختيار نوع يُتخذ مرة واحدة للمنتج: لا ينبغي أن تعلّم قوائمه ونماذجه وأجزاء شاشته حوافها كلٌّ بطريقة.
`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.
shadow fade line blur
shadow — القيمة الافتراضية، وهي البديل في المنصة التي لا تستطيع رسم الخيار
مولَّد من `tokens/sys/behavior.tokens.json`
تقرأ منطقة التمرير هذا الاختيار عبر رمزها الخاص `comp.scroll-area.scroll-edge`، فيستطيع نظام التصميم أن يميّز منطقة التمرير عن اختيار النظام. وتضبط النسخة الواحدة اختيارها بـ `scrollEdge` (`scroll-edge` على الويب)؛ وقيمتها الافتراضية `auto` تتبع الرموز. يرسم النظام الافتراضي `shadow`؛ ويرسم `m3-like` الهيئة `line` و `cupertino` الهيئة `blur`، كما تعلّم أصولهما الحواف التي تُمرَّر.
| نظام التصميم | `scroll-edge` |
| --- | --- |
| `tanrei` | shadow |
| `cupertino` | blur |
| `m3-expressive-like` | line |
| `m3-like` | line |
مولَّد من `tokens/systems/*.system.json`, `design/tokens//tanrei.light.tokens.json`
### حافة التمرير وظهور الفاصل
اختياران من اختيارات النظام يتعلقان بالتمرير، ويجيبان عن سؤالين مختلفين:
- `sys.behavior.divider-visibility` يقول **متى يظهر خط المنطقة الثابتة**: حافة شريط التطبيق، وحافة رأس مربع الحوار وإجراءاته، وحافة رأس اللوحة — جزء يبقى في مكانه بينما يُمرَّر المحتوى تحته. يُرسم دائمًا، أو فقط ما دام شيء قد مُرِّر وراءه.
- `sys.behavior.scroll-edge` يقول **ما الذي يعلّم حافة صندوق يُمرَّر**، ما دام وراء تلك الحافة محتوى: ظل، أو تلاشٍ، أو خط، أو تمويه.
يستطيع المنتج أن يضبطهما كلًّا على حدة: مربع حوار يتبع خط رأسه التمرير، وبجانبه قوائم تغوص في سطحها.
### يحتفظ بتمرير المنصة
منطقة التمرير هي صندوق التمرير الخاص بالمنصة، مرسومة فوق حوافه علامات. تعمل عجلة الفأرة ولوحة اللمس واللمس ولوحة المفاتيح والتقنيات المساعدة وأشرطة التمرير الخاصة بالمنصة كما تعمل في أي صندوق آخر، وتحتفظ أشرطة التمرير بمظهر المنصة. لا تضيف المنطقة تمريرًا خاصًّا بها، ولا التقاطًا (snap)، ولا شريط تمرير؛ ولا ترتّب شيئًا بداخلها، وليست لها تعبئة ولا حدّ ولا زوايا. نسّق المحتوى كما تنسّقه في أي مكان آخر.
### افعل
- أعطِ المنطقة حجمها في تخطيطك: ارتفاعًا، أو حصة من شبكة، أو المكان الذي يتركه رأس وتذييل. فهي تأخذ الحجم الذي تُعطاه.
- اجعل لون الظل لون السطح الذي تقف عليه المنطقة، كلما لم يكن السطح العادي.
- أعطِها تسمية تقول ما الذي تحويه: «الرسائل»، «النتائج»، «الصور».
### لا تفعل
- لا ترسم فاصلًا أو حدًّا أو تدرجًا لونيًّا من عندك على حافة تُمرَّر. اختر حافة التمرير، فلا تظهر إلا ما دام وراء الحافة محتوى، وتطابق بقية المنتج.
- لا تستخدم الظل فوق صورة أو فيديو أو سطح شبه شفاف. استخدم التلاشي.
- لا تضع أكثر من حافتين مموَّهتين في شاشة واحدة.
- لا تضع مناطق تمرير تُمرَّر في الاتجاه نفسه بعضها داخل بعض. لا يستطيع الشخص أن يعرف أيّها سيحرّكه السحب.
- لا تُخفِ أشرطة التمرير الخاصة بالمنصة لتفسح مكانًا للعلامات. العلامات تقول إن هناك المزيد؛ وشريط التمرير يقول كم، وهو عنصر تحكم قائم بذاته.
## إمكانية الوصول
### ما يتكفل به المكوّن
- ما دام محتواه لا يتسع ولا شيء بداخله يقبل تركيز لوحة المفاتيح، يصير الصندوق نفسه موضع توقف واحدًا في ترتيب التركيز، ويُعرض منطقةً (region) اسمها `label`، لكي تستطيع لوحة المفاتيح تمريره (WCAG 2.1.1). تمرّره مفاتيح الأسهم والمفاتيح Page Up و Page Down و Home و End و Space، كما تمرّر المنصة أي صندوق.
- ما دام شيء بداخله يقبل التركيز، أو المحتوى يتسع، لا يكون الصندوق موضع توقف ولا يعرض دورًا: تصل لوحة المفاتيح إلى المحتوى، ويُمرَّر المحتوى إلى المنظر حين يتلقى التركيز.
- يُرسم مؤشر التركيز داخل حافة الصندوق، فوق كل علامة ولا تخفّفه علامة أبدًا، ولتركيز لوحة المفاتيح وحده.
- العلامات مخفية عن التقنيات المساعدة، وكل ضغط ومرور بالمؤشر وتمرير فوقها يصل إلى المحتوى تحتها.
- تظهر علامة الحافة وتختفي تدريجيًّا في وقت قصير، وهذا تغيّر في العتامة لا حركة؛ وحين يُطلب تقليل الحركة تظهر فورًا.
- في الألوان المفروضة (forced colors) تُرسم كل هيئة خطًّا بلون النص.
- ليست له كلمات خاصة به. التسمية الفارغة ما دام الصندوق موضع توقف، وقيم `scrollEdge` أو `edges` غير المعروفة يُبلَّغ عنها في بنيات التنقيح (debug).
### ما عليك فعله
- أعطِها `label` يقول ما الذي تحويه. من يصل إلى الصندوق بالمفتاح Tab يسمع هذا الاسم؛ ومن غيره لا يسمع إلا أن هنا منطقة.
- توقّع أن المحتوى الذي تحت الشريط يُقرأ حين يُمرَّر إلى المنظر، لا في مكانه. فالظل أو التلاشي يخفض تباين المحتوى الذي تحته، عن قصد، لكن داخل شريطه فقط، وما دام ذلك المحتوى ممرَّرًا نحو الحافة فقط؛ ويعود المحتوى إلى تباينه الكامل حالما يُمرَّر إلى المنظر.
- أعلِن المحتوى الذي يتغير وحده (قائمة حيّة، رسائل جديدة) كما تعلنه في أي مكان آخر. المنطقة لا تُعلِن ما يدخل بالتمرير.