diff --git a/components/config-provider/__tests__/__snapshots__/components.test.js.snap b/components/config-provider/__tests__/__snapshots__/components.test.js.snap
index 5e15e06729..f0cd46d6db 100644
--- a/components/config-provider/__tests__/__snapshots__/components.test.js.snap
+++ b/components/config-provider/__tests__/__snapshots__/components.test.js.snap
@@ -15582,12 +15582,12 @@ exports[`ConfigProvider components Modal configProvider 1`] = `
     />
     <div
       class="config-modal-wrap"
-      role="dialog"
       tabindex="-1"
     >
       <div
+        aria-modal="true"
         class="config-modal"
-        role="document"
+        role="dialog"
         style="width:520px"
       >
         <div
@@ -15674,12 +15674,12 @@ exports[`ConfigProvider components Modal configProvider componentSize large 1`]
     />
     <div
       class="config-modal-wrap"
-      role="dialog"
       tabindex="-1"
     >
       <div
+        aria-modal="true"
         class="config-modal"
-        role="document"
+        role="dialog"
         style="width:520px"
       >
         <div
@@ -15766,12 +15766,12 @@ exports[`ConfigProvider components Modal configProvider componentSize middle 1`]
     />
     <div
       class="config-modal-wrap"
-      role="dialog"
       tabindex="-1"
     >
       <div
+        aria-modal="true"
         class="config-modal"
-        role="document"
+        role="dialog"
         style="width:520px"
       >
         <div
@@ -15858,12 +15858,12 @@ exports[`ConfigProvider components Modal configProvider virtual and dropdownMatc
     />
     <div
       class="ant-modal-wrap"
-      role="dialog"
       tabindex="-1"
     >
       <div
+        aria-modal="true"
         class="ant-modal"
-        role="document"
+        role="dialog"
         style="width:520px"
       >
         <div
@@ -15950,12 +15950,12 @@ exports[`ConfigProvider components Modal normal 1`] = `
     />
     <div
       class="ant-modal-wrap"
-      role="dialog"
       tabindex="-1"
     >
       <div
+        aria-modal="true"
         class="ant-modal"
-        role="document"
+        role="dialog"
         style="width:520px"
       >
         <div
@@ -16042,12 +16042,12 @@ exports[`ConfigProvider components Modal prefixCls 1`] = `
     />
     <div
       class="prefix-Modal-wrap"
-      role="dialog"
       tabindex="-1"
     >
       <div
+        aria-modal="true"
         class="prefix-Modal"
-        role="document"
+        role="dialog"
         style="width:520px"
       >
         <div
diff --git a/components/locale-provider/__tests__/__snapshots__/index.test.js.snap b/components/locale-provider/__tests__/__snapshots__/index.test.js.snap
index 270eff899e..3d7af4625e 100644
--- a/components/locale-provider/__tests__/__snapshots__/index.test.js.snap
+++ b/components/locale-provider/__tests__/__snapshots__/index.test.js.snap
@@ -6859,12 +6859,12 @@ exports[`Locale Provider should display the text as ar 1`] = `
     <div
       aria-labelledby="test-id"
       class="ant-modal-wrap"
-      role="dialog"
       tabindex="-1"
     >
       <div
+        aria-modal="true"
         class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
-        role="document"
+        role="dialog"
         style="width: 520px;"
       >
         <div
@@ -11946,12 +11946,12 @@ exports[`Locale Provider should display the text as az 1`] = `
     <div
       aria-labelledby="test-id"
       class="ant-modal-wrap"
-      role="dialog"
       tabindex="-1"
     >
       <div
+        aria-modal="true"
         class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
-        role="document"
+        role="dialog"
         style="width: 520px;"
       >
         <div
@@ -17033,12 +17033,12 @@ exports[`Locale Provider should display the text as bg 1`] = `
     <div
       aria-labelledby="test-id"
       class="ant-modal-wrap"
-      role="dialog"
       tabindex="-1"
     >
       <div
+        aria-modal="true"
         class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
-        role="document"
+        role="dialog"
         style="width: 520px;"
       >
         <div
@@ -22120,12 +22120,12 @@ exports[`Locale Provider should display the text as bn-bd 1`] = `
     <div
       aria-labelledby="test-id"
       class="ant-modal-wrap"
