Anatomy
화면에 보이는 Code와 정확히 복사하는 실제 값은 역할이 다릅니다.
Visible token
실제 값은 Code 폰트로 표시하고 필요하면 CSS ellipsis로만 줄입니다.
Copy affordance
Hover/Focus에서 나타나며 터치에서는 항상 보입니다. 복사 버튼 전체가 native Button입니다.
Feedback
성공/실패 아이콘과 숨겨진 role=status로 결과를 전달합니다. 실패를 성공으로 위장하지 않습니다.
States
Idle → Copied / Failed → Idle. 보조 정보의 시각적 위계를 유지합니다.
짧은 코드와 긴 Canonical ID 모두 data-copy-value 속성의 전체 원문을 복사합니다. 복사된 값이 짧게 보이더라도 원문을 임의로 바꾸지 않습니다.
Usage
복사가 유일한 주 행동인 정확한 식별자나 코드에 사용합니다.
Radar의 opportunity_id와 Workbench의 Common Code에 같은 계약이 적용됩니다. URL을 먼저 열어야 하는 Link+Copy URL과는 다릅니다. Source/Reference CTA는 기존 Quiet Button을 우선 사용합니다.
Accessibility
Keypress·실패·긴 값·다크모드에서도 결과를 알 수 있어야 합니다.
Native Button은 Enter/Space로 동작합니다. aria-label에는 실제 화면의 Code 문자열을 포함합니다. 앱에서는 @wbeen/wbds/copy-actions.js 의 initWbdsCopyActions()를 호출하거나 동등한 Consumer Adapter를 제공합니다.