@cashdoc/cashdoc-cms-design-system 2.6.2 → 2.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -15,6 +15,15 @@ export type ModalProps = {
|
|
|
15
15
|
modal?: boolean;
|
|
16
16
|
icon?: React.ReactNode;
|
|
17
17
|
title?: React.ReactNode;
|
|
18
|
+
/**
|
|
19
|
+
* 스크린리더에 전달할 모달 설명 텍스트입니다. 지정하면 시각적으로는
|
|
20
|
+
* 숨겨진 채 `aria-describedby`로 연결됩니다.
|
|
21
|
+
*
|
|
22
|
+
* `children`은 `<div>` 컨테이너에 렌더되어 block 요소(픽커, 폼 등)를
|
|
23
|
+
* 안전하게 담을 수 있으므로, 접근성 설명이 필요하면 이 prop을 사용하세요.
|
|
24
|
+
* 지정하지 않으면 Radix의 설명 연결이 생략됩니다(시각/동작 영향 없음).
|
|
25
|
+
*/
|
|
26
|
+
description?: React.ReactNode;
|
|
18
27
|
children: React.ReactNode;
|
|
19
28
|
footer?: React.ReactNode;
|
|
20
29
|
className?: string;
|
|
@@ -107,7 +116,8 @@ export type ModalProps = {
|
|
|
107
116
|
* - **스크린 리더**:
|
|
108
117
|
* - `role="dialog"`: 대화상자임을 인식
|
|
109
118
|
* - `aria-labelledby`: title이 모달의 레이블로 연결됨
|
|
110
|
-
* - `aria-describedby`:
|
|
119
|
+
* - `aria-describedby`: `description` prop이 있으면 시각적으로 숨긴 설명으로
|
|
120
|
+
* 연결됨. `children`은 `<div>` 컨테이너에 렌더되어 block 요소도 안전함.
|
|
111
121
|
*
|
|
112
122
|
* - **포커스 트랩**: 모달이 열려있는 동안 포커스가 모달 내부에서만 순환합니다
|
|
113
123
|
* - **배경 스크롤 방지**: 모달이 열리면 body 스크롤이 자동으로 비활성화됩니다
|
|
@@ -42,7 +42,7 @@ export type PopoverContentProps = ComponentPropsWithoutRef<typeof PopoverPrimiti
|
|
|
42
42
|
* ### ✅ Do (권장 사항)
|
|
43
43
|
*
|
|
44
44
|
* - **명확한 트리거**: 사용자가 무엇을 클릭하면 팝오버가 열릴지 명확히 인지할 수 있는 버튼이나 아이콘을 사용하세요.
|
|
45
|
-
* - **적절한 배치**: `align` 속성을 조절하여 팝오버가 화면 밖으로 나가지 않도록 관리하세요. (기본값: '
|
|
45
|
+
* - **적절한 배치**: `align` 속성을 조절하여 팝오버가 화면 밖으로 나가지 않도록 관리하세요. (기본값: 'start' — 팝오버 왼쪽 보더가 트리거 왼쪽 선에 정렬)
|
|
46
46
|
*
|
|
47
47
|
* ### 🚫 Don't (주의/금지 사항)
|
|
48
48
|
*
|