-      role="dialog"
       tabindex="-1"
     >
       <div
+        aria-modal="true"
         class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
-        role="document"
+        role="dialog"
         style="width: 520px;"
       >
         <div
@@ -27207,12 +27207,12 @@ exports[`Locale Provider should display the text as by 1`] = `
     <div
       aria-labelledby="test-id"
       class="ant-modal-wrap"
-      role="dialog"
       tabindex="-1"
     >
       <div
+        aria-modal="true"
         class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
-        role="document"
+        role="dialog"
         style="width: 520px;"
       >
         <div
@@ -32294,12 +32294,12 @@ exports[`Locale Provider should display the text as ca 1`] = `
     <div
       aria-labelledby="test-id"
       class="ant-modal-wrap"
-      role="dialog"
       tabindex="-1"
     >
       <div
+        aria-modal="true"
         class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
-        role="document"
+        role="dialog"
         style="width: 520px;"
       >
         <div
@@ -37381,12 +37381,12 @@ exports[`Locale Provider should display the text as cs 1`] = `
     <div
       aria-labelledby="test-id"
       class="ant-modal-wrap"
-      role="dialog"
       tabindex="-1"
     >
       <div
+        aria-modal="true"
         class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
-        role="document"
+        role="dialog"
         style="width: 520px;"
       >
         <div
@@ -42468,12 +42468,12 @@ exports[`Locale Provider should display the text as da 1`] = `
     <div
       aria-labelledby="test-id"
       class="ant-modal-wrap"
-      role="dialog"
       tabindex="-1"
     >
       <div
+        aria-modal="true"
         class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
-        role="document"
+        role="dialog"
         style="width: 520px;"
       >
         <div
@@ -47555,12 +47555,12 @@ exports[`Locale Provider should display the text as de 1`] = `
     <div
       aria-labelledby="test-id"
       class="ant-modal-wrap"
-      role="dialog"
       tabindex="-1"
     >
       <div
+        aria-modal="true"
         class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
-        role="document"
+        role="dialog"
         style="width: 520px;"
       >
         <div
@@ -52642,12 +52642,12 @@ exports[`Locale Provider should display the text as el 1`] = `
     <div
       aria-labelledby="test-id"
       class="ant-modal-wrap"
-      role="dialog"
       tabindex="-1"
     >
       <div
+        aria-modal="true"
         class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
-        role="document"
+        role="dialog"
         style="width: 520px;"
       >
         <div
@@ -57729,12 +57729,12 @@ exports[`Locale Provider should display the text as en 1`] = `
     <div
       aria-labelledby="test-id"
       class="ant-modal-wrap"
-      role="dialog"
       tabindex="-1"
     >
       <div
+        aria-modal="true"
         class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
-        role="document"
+        role="dialog"
         style="width: 520px;"
       >
         <div
@@ -62816,12 +62816,12 @@ exports[`Locale Provider should display the text as en-gb 1`] = `
     <div
       aria-labelledby="test-id"
       class="ant-modal-wrap"
-      role="dialog"
       tabindex="-1"
     >
       <div
+        aria-modal="true"
         class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
-        role="document"
+        role="dialog"
         style="width: 520px;"
       >
         <div
@@ -67903,12 +67903,12 @@ exports[`Locale Provider should display the text as es 1`] = `
     <div
       aria-labelledby="test-id"
       class="ant-modal-wrap"
-      role="dialog"
       tabindex="-1"
     >
       <div
+        aria-modal="true"
         class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
-        role="document"
+        role="dialog"
         style="width: 520px;"
       >
         <div
@@ -72990,12 +72990,12 @@ exports[`Locale Provider should display the text as et 1`] = `
     <div
       aria-labelledby="test-id"
       class="ant-modal-wrap"
-      role="dialog"
       tabindex="-1"
     >
       <div
+        aria-modal="true"
         class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
-        role="document"
+        role="dialog"
         style="width: 520px;"
       >
         <div
