From 044e94979c655b570775204d31963ca60475f54d Mon Sep 17 00:00:00 2001 From: kiner-tang <1127031143@qq.com> Date: Fri, 1 Mar 2024 10:58:50 +0800 Subject: [PATCH] feat: Modal support aria-* in closable (#47650) * feat: Modal support aria-* in closable * feat: Modal support aria-* in closable * feat: Modal support aria-* in closable * chore: bump rc-image * feat: update snap * feat: update snap --- .../__snapshots__/components.test.tsx.snap | 693 +- .../__snapshots__/index.test.tsx.snap | 21 +- .../__snapshots__/index.test.tsx.snap | 8073 +++++++++-------- .../__snapshots__/Modal.test.tsx.snap | 223 +- .../__snapshots__/demo-extend.test.ts.snap | 1183 +-- .../__snapshots__/demo.test.tsx.snap | 1183 +-- components/modal/interface.ts | 4 +- package.json | 6 +- 8 files changed, 5948 insertions(+), 5438 deletions(-) diff --git a/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap b/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap index 166354358cd2..30db8de47e59 100644 --- a/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap +++ b/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap @@ -18309,62 +18309,67 @@ exports[`ConfigProvider components Modal configProvider 1`] = ` tabindex="0" />
- -
- Bamboo is Little Light -
- + Bamboo is Little Light +
+
+ + +
- -
- Bamboo is Little Light -
- + Bamboo is Little Light +
+
+ + +
-
- Bamboo is Little Light -
-
- + Bamboo is Little Light +
+
+ + +
-
- Bamboo is Little Light -
-
- + Bamboo is Little Light +
+
+ + +
- -
- Bamboo is Little Light -
- + Bamboo is Little Light +
+
+ + +
-
- Bamboo is Little Light -
-
- + Bamboo is Little Light +
+
+ + +
-
- Bamboo is Little Light -
-
- + Bamboo is Little Light +
+
+ + +
- +
+ +
diff --git a/components/locale/__tests__/__snapshots__/index.test.tsx.snap b/components/locale/__tests__/__snapshots__/index.test.tsx.snap index a396379904c9..4aaee624d6b8 100644 --- a/components/locale/__tests__/__snapshots__/index.test.tsx.snap +++ b/components/locale/__tests__/__snapshots__/index.test.tsx.snap @@ -7101,74 +7101,79 @@ exports[`Locale Provider should display the text as ar 1`] = ` tabindex="0" />
- -
+
- Locale Modal +
+ Locale Modal +
-
-
-

- Locale Modal -

-
-
- -
+
- - تأكيد - - + + +
- -
+
- Locale Modal +
+ Locale Modal +
-
-
-

- Locale Modal -

-
-
- -
+
- - Bəli - - + + +
- -
+
- Locale Modal +
+ Locale Modal +
-
-
-

- Locale Modal -

-
-
- -
+
- - Добре - - + + +
- -
+
- Locale Modal +
+ Locale Modal +
-
-
-

- Locale Modal -

-
-
- -
+
- - ঠিক - - + + +
- -
+
- Locale Modal +
+ Locale Modal +
-
-
-

- Locale Modal -

-
-
- -
+
- - OK - - + + +
- -
+
- Locale Modal +
+ Locale Modal +
-
-
-

- Locale Modal -

-
-
- -
+
- - D’acord - - + + +
- -
+
- Locale Modal +
+ Locale Modal +
-
-
-

- Locale Modal -

-
-
- -
+
- - OK - - + + +
- -
+
- Locale Modal +
+ Locale Modal +
-
-
-

- Locale Modal -

-
-
- -
+
- - OK - - + + +
- -
+
- Locale Modal +
+ Locale Modal +
-
-
-

- Locale Modal -

-
-
- -
+
- - OK - - + + +
- -
+
- Locale Modal +
+ Locale Modal +
-
-
-

- Locale Modal -

-
-
- -
+
- - ΟΚ - - + + +
- -
+
- Locale Modal +
+ Locale Modal +
-
-
-

- Locale Modal -

-
-
- -
+
- - OK - - + + +
- -
+
- Locale Modal +
+ Locale Modal +
-
-
-

- Locale Modal -

-
-
- -
+
- - OK - - + + +
- -
+
- Locale Modal +
+ Locale Modal +
-
-
-

- Locale Modal -

-
-
- -
+
- - Aceptar - - + + +
- -
+
- Locale Modal +
+ Locale Modal +
-
-
-

- Locale Modal -

-
-
- -
+
- - OK - - + + +
- -
+
- Locale Modal +
+ Locale Modal +
-
-
-

- Locale Modal -

-
-
- -
+
- - Onartu - - + + +
- -
+
- Locale Modal +
+ Locale Modal +
-
-
-

- Locale Modal -

-
-
- -
+
- - تایید - - + + +
- -
+
- Locale Modal +
+ Locale Modal +
-
-
-

- Locale Modal -

-
-
- -
+
- - OK - - + + +
- -
+
- Locale Modal +
+ Locale Modal +
-
-
-

- Locale Modal -

-
-
- -
+
- - OK - - + + +
- -
+
- Locale Modal +
+ Locale Modal +
-
-
-

- Locale Modal -

-
-
- -
+
- - OK - - + + +
- -
+
- Locale Modal +
+ Locale Modal +
-
-
-

- Locale Modal -

-
-
- -
+
- - OK - - + + +
- -
+
- Locale Modal +
+ Locale Modal +
-
-
-

- Locale Modal -

-
-
- -
+
- - OK - - + + +
- -
+
- Locale Modal +
+ Locale Modal +
-
-
-

- Locale Modal -

-
-
- -
+
- - Aceptar - - + + +
- -
+
- Locale Modal +
+ Locale Modal +
-
-
-

- Locale Modal -

-
-
- -
+
- - אישור - - + + +
- -
+
- Locale Modal +
+ Locale Modal +
-
-
-

- Locale Modal -

-
-
- -
+
- - अच्छी तरह से - - + + +
- -
+
- Locale Modal +
+ Locale Modal +
-
-
-

- Locale Modal -

-
-
- -
+
- - OK - - + + +
- -
+
- Locale Modal +
+ Locale Modal +
-
-
-

- Locale Modal -

-
-
- -
+
- - Alkalmazás - - + + +
- -
+
- Locale Modal +
+ Locale Modal +
-
-
-

- Locale Modal -

-
-
- -
+
- - Օկ - - + + +
- -
+
- Locale Modal +
+ Locale Modal +
-
-
-

- Locale Modal -

-
-
- -
+
- - OK - - + + +
- -
+
- Locale Modal +
+ Locale Modal +
-
-
-

- Locale Modal -

-
-
- -
+
- - Áfram - - + + +
- -
+
- Locale Modal +
+ Locale Modal +
-
-
-

- Locale Modal -

-
-
- -
+
- - OK - - + + +
- -
+
- Locale Modal +
+ Locale Modal +
-
-
-

- Locale Modal -

-
-
- -
+
- - OK - - + + +
- -
+
- Locale Modal +
+ Locale Modal +
-
-
-

- Locale Modal -

-
-
- -
+
- - კარგი - - + + +
- -
+
- Locale Modal +
+ Locale Modal +
-
-
-

- Locale Modal -

-
-
- -
+
- - Жарайды - - + + +
- -
+
- Locale Modal +
+ Locale Modal +
-
-
-

- Locale Modal -

-
-
- -
+
- - យល់ព្រម - - + + +
- -
+
- Locale Modal +
+ Locale Modal +
-
-
-

- Locale Modal -

-
-
- -
+
- - ಸರಿ - - + + +
- -
+
- Locale Modal +
+ Locale Modal +
-
-
-

- Locale Modal -

-
-
- -
+
- - 확인 - - + + +
- -
+
- Locale Modal +
+ Locale Modal +
-
-
-

- Locale Modal -

-
-
- -
+
- - Temam - - + + +
- -
+
- Locale Modal +
+ Locale Modal +
-
-
-

- Locale Modal -

-
-
- -
+
- - Temam - - + + +
- -
+
- Locale Modal +
+ Locale Modal +
-
-
-

- Locale Modal -

-
-
- -
+
- - Taip - - + + +
- -
+
- Locale Modal +
+ Locale Modal +
-
-
-

- Locale Modal -

-
-
- -
+
- - OK - - + + +
- -
+
- Locale Modal +
+ Locale Modal +
-
-
-

- Locale Modal -

-
-
- -
+
- - ОК - - + + +
- -
+
- Locale Modal +
+ Locale Modal +
-
-
-

- Locale Modal -

-
-
- -
+
- - ശരിയാണ് - - + + +
- -
+
- Locale Modal +
+ Locale Modal +
-
-
-

- Locale Modal -

-
-
- -
+
- - Тийм - - + + +
- -
+
- Locale Modal +
+ Locale Modal +
-
-
-

- Locale Modal -

-
-
- -
+
- - OK - - + + +
- -
+
- Locale Modal +
+ Locale Modal +
-
-
-

- Locale Modal -

-
-
- -
+
- - အိုကေ - - + + +
- -
+
- Locale Modal +
+ Locale Modal +
-
-
-

- Locale Modal -

-
-
- -
+
- - OK - - + + +
- -
+
- Locale Modal +
+ Locale Modal +
-
-
-

- Locale Modal -

-
-
- -
+
- - हो - - + + +
- -
+
- Locale Modal +
+ Locale Modal +
-
-
-

- Locale Modal -

-
-
- -
+
- - OK - - + + +
- -
+
- Locale Modal +
+ Locale Modal +
-
-
-

- Locale Modal -

-
-
- -
+
- - OK - - + + +
- -
+
- Locale Modal +
+ Locale Modal +
-
-
-

- Locale Modal -

-
-
- -
+
- - OK - - + + +
- -
+
- Locale Modal +
+ Locale Modal +
-
-
-

- Locale Modal -

-
-
- -
+
- - OK - - + + +
- -
+
- Locale Modal +
+ Locale Modal +
-
-
-

- Locale Modal -

-
-
- -
+
- - OK - - + + +
- -
+
- Locale Modal +
+ Locale Modal +
-
-
-

- Locale Modal -

-
-
- -
+
- - OK - - + + +
- -
+
- Locale Modal +
+ Locale Modal +
-
-
-

- Locale Modal -

-
-
- -
+
- - OK - - + + +
- -
+
- Locale Modal +
+ Locale Modal +
-
-
-

- Locale Modal -

-
-
- -
+
- - හරි - - + + +
- -
+
- Locale Modal +
+ Locale Modal +
-
-
-

- Locale Modal -

-
-
- -
+
- - OK - - + + +
- -
+
- Locale Modal +
+ Locale Modal +
-
-
-

- Locale Modal -

-
-
- -
+
- - V redu - - + + +
- -
+
- Locale Modal +
+ Locale Modal +
-
-
-

- Locale Modal -

-
-
- -
+
- - U redu - - + + +
- -
+
- Locale Modal +
+ Locale Modal +
-
-
-

- Locale Modal -

-
-
- -
+
- - OK - - + + +
- -
+
- Locale Modal +
+ Locale Modal +
-
-
-

- Locale Modal -

-
-
- -
+
- - சரி - - + + +
- -
+
- Locale Modal +
+ Locale Modal +
-
-
-

- Locale Modal -

-
-
- -
+
- - ตกลง - - + + +
- -
+
- Locale Modal +
+ Locale Modal +
-
-
-

- Locale Modal -

-
-
- -
+
- - Bolýar - - + + +
- -
+
- Locale Modal +
+ Locale Modal +
-
-
-

- Locale Modal -

-
-
- -
+
- - Tamam - - + + +
- -
+
- Locale Modal +
+ Locale Modal +
-
-
-

- Locale Modal -

-
-
- -
+
- - Гаразд - - + + +
- -
+
- Locale Modal +
+ Locale Modal +
-
-
-

- Locale Modal -

-
-
- -
+
- - ٹھیک ہے - - + + +
- -
+
- Locale Modal +
+ Locale Modal +
-
-
-

- Locale Modal -

-
-
- -
+
- - Đồng ý - - + + +
- -
+
- Locale Modal +
+ Locale Modal +
-
-
-

- Locale Modal -

-
-
- -
+
- - 确 定 - - + + +
- -
+
- Locale Modal +
+ Locale Modal +
-
-
-

- Locale Modal -

-
-
- -
+
- - 確 定 - - + + +
- -
+
- Locale Modal +
+ Locale Modal +
-
-
-

- Locale Modal -

-
-
- -
+
- - 確 定 - - + + +
-
- Here is content of Modal -
-
- + Here is content of Modal +
+
+ + +
- -
- Here is content of Modal + +
+ Here is content of Modal +
- -
- + + +
- -
+
- Hello World! +
+ Hello World! +
-
-
- Hello World?! -
-
- - + + +
- -
+
- Hello World! +
+ Hello World! +
-
-
- Hello World?! -
-
- - + + +
- - -
+ + +
- A good news! +
+ A good news! +
-
-
- + +
@@ -331,70 +346,75 @@ exports[`renders components/modal/demo/component-token.tsx extend context correc tabindex="0" />
- - -
- Confirm This? +
- Some descriptions. + + Confirm This? + +
+ Some descriptions. +
-
-
- - + + +
@@ -769,71 +789,76 @@ exports[`renders components/modal/demo/render-panel.tsx extend context correctly tabindex="0" />
- -
+
- Hello World! +
+ Hello World! +
-
-
- Hello World?! -
-
- - + + +
- - -
+ + +
- A good news! +
+ A good news! +
-
-
- + +
@@ -927,70 +957,75 @@ exports[`renders components/modal/demo/render-panel.tsx extend context correctly tabindex="0" />
- - -
- Confirm This? +
- Some descriptions. + + Confirm This? + +
+ Some descriptions. +
-
-
- - + + +
@@ -1013,140 +1048,145 @@ exports[`renders components/modal/demo/render-panel.tsx extend context correctly tabindex="0" />
- -
+
- Custom Footer Render +
+ Custom Footer Render +
-
-
- - Feature #44318 - + + Feature #44318 + +
-
-
- -
-
- +
+
- - OK - - + +
-
-
- -
-
- +
+
- - Custom - - -
-
- +
+
- - OK - - + +
@@ -1251,71 +1291,76 @@ exports[`renders components/modal/demo/wireframe.tsx extend context correctly 1` tabindex="0" />
- -
+
- Hello World! +
+ Hello World! +
-
-
- Hello World?! -
-
- - + + +
- - -
+ + +
- A good news! +
+ A good news! +
-
-
- + +
@@ -1409,70 +1459,75 @@ exports[`renders components/modal/demo/wireframe.tsx extend context correctly 1` tabindex="0" />
- - -
- Confirm This? +
- Some descriptions. + + Confirm This? + +
+ Some descriptions. +
-
-
- - + + +
diff --git a/components/modal/__tests__/__snapshots__/demo.test.tsx.snap b/components/modal/__tests__/__snapshots__/demo.test.tsx.snap index 77b26e875e48..3796fbc27cb0 100644 --- a/components/modal/__tests__/__snapshots__/demo.test.tsx.snap +++ b/components/modal/__tests__/__snapshots__/demo.test.tsx.snap @@ -80,71 +80,76 @@ exports[`renders components/modal/demo/component-token.tsx correctly 1`] = ` tabindex="0" />
- -
+
- Hello World! +
+ Hello World! +
-
-
- Hello World?! -
-
- - + + +
- -
+
- Hello World! +
+ Hello World! +
-
-
- Hello World?! -
-
- - + + +
- - -
+ + +
- A good news! +
+ A good news! +
-
-
- + +
@@ -323,70 +338,75 @@ exports[`renders components/modal/demo/component-token.tsx correctly 1`] = ` tabindex="0" />
- - -
- Confirm This? +
- Some descriptions. + + Confirm This? + +
+ Some descriptions. +
-
-
- - + + +
@@ -735,71 +755,76 @@ exports[`renders components/modal/demo/render-panel.tsx correctly 1`] = ` tabindex="0" />
- -
+
- Hello World! +
+ Hello World! +
-
-
- Hello World?! -
-
- - + + +
- - -
+ + +
- A good news! +
+ A good news! +
-
-
- + +
@@ -893,70 +923,75 @@ exports[`renders components/modal/demo/render-panel.tsx correctly 1`] = ` tabindex="0" />
- - -
- Confirm This? +
- Some descriptions. + + Confirm This? + +
+ Some descriptions. +
-
-
- - + + +
@@ -979,140 +1014,145 @@ exports[`renders components/modal/demo/render-panel.tsx correctly 1`] = ` tabindex="0" />
- -
+
- Custom Footer Render +
+ Custom Footer Render +
-
-
- - Feature #44318 - + + Feature #44318 + +
-
-
- -
-
- +
+
- - OK - - + +
-
-
- -
-
- +
+
- - Custom - - -
-
- +
+
- - OK - - + +
@@ -1211,71 +1251,76 @@ exports[`renders components/modal/demo/wireframe.tsx correctly 1`] = ` tabindex="0" />
- -
+
- Hello World! +
+ Hello World! +
-
-
- Hello World?! -
-
- - + + +
- - -
+ + +
- A good news! +
+ A good news! +
-
-
- + +
@@ -1369,70 +1419,75 @@ exports[`renders components/modal/demo/wireframe.tsx correctly 1`] = ` tabindex="0" />
- - -
- Confirm This? +
- Some descriptions. + + Confirm This? + +
+ Some descriptions. +
-
-
- - + + +
diff --git a/components/modal/interface.ts b/components/modal/interface.ts index bc20501acd01..2c31c0d4b860 100644 --- a/components/modal/interface.ts +++ b/components/modal/interface.ts @@ -19,7 +19,7 @@ export interface ModalProps extends ModalCommonProps { /** The modal dialog's title */ title?: React.ReactNode; /** Whether a close (x) button is visible on top right of the modal dialog or not. Recommend to use closeIcon instead. */ - closable?: boolean; + closable?: boolean | ({ closeIcon?: React.ReactNode } & React.AriaAttributes); /** Specify a function that will be called when a user clicks the OK button */ onOk?: (e: React.MouseEvent) => void; /** Specify a function that will be called when a user clicks mask, close button on top right or Cancel button */ @@ -84,7 +84,7 @@ export interface ModalFuncProps extends ModalCommonProps { /** @deprecated Please use `open` instead. */ visible?: boolean; title?: React.ReactNode; - closable?: boolean; + closable?: boolean | ({ closeIcon?: React.ReactNode } & React.AriaAttributes); content?: React.ReactNode; // TODO: find out exact types onOk?: (...args: any[]) => any; diff --git a/package.json b/package.json index a02c098b34ce..4fba7b1db513 100644 --- a/package.json +++ b/package.json @@ -136,11 +136,11 @@ "rc-cascader": "~3.21.2", "rc-checkbox": "~3.1.0", "rc-collapse": "~3.7.2", - "rc-dialog": "~9.3.4", + "rc-dialog": "~9.4.0", "rc-drawer": "~7.1.0", "rc-dropdown": "~4.1.0", "rc-field-form": "~1.41.0", - "rc-image": "~7.5.1", + "rc-image": "~7.6.0", "rc-input": "~1.4.3", "rc-input-number": "~9.0.0", "rc-mentions": "~2.10.1", @@ -357,7 +357,7 @@ }, { "path": "./dist/antd-with-locales.min.js", - "limit": "380 KiB" + "limit": "381 KiB" } ], "title": "Ant Design",