复制按钮
按一次就复制给定文本并加以确认的按钮；复制不了时也会说明。它由 Button 绘制，默认绝不会让布局移动。
- 类别
- 操作
- 令牌
comp.copy-button- 层级
- 组合
- 构成自
- Button
- Web
tanrei-copy-buttonschedule - SwiftUI
TanreiCopyButtonradio_button_unchecked - Jetpack Compose
TanreiCopyButtonradio_button_unchecked - Flutter
TanreiCopyButtonradio_button_unchecked - React Native
CopyButtonradio_button_unchecked
生成自 docs/status/status.json, specs/copy-button.spec.json
按下其中一个：字形会暂时变成对勾
复制按钮放在用户会粘贴到别处的东西旁边：一条命令、一个密钥、一个地址、一个颜色值。它等待浏览器的答复，显示对勾（或错误标记）两秒钟，并用文字告知辅助技术。代码块会替你放置一个。
复制按钮是一个按钮，变体和尺寸由你指定。它没有自己的颜色和尺寸，所以重新定义 Button 样式的设计系统会连带改变每一个复制按钮。
文字由你提供。label、copied-label 和 failed-label 没有默认值，因为 Tanrei 不自带任何语言的文字。
SwiftUI、Compose、Flutter 和 React Native 尚在计划中：本页开头各平台旁边的名称是规格为它们定下的，这些平台目前还没有提供任何实现。
<!-- 纯图标（默认）：由 label 命名。 -->
<tanrei-copy-button
text="npm install @tanrei/web"
label="复制"
copied-label="已复制"
failed-label="无法复制"
></tanrei-copy-button>
<!-- 带标签：文字随形态变化，宽度始终不变。 -->
<tanrei-copy-button
icon-only="false"
variant="tonal"
text="https://example.com/s/4f2a"
label="复制链接"
copied-label="链接已复制"
failed-label="无法复制"
></tanrei-copy-button>
<!-- 带标签，宽度随文字变化：只用在一行的末尾。 -->
<tanrei-copy-button
icon-only="false"
label-width="fit"
text="sk-test-0000"
label="复制"
copied-label="已复制到剪贴板"
failed-label="无法复制"
></tanrei-copy-button>
<script type="module">
import '@tanrei/web';
document.querySelector('tanrei-copy-button').addEventListener('copyfailed', () => {
// 按钮已经说明无法复制。接下来还要做什么，由你决定。
});
</script>import { CopyButton } from '@tanrei/react';
<CopyButton text={command} label="复制" copiedLabel="已复制" failedLabel="无法复制" onCopyFailed={() => showHelp()} />尺寸和变体都是 Button 的
宽度按三段文字中最长的一段保留
label-width 为 fit 时，宽度随文字变化
设置 label-width="fit" 后，带标签的形式与它显示的文字一样宽。文字变化时，宽度会在 comp.copy-button.motion.resize-duration 内平滑地变为新文字的宽度；在减弱动态效果时则立即变化。默认值仍是 widest，因为在用户正要按下时移动的控件容易被误按。只有在按钮后面没有用户接下来可能按的东西时（例如一行的末尾），才使用 fit。
按钮有三种形态：静止（字形 content_copy）、已复制（check）和失败（error）。只有在浏览器确认复制完成之后，它才显示已复制形态，并在 comp.copy-button.confirmation.duration（2 秒）之后回到静止形态。在它显示确认期间再按一次，会再复制一次、再确认一次。
形态变化时任何东西都不会移动。三个字形画在同一个框里。带标签的形式默认始终保持最宽那段文字的宽度；设置 label-width="fit" 后，宽度会像上面那样随文字变化。
字形立即变化，不带动效。这两秒是留给用户注意到的时间，所以在减弱动态效果时依然保留。
如果按钮显示“已复制”期间文本变了，它会立即回到静止形态：刚才复制的已经不是现在会复制的内容。
事件是 copied 和 copyfailed。它们不叫 copy，因为 copy 是文档自己的剪贴板事件。
构成
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
text | string | "" | The text to copy, exactly as it will be pasted. Plain text only. |
label | string | "" | What the button does, in the product's language ("Copy", "Copy link", "Copy JSON"): the accessible name of the icon-only form and the visible text of the labelled one. Required. |
copiedLabel | string | "" | What is announced, and shown in the labelled form, when the text has been copied ("Copied"). Required. |
failedLabel | string | "" | What is announced, and shown in the labelled form, when the platform refuses the copy ("Could not copy"). Required. |
iconOnly | boolean | true | True draws the glyph alone, named by label. False draws the glyph and the label as text. |
labelWidth | widest | fit | "widest" | How wide the labelled form's text box is. widest, the default, keeps it as wide as the widest of label, copiedLabel and failedLabel at all times, so the button never changes its width and nothing beside it moves (CPY-7). fit makes it as wide as the text it shows, and eases its width to the new text when the form changes (CPY-19): for a button with nothing after it in its row that a person may press next. Ignored while iconOnly is true. |
variant | filled | tonal | elevated | outlined | text | "text" | The Button variant it is drawn as. The default, text, is the quiet icon action beside what it copies; a copy that is a view's main action takes another. The values are Button's. |
size | small | medium | large | "medium" | The Button size it is drawn at (32 / 40 / 56). The values are Button's. |
disabled | boolean | false | Prevents the copy; the button is drawn and exposed as a disabled Button. |
事件
| 事件 | 说明 |
|---|---|
copied | The platform confirmed that the text is on the clipboard; carries the text. |
copyFailed | The platform refused the copy or has no clipboard to write to; carries the platform's reason where it gives one. |
状态
行为
以 EARS 形式写成的需求。每个平台的实现都按这些 ID 逐条测试。需求原文取自规格文件，原样以英文呈现。
| ID | 需求 |
|---|---|
CPY-1 | THE copy button SHALL be drawn as a Button (BTN) of its variant and size, from the Button's own tokens in every state — its container, its glyph, its label, its state layer, its outline and elevation, its disabled form — icon-only with the glyph content_copy WHILE iconOnly is true, and with that glyph leading and label as its text otherwise. It SHALL have no color, shape or measure of its own, SHALL extend its hit area as BTN-5 says, and SHALL draw its glyphs through the platform's icon helper, as a Button does. |
CPY-2 | WHEN the copy button is activated by pointer, touch, Enter, Space or assistive technology THE copy button SHALL ask the platform to put text on the clipboard as plain text, exactly as given; it SHALL NOT read the clipboard, SHALL NOT copy anything but text, SHALL NOT move focus, and SHALL NOT show the copied form before the platform has answered. A second activation before that answer SHALL be ignored. |
CPY-3 | WHEN the platform confirms that the text is on the clipboard THE copy button SHALL take the copied form: the glyph check in place of content_copy, in the same box and the same color, and, WHILE iconOnly is false, copiedLabel in place of label; it SHALL emit copied once, carrying the text, and SHALL return to rest comp.copy-button.confirmation.duration after it took the form. |
CPY-4 | IF the platform refuses the copy or has no clipboard to write to THEN THE copy button SHALL take the failed form — the glyph error in the same box and the same color, and, WHILE iconOnly is false, failedLabel in place of label — SHALL emit copyFailed once, and SHALL return to rest comp.copy-button.confirmation.duration after it took the form. It SHALL NOT select the text, open a dialog or try another way by itself: what else happens is the product's, on that event. IF text is empty WHEN the copy button is activated THEN it SHALL copy nothing and take the failed form, and in debug builds report that there was nothing to copy. |
CPY-5 | WHEN the copy button takes the copied form THE copy button SHALL have assistive technology announce copiedLabel once, politely (after what is being read); WHEN it takes the failed form it SHALL have failedLabel announced once, assertively. Every activation SHALL be announced anew, also when the same words were announced a moment before. The announcement SHALL NOT move keyboard or screen-reader focus, and nothing SHALL be announced on the return to rest. |
CPY-6 | WHILE iconOnly is true THE copy button SHALL be named by label in every form: its name does not change with its form, and the form is told by the announcement of CPY-5. WHILE iconOnly is false THE copy button SHALL be named by the text it shows. THE glyph SHALL be kept from assistive technology in every form. |
CPY-7 | THE copy button SHALL NOT move or resize anything when it changes form, but as CPY-19 says WHILE labelWidth is fit: the three glyphs are drawn in one box; WHILE iconOnly is false and labelWidth is widest the label's box SHALL be as wide as the widest of label, copiedLabel and failedLabel at all times, the shown text at its start, and the button's width and height SHALL be the same in every form; its height SHALL be the same in every form whatever labelWidth is; and the copy button SHALL open no popover, menu or other surface of its own but the confirmation of CPY-18, which takes no room. |
CPY-8 | WHEN the copy button is activated WHILE it is in the copied or the failed form THE copy button SHALL copy again as CPY-2 says and, on the platform's answer, take the form that answer gives, emit its event, announce it (CPY-5) and count the duration from that moment. |
CPY-9 | THE copy button SHALL change its glyph and its text at once, without a motion, in both directions (WHILE labelWidth is fit only the width of the text's box moves, as CPY-19 says); the time of comp.copy-button.confirmation.duration is a time to notice and SHALL NOT be shortened or skipped where motion is reduced. WHEN text changes WHILE the copy button is in the copied form THE copy button SHALL return to rest at once: what was copied is no longer what would be. |
CPY-10 | WHILE disabled is true THE copy button SHALL be drawn and exposed as a disabled Button, SHALL copy nothing and SHALL emit nothing; WHEN it becomes disabled WHILE in the copied or the failed form it SHALL return to rest at once. |
CPY-11 | WHILE the system's icon set cannot yet draw a glyph of the copy button (its font is still loading) THE copy button SHALL draw nothing in that glyph's place, never the glyph's name as text, SHALL keep the glyph's box, and SHALL draw the glyph once the set can; label, copiedLabel and failedLabel SHALL still reach assistive technology. |
CPY-12 | WHEN the copy button is pressed by pointer, touch, Enter or Space THE copy button SHALL show the pressed state without delay and SHALL keep it visible for at least sys.motion.duration.press-hold, even when the press ends sooner. |
CPY-13 | WHILE pressed THE copy button SHALL answer as sys.behavior.pressed-feedback names: overlay applies the pressed tokens to the whole container at once; ripple grows the pressed state layer from the point of contact (from the center for keyboard activation); dim applies the pressed opacity to the whole control and draws no state layer; none draws no answer to the press. Under ripple and dim only the container color stays with the state under the press; label, icon, outline, elevation, opacity and shape still come from the pressed tokens. Under none every part stays with the state under the press. The ripple grows over comp.button.motion.feedback-duration with comp.button.motion.state-easing, fades over the state duration of its size (comp.button.motion.state-duration.small, .medium or .large) with comp.button.motion.state-easing once the press has ended and press-hold has passed, and appears whole where motion is reduced. |
CPY-14 | THE copy button SHALL ease its container corners by sys.shape.corner-smoothing (0 is a quarter circle, 0.6 the iOS continuous corner; a platform with only the OS curve draws it for any amount above 0) and show its keyboard focus as sys.behavior.focus-style names (ring or glow); a platform that cannot draw a choice SHALL fall back to the first value and state that in its README. |
CPY-15 | THE copy button 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 copy button is shown THE copy button SHALL draw itself for the new direction at once, without a motion of its own, keeping its form, the time left before it returns to rest and its focus. |
CPY-16 | WHERE the layout direction is right-to-left THE copy button SHALL place its glyph and its label as a Button places a leading icon and a label (BTN-11), and SHALL draw each of its glyphs mirrored left to right exactly when the system's icon set marks that glyph's name as mirrored: the icon helper mirrors the glyph inside its own box, changing neither its place, size, color and fill. THE copy button SHALL NOT mirror a glyph itself. |
CPY-17 | WHILE label, copiedLabel or failedLabel is empty THE copy button SHALL still render and copy, and in debug builds report which is missing: an icon-only button without label has no accessible name, unless the product gives it a name of its own on the element — aria-label, or aria-labelledby naming an element — which it then exposes as its accessible name and does not report missing. WHILE label is not empty THE copy button SHALL expose the name CPY-6 says, over a name the product gives it on the element (aria-label or aria-labelledby). WHEN variant or size names a value the Button does not have in the active design system THE copy button SHALL be drawn with its own default for that prop, and in debug builds report the unknown value. |
CPY-18 | WHEN the copy button takes the copied or the failed form WHILE iconOnly is true THE copy button SHALL show copiedLabel or failedLabel as a plain Tooltip (TIP) of its button — drawn from the Tooltip's own tokens and placed as it places itself, at the top by default — for as long as the form lasts, and SHALL close it at the return to rest; each answer of CPY-8 SHALL show it anew. It SHALL take no focus and no room, move nothing, and SHALL NOT open or close on hover, focus or a long press; it SHALL be closed by Escape and by another tooltip that opens, as any tooltip is, and SHALL be kept from assistive technology, which hears the words once, from the announcement of CPY-5. WHILE iconOnly is false THE copy button SHALL show no such bubble: its label says it. |
CPY-19 | WHILE iconOnly is false and labelWidth is fit THE copy button SHALL make the label's box as wide as the text it shows, and its button as wide as that box and its glyph make it, the text on one line; WHEN the shown text changes — the form changes, or the words of the form shown do — THE copy button SHALL change the box's width from the width it has to the new text's over comp.copy-button.motion.resize-duration with comp.copy-button.motion.resize-easing, keeping its height, its glyph and the start of its text in place and clipping the text at the box's end while the box is narrower than it, and SHALL change the width at once where motion is reduced. THE copy button SHALL take its first width, and a width that changes because the text's face has arrived, at once. A change of form during the motion SHALL continue from the width reached. |
CPY-20 | 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 copy button 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 the element that carries its role — an id reference by the elements it names in the host's tree or a tree around it, an error message as part of the description while the copy button is invalid — except those the copy button owns (aria-pressed, aria-disabled), which it SHALL move and not expose. 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 copy button SHALL take it off that element. WHEN the product sets an aria- attribute the copy button owns THE copy button SHALL report it in debug builds. |
各平台名称对照
对等并不意味着 API 完全相同。同一份契约，由各平台以自己的惯用方式表达。
| 规格 | Web | SwiftUI | Jetpack Compose | Flutter | React Native |
|---|---|---|---|---|---|
| 组件 | tanrei-copy-button | TanreiCopyButton | TanreiCopyButton | TanreiCopyButton | CopyButton |
text · 属性 | text | text | text | text | text |
label · 属性 | label | label | label | label | label |
copiedLabel · 属性 | copiedLabel | copiedLabel | copiedLabel | copiedLabel | copiedLabel |
failedLabel · 属性 | failedLabel | failedLabel | failedLabel | failedLabel | failedLabel |
iconOnly · 属性 | iconOnly | iconOnly | iconOnly | iconOnly | iconOnly |
labelWidth · 属性 | labelWidth | labelWidth | labelWidth | labelWidth | labelWidth |
variant · 属性 | variant | variant | variant | variant | variant |
size · 属性 | size | size | size | size | size |
disabled · 属性 | disabled | disabled | enabled | enabled | disabled |
copied · 事件 | copied | onCopied | onCopied | onCopied | onCopied |
copyFailed · 事件 | copyfailed | onCopyFailed | onCopyFailed | onCopyFailed | onCopyFailed |
| 备注 | <tanrei-copy-button text="…" label="Copy" copied-label="Copied" failed-label="Could not copy">, with icon-only="false" for the labelled form. Its shadow root holds a <tanrei-button> (so every Button token and state applies unchanged) and one visually hidden live region: role="status" for the copied announcement and role="alert" for the failed one, emptied and set again on each activation so the same words are spoken twice (CPY-5). CPY-2 is navigator.clipboard.writeText(text), which needs a secure context and the person's activation; where the API is missing or the promise rejects, that is CPY-4 — no document.execCommand fallback. The events are named copied and copyfailed, not copy, because copy is the document's own clipboard event and bubbles. CPY-7: the three labels are stacked in one grid cell, two of them visibility: hidden. CPY-19 (label-width="fit"): the box's inline-size is set to the shown text's measured width and transitions over the resize tokens (none under prefers-reduced-motion: reduce), clipped at its end with overflow-x: clip; a ResizeObserver on the three texts takes a new face's widths at once. The timer is a setTimeout of the token's value read from the custom property, cleared on a new activation and on disconnect. | TanreiCopyButton(text:, label:, copiedLabel:, failedLabel:, iconOnly:, variant:, size:) over TanreiButton. Writes UIPasteboard.general.string (NSPasteboard.general on macOS), which does not fail; the failed form is reached only where no pasteboard exists (a preview). Announces with AccessibilityNotification.Announcement, at high priority for the failed form. disabled is the environment's isEnabled. It owes labelWidth (CPY-19) as well: fit, a width that follows the shown text, eased over comp.copy-button.motion.resize-duration and at once where motion is reduced. | TanreiCopyButton(text, label, copiedLabel, failedLabel, iconOnly, variant, size, enabled) over TanreiButton, writing through the platform clipboard of the composition. Android 13 and later show the system's own confirmation of a copy: there the copy button still changes its glyph and leaves the announcement of copiedLabel to the system, so the person is told once; the README says so. Earlier versions announce through a polite live region on the button's semantics. It owes labelWidth (CPY-19) as well: fit, a width that follows the shown text, eased over comp.copy-button.motion.resize-duration and at once where motion is reduced. | TanreiCopyButton(text: …, label: …, copiedLabel: …, failedLabel: …) over TanreiButton. Clipboard.setData(ClipboardData(text: text)); a PlatformException is CPY-4. Announces with SemanticsService.announce, assertively for the failed form. On Android 13 and later the same rule as Compose's applies. It owes labelWidth (CPY-19) as well: fit, a width that follows the shown text, eased over comp.copy-button.motion.resize-duration and at once where motion is reduced. | <CopyButton text="…" label="Copy" copiedLabel="Copied" failedLabel="Could not copy" /> over Button. React Native has no clipboard in its core: the package takes the app's writer (write={(text) => Clipboard.setStringAsync(text)}) or a provider set once at the app's root, and a missing writer is CPY-4 with a debug report. Which of the two, and whether a clipboard module becomes an optional peer dependency, is the platform agent's to propose. Announces with AccessibilityInfo.announceForAccessibility. Follows the app's direction where an ancestor's is not known. It owes labelWidth (CPY-19) as well: fit, a width that follows the shown text, eased over comp.copy-button.motion.resize-duration and at once where motion is reduced. |
令牌
| 令牌 | 引用 | 解析值（浅色） |
|---|---|---|
--tanrei-comp-copy-button-confirmation-duration | — | 2000ms |
--tanrei-comp-copy-button-motion-resize-duration | sys.motion.role.resize.default | 300ms |
--tanrei-comp-copy-button-motion-resize-easing | sys.motion.easing.spatial | cubic-bezier(0.2, 0, 0, 1) |
测试样例
作为基准的渲染结果。所有平台都以相同的 ID 为每个样例截取快照，以便相互比较。
icon
text: npm install @tanrei/web label: Copy copiedLabel: Copied failedLabel: Could not copy icon-small
text: npm install @tanrei/web label: Copy copiedLabel: Copied failedLabel: Could not copy size: small icon-large
text: npm install @tanrei/web label: Copy copiedLabel: Copied failedLabel: Could not copy size: large icon-tonal
text: #30a3f0 label: Copy color copiedLabel: Copied failedLabel: Could not copy variant: tonal icon-outlined
text: #30a3f0 label: Copy color copiedLabel: Copied failedLabel: Could not copy variant: outlined icon-elevated
text: #30a3f0 label: Copy color copiedLabel: Copied failedLabel: Could not copy variant: elevated icon-filled
text: #30a3f0 label: Copy color copiedLabel: Copied failedLabel: Could not copy variant: filled icon-disabled
text: npm install @tanrei/web label: Copy copiedLabel: Copied failedLabel: Could not copy disabled: true labelled
text: { "name": "acme" } label: Copy JSON copiedLabel: Copied failedLabel: Could not copy iconOnly: false labelled-tonal
text: https://example.com/s/4f2a label: Copy link copiedLabel: Link copied failedLabel: Could not copy iconOnly: false variant: tonal labelled-filled-small
text: https://example.com/s/4f2a label: Copy link copiedLabel: Link copied failedLabel: Could not copy iconOnly: false variant: filled size: small labelled-outlined-large
text: https://example.com/s/4f2a label: Copy link copiedLabel: Link copied failedLabel: Could not copy iconOnly: false variant: outlined size: large labelled-long-confirmation
text: sk-test-0000 label: Copy copiedLabel: Copied to the clipboard failedLabel: Could not copy iconOnly: false variant: outlined labelled-fit
text: sk-test-0000 label: Copy copiedLabel: Copied to the clipboard failedLabel: Could not copy iconOnly: false labelWidth: fit variant: outlined labelled-disabled
text: sk-test-0000 label: Copy key copiedLabel: Copied failedLabel: Could not copy iconOnly: false disabled: true icon-rtl
text: https://example.com/s/4f2a label: نسخ copiedLabel: تم النسخ failedLabel: تعذر النسخ direction: rtl labelled-rtl
text: https://example.com/s/4f2a label: نسخ الرابط copiedLabel: تم النسخ failedLabel: تعذر النسخ iconOnly: false variant: tonal direction: rtl 生成自 specs/copy-button.spec.json, tokens/comp/copy-button.tokens.json, design/tokens/
- 复制使用
navigator.clipboard.writeText。它需要安全的页面（HTTPS 或 localhost），以及用户的一次按下。浏览器没有剪贴板或者拒绝时，按钮进入失败形态。没有后备方案。 - 这两个事件会冒泡，但不会穿过 shadow root。
| 形式 | 显示什么 | 何时使用 |
|---|---|---|
| 纯图标 | 字形；显示对勾期间，上方的小气泡里还有文字 | 在它所复制的东西旁边：一条命令、一个代码块、某一行里的一个值 |
| 带标签 | 字形和文字，文字随形态变化 | 复制是视图的操作之一，或者这些文字对每个人都重要 |
- 如果从位置上看不出复制的是什么，就在标签里说出来：“复制链接”“复制 JSON”。
- 如果用户无论如何都得拿到这段文本，请监听
copyfailed，并显示一样会留在那里的东西，例如在字段里选中这段文本。 - 放在内容旁边的复制按钮保持 text 变体。复制是视图的主要操作时，再选别的变体。
- 如果带标签的复制按钮后面有用户接下来可能按的东西，请保持默认宽度。只有后面什么都没有时，才选择
label-width="fit"。
- 不要只在悬停时显示按钮。那样的话，触摸操作就找不到它。
- 不要为复制成功另外打开工具提示或消息条。按钮已经确认过了，也用文字确认了。
- 不要用它复制文本以外的任何东西。
- 角色
button- 标注
- The icon-only form is named by label, which is required, in every form: the name does not change when the glyph does. The labelled form is named by the text it shows. The result is announced through a live region: copiedLabel politely, failedLabel assertively (CPY-5).
- 最小目标
- 即使外观尺寸更小，点击区域也满足最小目标尺寸。 minimum 32px · pointer 44px · spacing 8px · touch 48px
键盘操作
| 按键 | 动作 |
|---|---|
| Tab | Moves focus to the copy button. |
| Enter / Space | Copies the text and confirms it; focus stays on the button. |
备注
- The target is the Button's (BTN-5): at least sys.target.touch for touch and sys.target.pointer for a fine pointer on both axes, whatever size is drawn.
- The confirmation is a status message (WCAG 4.1.3): it reaches assistive technology without moving focus. The glyph change alone would say nothing to a person who cannot see it, and a changed name is not announced on every platform, which is why the icon-only form's name stays and the live region speaks.
- The confirmation is not given by color: the glyph changes shape (check, error) in the Button's own icon color, and the words are announced. No success or error color is used.
- The confirmation returns by itself after comp.copy-button.confirmation.duration. Nothing a person must act on is in it, so no timing control is needed (WCAG 2.2.1); a failure a person must act on is the product's to show, on copyFailed, in something that stays.
- A sighted person using the icon-only form sees the check and, for as long as it shows, the same words in a bubble drawn as a plain Tooltip (CPY-18): the change of a glyph alone can be missed by a person who does not know the check, or who reads the page magnified. The bubble is not read a second time: the announcement of CPY-5 is the one assistive technology hears.
- The labelled form's visible text is its name (WCAG 2.5.3) in every form. By default (labelWidth widest) its width is reserved for the widest of the three texts, so neighbouring controls do not move under a pointer about to press them (CPY-7). labelWidth fit lets the width follow the text — a change the person asked for by pressing, eased over a short motion and at once where motion is reduced (WCAG 2.3.3) — and is for a button that nothing a person may press next stands after; its own box still keeps the minimum target in every form.
- Copying needs the platform's permission and, on the web, a secure page and a press by the person: a copy asked for by script alone may be refused, and is then a failure (CPY-4).
生成自 specs/copy-button.spec.json, tokens/sys/measure.tokens.json
- 它是一个按钮，具有 Button 的焦点指示、最小目标和按键（Enter 和空格）。
- 纯图标的形式在每种形态下都由
label命名。字形变化时名称不变。 - 结果通过实时区域朗读：
copied-label以礼貌（polite）的方式，failed-label以立即打断（assertive）的方式；每次按下都朗读，不移动焦点。 - 在确认持续期间，纯图标的形式还会把这些文字显示在一个画成 plain 工具提示的气泡里。它不获取焦点，不会被再读一遍，按 Escape 即可关闭。
- 确认靠的是形状和文字，而不是颜色。
- 在从右到左的布局中，复制字形会按图标集的标记镜像。对勾和错误标记不镜像。
- 带标签的形式默认保持宽度不变，所以正要按下的指针下面不会有东西移动。设置
label-width="fit"时，宽度会平滑地变为新文字的宽度，在减弱动态效果时立即变化。
- 用你的产品的语言提供全部三个标签。没有
label的纯图标按钮没有无障碍名称。 - 如果用户不能丢失这段文本，失败之后请自己跟进处理。