@@ -78077,12 +78077,12 @@ exports[`Locale Provider should display the text as fa 1`] = `
     <div
       aria-labelledby="test-id"
       class="ant-modal-wrap"
-      role="dialog"
       tabindex="-1"
     >
       <div
+        aria-modal="true"
         class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
-        role="document"
+        role="dialog"
         style="width: 520px;"
       >
         <div
@@ -83164,12 +83164,12 @@ exports[`Locale Provider should display the text as fi 1`] = `
     <div
       aria-labelledby="test-id"
       class="ant-modal-wrap"
-      role="dialog"
       tabindex="-1"
     >
       <div
+        aria-modal="true"
         class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
-        role="document"
+        role="dialog"
         style="width: 520px;"
       >
         <div
@@ -88251,12 +88251,12 @@ exports[`Locale Provider should display the text as fr 1`] = `
     <div
       aria-labelledby="test-id"
       class="ant-modal-wrap"
-      role="dialog"
       tabindex="-1"
     >
       <div
+        aria-modal="true"
         class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
-        role="document"
+        role="dialog"
         style="width: 520px;"
       >
         <div
@@ -93338,12 +93338,12 @@ exports[`Locale Provider should display the text as fr 2`] = `
     <div
       aria-labelledby="test-id"
       class="ant-modal-wrap"
-      role="dialog"
       tabindex="-1"
     >
       <div
+        aria-modal="true"
         class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
-        role="document"
+        role="dialog"
         style="width: 520px;"
       >
         <div
@@ -98425,12 +98425,12 @@ exports[`Locale Provider should display the text as fr 3`] = `
     <div
       aria-labelledby="test-id"
       class="ant-modal-wrap"
-      role="dialog"
       tabindex="-1"
     >
       <div
+        aria-modal="true"
         class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
-        role="document"
+        role="dialog"
         style="width: 520px;"
       >
         <div
@@ -103512,12 +103512,12 @@ exports[`Locale Provider should display the text as ga 1`] = `
     <div
       aria-labelledby="test-id"
       class="ant-modal-wrap"
-      role="dialog"
       tabindex="-1"
     >
       <div
+        aria-modal="true"
         class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
-        role="document"
+        role="dialog"
         style="width: 520px;"
       >
         <div
@@ -108599,12 +108599,12 @@ exports[`Locale Provider should display the text as gl 1`] = `
     <div
       aria-labelledby="test-id"
       class="ant-modal-wrap"
-      role="dialog"
       tabindex="-1"
     >
       <div
+        aria-modal="true"
         class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
-        role="document"
+        role="dialog"
         style="width: 520px;"
       >
         <div
@@ -113686,12 +113686,12 @@ exports[`Locale Provider should display the text as he 1`] = `
     <div
       aria-labelledby="test-id"
       class="ant-modal-wrap"
-      role="dialog"
       tabindex="-1"
     >
       <div
+        aria-modal="true"
         class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
-        role="document"
+        role="dialog"
         style="width: 520px;"
       >
         <div
@@ -118773,12 +118773,12 @@ exports[`Locale Provider should display the text as hi 1`] = `
     <div
       aria-labelledby="test-id"
       class="ant-modal-wrap"
-      role="dialog"
       tabindex="-1"
     >
       <div
+        aria-modal="true"
         class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
-        role="document"
+        role="dialog"
         style="width: 520px;"
       >
         <div
@@ -123860,12 +123860,12 @@ exports[`Locale Provider should display the text as hr 1`] = `
     <div
       aria-labelledby="test-id"
       class="ant-modal-wrap"
-      role="dialog"
       tabindex="-1"
     >
       <div
+        aria-modal="true"
         class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
-        role="document"
+        role="dialog"
         style="width: 520px;"
       >
         <div
@@ -128947,12 +128947,12 @@ exports[`Locale Provider should display the text as hu 1`] = `
     <div
       aria-labelledby="test-id"
       class="ant-modal-wrap"
-      role="dialog"
       tabindex="-1"
     >
       <div
+        aria-modal="true"
         class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
-        role="document"
+        role="dialog"
         style="width: 520px;"
       >
         <div
@@ -134034,12 +134034,12 @@ exports[`Locale Provider should display the text as hy-am 1`] = `
     <div
       aria-labelledby="test-id"
       class="ant-modal-wrap"
-      role="dialog"
       tabindex="-1"
     >
       <div
+        aria-modal="true"
         class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
-        role="document"
+        role="dialog"
         style="width: 520px;"
       >
         <div
@@ -139121,12 +139121,12 @@ exports[`Locale Provider should display the text as id 1`] = `
     <div
       aria-labelledby="test-id"
       class="ant-modal-wrap"
-      role="dialog"
       tabindex="-1"
     >
       <div
+        aria-modal="true"
         class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
-        role="document"
+        role="dialog"
         style="width: 520px;"
       >
         <div
@@ -144208,12 +144208,12 @@ exports[`Locale Provider should display the text as is 1`] = `
     <div
       aria-labelledby="test-id"
       class="ant-modal-wrap"
-      role="dialog"
       tabindex="-1"
     >
       <div
+        aria-modal="true"
         class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
-        role="document"
+        role="dialog"
         style="width: 520px;"
       >
         <div
@@ -149295,12 +149295,12 @@ exports[`Locale Provider should display the text as it 1`] = `
     <div
       aria-labelledby="test-id"
       class="ant-modal-wrap"
-      role="dialog"
       tabindex="-1"
     >
       <div
+        aria-modal="true"
         class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
-        role="document"
+        role="dialog"
         style="width: 520px;"
       >
         <div
@@ -154382,12 +154382,12 @@ exports[`Locale Provider should display the text as ja 1`] = `
     <div
       aria-labelledby="test-id"
       class="ant-modal-wrap"
-      role="dialog"
       tabindex="-1"
     >
       <div
+        aria-modal="true"
         class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
-        role="document"
+        role="dialog"
         style="width: 520px;"
       >
         <div
@@ -159469,12 +159469,12 @@ exports[`Locale Provider should display the text as ka 1`] = `
     <div
       aria-labelledby="test-id"
       class="ant-modal-wrap"
-      role="dialog"
       tabindex="-1"
     >
       <div
+        aria-modal="true"
         class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
-        role="document"
+        role="dialog"
         style="width: 520px;"
       >
         <div
@@ -164556,12 +164556,12 @@ exports[`Locale Provider should display the text as kk 1`] = `
     <div
       aria-labelledby="test-id"
       class="ant-modal-wrap"
-      role="dialog"
       tabindex="-1"
     >
       <div
+        aria-modal="true"
         class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
-        role="document"
+        role="dialog"
         style="width: 520px;"
       >
         <div
@@ -169643,12 +169643,12 @@ exports[`Locale Provider should display the text as km 1`] = `
     <div
       aria-labelledby="test-id"
       class="ant-modal-wrap"
-      role="dialog"
       tabindex="-1"
     >
       <div
+        aria-modal="true"
         class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
-        role="document"
+        role="dialog"
         style="width: 520px;"
       >
         <div
@@ -174730,12 +174730,12 @@ exports[`Locale Provider should display the text as kn 1`] = `
     <div
       aria-labelledby="test-id"
       class="ant-modal-wrap"
-      role="dialog"
       tabindex="-1"
     >
       <div
+        aria-modal="true"
         class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
-        role="document"
+        role="dialog"
         style="width: 520px;"
       >
         <div
@@ -179817,12 +179817,12 @@ exports[`Locale Provider should display the text as ko 1`] = `
     <div
       aria-labelledby="test-id"
       class="ant-modal-wrap"
-      role="dialog"
       tabindex="-1"
     >
       <div
+        aria-modal="true"
         class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
-        role="document"
+        role="dialog"
         style="width: 520px;"
       >
         <div
@@ -184904,12 +184904,12 @@ exports[`Locale Provider should display the text as ku 1`] = `
     <div
       aria-labelledby="test-id"
       class="ant-modal-wrap"
-      role="dialog"
       tabindex="-1"
     >
       <div
+        aria-modal="true"
         class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
-        role="document"
+        role="dialog"
         style="width: 520px;"
       >
         <div
@@ -189991,12 +189991,12 @@ exports[`Locale Provider should display the text as ku-iq 1`] = `
     <div
       aria-labelledby="test-id"
       class="ant-modal-wrap"
-      role="dialog"
       tabindex="-1"
     >
       <div
+        aria-modal="true"
         class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
-        role="document"
+        role="dialog"
         style="width: 520px;"
       >
         <div
@@ -195078,12 +195078,12 @@ exports[`Locale Provider should display the text as lt 1`] = `
     <div
       aria-labelledby="test-id"
       class="ant-modal-wrap"
-      role="dialog"
       tabindex="-1"
     >
       <div
+        aria-modal="true"
         class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
-        role="document"
+        role="dialog"
         style="width: 520px;"
       >
         <div
@@ -200165,12 +200165,12 @@ exports[`Locale Provider should display the text as lv 1`] = `
     <div
       aria-labelledby="test-id"
       class="ant-modal-wrap"
-      role="dialog"
       tabindex="-1"
     >
       <div
+        aria-modal="true"
         class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
-        role="document"
+        role="dialog"
         style="width: 520px;"
       >
         <div
@@ -205252,12 +205252,12 @@ exports[`Locale Provider should display the text as mk 1`] = `
     <div
       aria-labelledby="test-id"
       class="ant-modal-wrap"
-      role="dialog"
       tabindex="-1"
     >
       <div
+        aria-modal="true"
         class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
-        role="document"
+        role="dialog"
         style="width: 520px;"
       >
         <div
@@ -210339,12 +210339,12 @@ exports[`Locale Provider should display the text as ml 1`] = `
     <div
       aria-labelledby="test-id"
       class="ant-modal-wrap"
-      role="dialog"
       tabindex="-1"
     >
       <div
+        aria-modal="true"
         class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
-        role="document"
+        role="dialog"
         style="width: 520px;"
       >
         <div
@@ -215426,12 +215426,12 @@ exports[`Locale Provider should display the text as mn-mn 1`] = `
     <div
       aria-labelledby="test-id"
       class="ant-modal-wrap"
-      role="dialog"
       tabindex="-1"
     >
       <div
+        aria-modal="true"
         class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
-        role="document"
+        role="dialog"
         style="width: 520px;"
       >
         <div
@@ -220513,12 +220513,12 @@ exports[`Locale Provider should display the text as ms-my 1`] = `
     <div
       aria-labelledby="test-id"
       class="ant-modal-wrap"
-      role="dialog"
       tabindex="-1"
     >
       <div
+        aria-modal="true"
         class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
-        role="document"
+        role="dialog"
         style="width: 520px;"
       >
         <div
@@ -225600,12 +225600,12 @@ exports[`Locale Provider should display the text as nb 1`] = `
     <div
       aria-labelledby="test-id"
       class="ant-modal-wrap"
-      role="dialog"
       tabindex="-1"
     >
       <div
+        aria-modal="true"
         class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
-        role="document"
+        role="dialog"
         style="width: 520px;"
       >
         <div
@@ -230687,12 +230687,12 @@ exports[`Locale Provider should display the text as ne-np 1`] = `
     <div
       aria-labelledby="test-id"
       class="ant-modal-wrap"
-      role="dialog"
       tabindex="-1"
     >
       <div
+        aria-modal="true"
         class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
-        role="document"
+        role="dialog"
         style="width: 520px;"
       >
         <div
@@ -235774,12 +235774,12 @@ exports[`Locale Provider should display the text as nl 1`] = `
     <div
       aria-labelledby="test-id"
       class="ant-modal-wrap"
-      role="dialog"
       tabindex="-1"
     >
       <div
+        aria-modal="true"
         class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
-        role="document"
+        role="dialog"
         style="width: 520px;"
       >
         <div
@@ -240861,12 +240861,12 @@ exports[`Locale Provider should display the text as nl-be 1`] = `
     <div
       aria-labelledby="test-id"
       class="ant-modal-wrap"
-      role="dialog"
       tabindex="-1"
     >
       <div
+        aria-modal="true"
         class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
-        role="document"
+        role="dialog"
         style="width: 520px;"
       >
         <div
@@ -245948,12 +245948,12 @@ exports[`Locale Provider should display the text as pl 1`] = `
     <div
       aria-labelledby="test-id"
       class="ant-modal-wrap"
-      role="dialog"
       tabindex="-1"
     >
       <div
+        aria-modal="true"
         class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
-        role="document"
+        role="dialog"
         style="width: 520px;"
       >
         <div
@@ -251035,12 +251035,12 @@ exports[`Locale Provider should display the text as pt 1`] = `
     <div
       aria-labelledby="test-id"
       class="ant-modal-wrap"
-      role="dialog"
       tabindex="-1"
     >
       <div
+        aria-modal="true"
         class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
-        role="document"
+        role="dialog"
         style="width: 520px;"
       >
         <div
@@ -256122,12 +256122,12 @@ exports[`Locale Provider should display the text as pt-br 1`] = `
     <div
       aria-labelledby="test-id"
       class="ant-modal-wrap"
-      role="dialog"
       tabindex="-1"
     >
       <div
+        aria-modal="true"
         class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
-        role="document"
+        role="dialog"
         style="width: 520px;"
       >
         <div
@@ -261209,12 +261209,12 @@ exports[`Locale Provider should display the text as ro 1`] = `
     <div
       aria-labelledby="test-id"
       class="ant-modal-wrap"
-      role="dialog"
       tabindex="-1"
     >
       <div
+        aria-modal="true"
         class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
-        role="document"
+        role="dialog"
         style="width: 520px;"
       >
         <div
@@ -266296,12 +266296,12 @@ exports[`Locale Provider should display the text as ru 1`] = `
     <div
       aria-labelledby="test-id"
       class="ant-modal-wrap"
-      role="dialog"
       tabindex="-1"
     >
       <div
+        aria-modal="true"
         class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
-        role="document"
+        role="dialog"
         style="width: 520px;"
       >
         <div
@@ -271383,12 +271383,12 @@ exports[`Locale Provider should display the text as sk 1`] = `
     <div
       aria-labelledby="test-id"
       class="ant-modal-wrap"
-      role="dialog"
       tabindex="-1"
     >
       <div
+        aria-modal="true"
         class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
-        role="document"
+        role="dialog"
         style="width: 520px;"
       >
         <div
@@ -276470,12 +276470,12 @@ exports[`Locale Provider should display the text as sl 1`] = `
     <div
       aria-labelledby="test-id"
       class="ant-modal-wrap"
-      role="dialog"
       tabindex="-1"
     >
       <div
+        aria-modal="true"
         class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
-        role="document"
+        role="dialog"
         style="width: 520px;"
       >
         <div
@@ -281557,12 +281557,12 @@ exports[`Locale Provider should display the text as sr 1`] = `
     <div
       aria-labelledby="test-id"
       class="ant-modal-wrap"
-      role="dialog"
       tabindex="-1"
     >
       <div
+        aria-modal="true"
         class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
-        role="document"
+        role="dialog"
         style="width: 520px;"
       >
         <div
@@ -286644,12 +286644,12 @@ exports[`Locale Provider should display the text as sv 1`] = `
     <div
       aria-labelledby="test-id"
       class="ant-modal-wrap"
-      role="dialog"
       tabindex="-1"
     >
       <div
+        aria-modal="true"
         class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
-        role="document"
+        role="dialog"
         style="width: 520px;"
       >
         <div
@@ -291731,12 +291731,12 @@ exports[`Locale Provider should display the text as ta 1`] = `
     <div
       aria-labelledby="test-id"
       class="ant-modal-wrap"
-      role="dialog"
       tabindex="-1"
     >
       <div
+        aria-modal="true"
         class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
-        role="document"
+        role="dialog"
         style="width: 520px;"
       >
         <div
@@ -296818,12 +296818,12 @@ exports[`Locale Provider should display the text as th 1`] = `
     <div
       aria-labelledby="test-id"
       class="ant-modal-wrap"
-      role="dialog"
       tabindex="-1"
     >
       <div
+        aria-modal="true"
         class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
-        role="document"
+        role="dialog"
         style="width: 520px;"
       >
         <div
@@ -301905,12 +301905,12 @@ exports[`Locale Provider should display the text as tr 1`] = `
     <div
       aria-labelledby="test-id"
       class="ant-modal-wrap"
-      role="dialog"
       tabindex="-1"
     >
       <div
+        aria-modal="true"
         class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
-        role="document"
+        role="dialog"
         style="width: 520px;"
       >
         <div
@@ -306992,12 +306992,12 @@ exports[`Locale Provider should display the text as uk 1`] = `
     <div
       aria-labelledby="test-id"
       class="ant-modal-wrap"
-      role="dialog"
       tabindex="-1"
     >
       <div
+        aria-modal="true"
         class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
-        role="document"
+        role="dialog"
         style="width: 520px;"
       >
         <div
@@ -312079,12 +312079,12 @@ exports[`Locale Provider should display the text as ur 1`] = `
     <div
       aria-labelledby="test-id"
       class="ant-modal-wrap"
-      role="dialog"
       tabindex="-1"
     >
       <div
+        aria-modal="true"
         class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
-        role="document"
+        role="dialog"
         style="width: 520px;"
       >
         <div
@@ -317166,12 +317166,12 @@ exports[`Locale Provider should display the text as vi 1`] = `
     <div
       aria-labelledby="test-id"
       class="ant-modal-wrap"
-      role="dialog"
       tabindex="-1"
     >
       <div
+        aria-modal="true"
         class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
-        role="document"
+        role="dialog"
         style="width: 520px;"
       >
         <div
@@ -322253,12 +322253,12 @@ exports[`Locale Provider should display the text as zh-cn 1`] = `
     <div
       aria-labelledby="test-id"
       class="ant-modal-wrap"
-      role="dialog"
       tabindex="-1"
     >
       <div
+        aria-modal="true"
         class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
-        role="document"
+        role="dialog"
         style="width: 520px;"
       >
         <div
@@ -327340,12 +327340,12 @@ exports[`Locale Provider should display the text as zh-hk 1`] = `
     <div
       aria-labelledby="test-id"
       class="ant-modal-wrap"
-      role="dialog"
       tabindex="-1"
     >
       <div
+        aria-modal="true"
         class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
-        role="document"
+        role="dialog"
         style="width: 520px;"
       >
         <div
@@ -332427,12 +332427,12 @@ exports[`Locale Provider should display the text as zh-tw 1`] = `
     <div
       aria-labelledby="test-id"
       class="ant-modal-wrap"
-      role="dialog"
       tabindex="-1"
     >
       <div
+        aria-modal="true"
         class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
-        role="document"
+        role="dialog"
         style="width: 520px;"
       >
         <div
diff --git a/components/modal/__tests__/__snapshots__/Modal.test.js.snap b/components/modal/__tests__/__snapshots__/Modal.test.js.snap
index ce43823dd2..51245958ea 100644
--- a/components/modal/__tests__/__snapshots__/Modal.test.js.snap
+++ b/components/modal/__tests__/__snapshots__/Modal.test.js.snap
@@ -15,12 +15,12 @@ exports[`Modal render correctly 1`] = `
         />
         <div
           class="ant-modal-wrap"
-          role="dialog"
           tabindex="-1"
         >
           <div
+            aria-modal="true"
             class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
-            role="document"
+            role="dialog"
             style="width: 520px;"
           >
             <div
@@ -114,12 +114,12 @@ exports[`Modal render without footer 1`] = `
         />
         <div
           class="ant-modal-wrap"
-          role="dialog"
           tabindex="-1"
         >
           <div
+            aria-modal="true"
             class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
-            role="document"
+            role="dialog"
             style="width: 520px;"
           >
             <div
@@ -189,12 +189,12 @@ exports[`Modal support closeIcon 1`] = `
   />
   <div
     class="ant-modal-wrap"
-    role="dialog"
     tabindex="-1"
   >
     <div
+      aria-modal="true"
       class="ant-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
-      role="document"
+      role="dialog"
       style="width: 520px;"
     >
       <div
diff --git a/package.json b/package.json
index 46b48a5361..11daf0c501 100644
--- a/package.json
+++ b/package.json
@@ -126,7 +126,7 @@
     "rc-cascader": "~3.5.0",
     "rc-checkbox": "~2.3.0",
     "rc-collapse": "~3.1.0",
-    "rc-dialog": "~8.8.0",
+    "rc-dialog": "~8.8.1",
     "rc-drawer": "~4.4.2",
     "rc-dropdown": "~3.4.0",
     "rc-field-form": "~1.26.1",