mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-27 20:49:53 +08:00
Code Issues Actions 39 Packages Projects Releases Wiki Activity

fix: Modal a11y warning issue (#50823)

Browse Source 
close #50170
This commit is contained in:
afc163 2024-09-12 10:17:33 +08:00 committed by GitHub
parent 380cae80bc
commit 884baa1fad
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 105 additions and 723 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
components/config-provider/__tests__/__snapshots__/components.test.tsx.snap
View File

@ -18324,14 +18324,9 @@ exports[`ConfigProvider components Modal configProvider 1`] = `
role="dialog"
style="width: 520px;"
>
<div
aria-hidden="true"
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
tabindex="0"
/>
<div
style="outline: none;"
tabindex="-1"
tabindex="0"
>
<div
class="config-modal-content"
@ -18394,7 +18389,6 @@ exports[`ConfigProvider components Modal configProvider 1`] = `
</div>
</div>
<div
aria-hidden="true"
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
tabindex="0"
/>
@ -18422,14 +18416,9 @@ exports[`ConfigProvider components Modal configProvider componentDisabled 1`] =
role="dialog"
style="width: 520px;"
>
<div
aria-hidden="true"
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
tabindex="0"
/>
<div
style="outline: none;"
tabindex="-1"
tabindex="0"
>
<div
class="config-modal-content"
@ -18492,7 +18481,6 @@ exports[`ConfigProvider components Modal configProvider componentDisabled 1`] =
</div>
</div>
<div
aria-hidden="true"
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
tabindex="0"
/>
@ -18520,14 +18508,9 @@ exports[`ConfigProvider components Modal configProvider componentSize large 1`]
role="dialog"
style="width: 520px;"
>
<div
aria-hidden="true"
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
tabindex="0"
/>
<div
style="outline: none;"
tabindex="-1"
tabindex="0"
>
<div
class="config-modal-content"
@ -18590,7 +18573,6 @@ exports[`ConfigProvider components Modal configProvider componentSize large 1`]
</div>
</div>
<div
aria-hidden="true"
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
tabindex="0"
/>
@ -18618,14 +18600,9 @@ exports[`ConfigProvider components Modal configProvider componentSize middle 1`]
role="dialog"
style="width: 520px;"
>
<div
aria-hidden="true"
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
tabindex="0"
/>
<div
style="outline: none;"
tabindex="-1"
tabindex="0"
>
<div
class="config-modal-content"
@ -18688,7 +18665,6 @@ exports[`ConfigProvider components Modal configProvider componentSize middle 1`]
</div>
</div>
<div
aria-hidden="true"
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
tabindex="0"
/>
@ -18716,14 +18692,9 @@ exports[`ConfigProvider components Modal configProvider componentSize small 1`]
role="dialog"
style="width: 520px;"
>
<div
aria-hidden="true"
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
tabindex="0"
/>
<div
style="outline: none;"
tabindex="-1"
tabindex="0"
>
<div
class="config-modal-content"
@ -18786,7 +18757,6 @@ exports[`ConfigProvider components Modal configProvider componentSize small 1`]
</div>
</div>
<div
aria-hidden="true"
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
tabindex="0"
/>
@ -18814,14 +18784,9 @@ exports[`ConfigProvider components Modal normal 1`] = `
role="dialog"
style="width: 520px;"
>
<div
aria-hidden="true"
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
tabindex="0"
/>
<div
style="outline: none;"
tabindex="-1"
tabindex="0"
>
<div
class="ant-modal-content"
@ -18884,7 +18849,6 @@ exports[`ConfigProvider components Modal normal 1`] = `
</div>
</div>
<div
aria-hidden="true"
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
tabindex="0"
/>
@ -18912,14 +18876,9 @@ exports[`ConfigProvider components Modal prefixCls 1`] = `
role="dialog"
style="width: 520px;"
>
<div
aria-hidden="true"
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
tabindex="0"
/>
<div
style="outline: none;"
tabindex="-1"
tabindex="0"
>
<div
class="prefix-Modal-content"
@ -18982,7 +18941,6 @@ exports[`ConfigProvider components Modal prefixCls 1`] = `
</div>
</div>
<div
aria-hidden="true"
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
tabindex="0"
/>

8
components/image/__tests__/__snapshots__/index.test.tsx.snap
View File

@ -248,14 +248,9 @@ exports[`Image Default Group preview props 1`] = `
class="ant-image-preview ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="dialog"
>
<div
aria-hidden="true"
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
tabindex="0"
/>
<div
style="outline: none;"
tabindex="-1"
tabindex="0"
>
<div
class="ant-image-preview-content"
@ -276,7 +271,6 @@ exports[`Image Default Group preview props 1`] = `
</div>
</div>
<div
aria-hidden="true"
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
tabindex="0"
/>

560
components/locale/__tests__/__snapshots__/index.test.tsx.snap
View File

File diff suppressed because it is too large Load Diff

24
components/modal/__tests__/__snapshots__/Modal.test.tsx.snap
View File

@ -65,14 +65,9 @@ exports[`Modal render correctly 1`] = `
role="dialog"
style="width: 520px;"
>
<div
aria-hidden="true"
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
tabindex="0"
/>
<div
style="outline: none;"
tabindex="-1"
tabindex="0"
>
<div
class="ant-modal-content"
@ -135,7 +130,6 @@ exports[`Modal render correctly 1`] = `
</div>
</div>
<div
aria-hidden="true"
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
tabindex="0"
/>
@ -165,14 +159,9 @@ exports[`Modal render without footer 1`] = `
role="dialog"
style="width: 520px;"
>
<div
aria-hidden="true"
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
tabindex="0"
/>
<div
style="outline: none;"
tabindex="-1"
tabindex="0"
>
<div
class="ant-modal-content"
@ -215,7 +204,6 @@ exports[`Modal render without footer 1`] = `
</div>
</div>
<div
aria-hidden="true"
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
tabindex="0"
/>
@ -245,14 +233,9 @@ exports[`Modal support closeIcon 1`] = `
role="dialog"
style="width: 520px;"
>
<div
aria-hidden="true"
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
tabindex="0"
/>
<div
style="outline: none;"
tabindex="-1"
tabindex="0"
>
<div
class="ant-modal-content"
@ -296,7 +279,6 @@ exports[`Modal support closeIcon 1`] = `
</div>
</div>
<div
aria-hidden="true"
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
tabindex="0"
/>

88
components/modal/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -82,14 +82,9 @@ exports[`renders components/modal/demo/component-token.tsx extend context correc
role="dialog"
style="width: 100%;"
>
<div
aria-hidden="true"
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
tabindex="0"
/>
<div
style="outline: none;"
tabindex="-1"
tabindex="0"
>
<div
class="ant-modal-content"
@ -161,7 +156,6 @@ exports[`renders components/modal/demo/component-token.tsx extend context correc
</div>
</div>
<div
aria-hidden="true"
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
tabindex="0"
/>
@ -172,14 +166,9 @@ exports[`renders components/modal/demo/component-token.tsx extend context correc
role="dialog"
style="width: 100%;"
>
<div
aria-hidden="true"
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
tabindex="0"
/>
<div
style="outline: none;"
tabindex="-1"
tabindex="0"
>
<div
class="ant-modal-content"
@ -251,7 +240,6 @@ exports[`renders components/modal/demo/component-token.tsx extend context correc
</div>
</div>
<div
aria-hidden="true"
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
tabindex="0"
/>
@ -262,14 +250,9 @@ exports[`renders components/modal/demo/component-token.tsx extend context correc
role="dialog"
style="width: 200px;"
>
<div
aria-hidden="true"
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
tabindex="0"
/>
<div
style="outline: none;"
tabindex="-1"
tabindex="0"
>
<div
class="ant-modal-content"
@ -329,7 +312,6 @@ exports[`renders components/modal/demo/component-token.tsx extend context correc
</div>
</div>
<div
aria-hidden="true"
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
tabindex="0"
/>
@ -340,14 +322,9 @@ exports[`renders components/modal/demo/component-token.tsx extend context correc
role="dialog"
style="width: 300px;"
>
<div
aria-hidden="true"
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
tabindex="0"
/>
<div
style="outline: none;"
tabindex="-1"
tabindex="0"
>
<div
class="ant-modal-content"
@ -420,7 +397,6 @@ exports[`renders components/modal/demo/component-token.tsx extend context correc
</div>
</div>
<div
aria-hidden="true"
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
tabindex="0"
/>
@ -796,14 +772,9 @@ exports[`renders components/modal/demo/render-panel.tsx extend context correctly
role="dialog"
style="width: 100%; height: 200px;"
>
<div
aria-hidden="true"
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
tabindex="0"
/>
<div
style="outline: none;"
tabindex="-1"
tabindex="0"
>
<div
class="ant-modal-content"
@ -875,7 +846,6 @@ exports[`renders components/modal/demo/render-panel.tsx extend context correctly
</div>
</div>
<div
aria-hidden="true"
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
tabindex="0"
/>
@ -886,14 +856,9 @@ exports[`renders components/modal/demo/render-panel.tsx extend context correctly
role="dialog"
style="width: 200px; height: 150px;"
>
<div
aria-hidden="true"
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
tabindex="0"
/>
<div
style="outline: none;"
tabindex="-1"
tabindex="0"
>
<div
class="ant-modal-content"
@ -953,7 +918,6 @@ exports[`renders components/modal/demo/render-panel.tsx extend context correctly
</div>
</div>
<div
aria-hidden="true"
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
tabindex="0"
/>
@ -964,14 +928,9 @@ exports[`renders components/modal/demo/render-panel.tsx extend context correctly
role="dialog"
style="width: 300px; height: 200px;"
>
<div
aria-hidden="true"
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
tabindex="0"
/>
<div
style="outline: none;"
tabindex="-1"
tabindex="0"
>
<div
class="ant-modal-content"
@ -1044,7 +1003,6 @@ exports[`renders components/modal/demo/render-panel.tsx extend context correctly
</div>
</div>
<div
aria-hidden="true"
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
tabindex="0"
/>
@ -1055,14 +1013,9 @@ exports[`renders components/modal/demo/render-panel.tsx extend context correctly
role="dialog"
style="width: 380px; height: 200px;"
>
<div
aria-hidden="true"
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
tabindex="0"
/>
<div
style="outline: none;"
tabindex="-1"
tabindex="0"
>
<div
class="ant-modal-content"
@ -1207,7 +1160,6 @@ exports[`renders components/modal/demo/render-panel.tsx extend context correctly
</div>
</div>
<div
aria-hidden="true"
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
tabindex="0"
/>
@ -1298,14 +1250,9 @@ exports[`renders components/modal/demo/wireframe.tsx extend context correctly 1`
role="dialog"
style="width: 100%;"
>
<div
aria-hidden="true"
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
tabindex="0"
/>
<div
style="outline: none;"
tabindex="-1"
tabindex="0"
>
<div
class="ant-modal-content"
@ -1377,7 +1324,6 @@ exports[`renders components/modal/demo/wireframe.tsx extend context correctly 1`
</div>
</div>
<div
aria-hidden="true"
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
tabindex="0"
/>
@ -1388,14 +1334,9 @@ exports[`renders components/modal/demo/wireframe.tsx extend context correctly 1`
role="dialog"
style="width: 200px;"
>
<div
aria-hidden="true"
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
tabindex="0"
/>
<div
style="outline: none;"
tabindex="-1"
tabindex="0"
>
<div
class="ant-modal-content"
@ -1455,7 +1396,6 @@ exports[`renders components/modal/demo/wireframe.tsx extend context correctly 1`
</div>
</div>
<div
aria-hidden="true"
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
tabindex="0"
/>
@ -1466,14 +1406,9 @@ exports[`renders components/modal/demo/wireframe.tsx extend context correctly 1`
role="dialog"
style="width: 300px;"
>
<div
aria-hidden="true"
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
tabindex="0"
/>
<div
style="outline: none;"
tabindex="-1"
tabindex="0"
>
<div
class="ant-modal-content"
@ -1546,7 +1481,6 @@ exports[`renders components/modal/demo/wireframe.tsx extend context correctly 1`
</div>
</div>
<div
aria-hidden="true"
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
tabindex="0"
/>

88
components/modal/__tests__/__snapshots__/demo.test.tsx.snap
View File

@ -74,14 +74,9 @@ exports[`renders components/modal/demo/component-token.tsx correctly 1`] = `
role="dialog"
style="width:100%"
>
<div
aria-hidden="true"
style="width:0;height:0;overflow:hidden;outline:none"
tabindex="0"
/>
<div
style="outline:none"
tabindex="-1"
tabindex="0"
>
<div
class="ant-modal-content"
@ -153,7 +148,6 @@ exports[`renders components/modal/demo/component-token.tsx correctly 1`] = `
</div>
</div>
<div
aria-hidden="true"
style="width:0;height:0;overflow:hidden;outline:none"
tabindex="0"
/>
@ -164,14 +158,9 @@ exports[`renders components/modal/demo/component-token.tsx correctly 1`] = `
role="dialog"
style="width:100%"
>
<div
aria-hidden="true"
style="width:0;height:0;overflow:hidden;outline:none"
tabindex="0"
/>
<div
style="outline:none"
tabindex="-1"
tabindex="0"
>
<div
class="ant-modal-content"
@ -243,7 +232,6 @@ exports[`renders components/modal/demo/component-token.tsx correctly 1`] = `
</div>
</div>
<div
aria-hidden="true"
style="width:0;height:0;overflow:hidden;outline:none"
tabindex="0"
/>
@ -254,14 +242,9 @@ exports[`renders components/modal/demo/component-token.tsx correctly 1`] = `
role="dialog"
style="width:200px"
>
<div
aria-hidden="true"
style="width:0;height:0;overflow:hidden;outline:none"
tabindex="0"
/>
<div
style="outline:none"
tabindex="-1"
tabindex="0"
>
<div
class="ant-modal-content"
@ -321,7 +304,6 @@ exports[`renders components/modal/demo/component-token.tsx correctly 1`] = `
</div>
</div>
<div
aria-hidden="true"
style="width:0;height:0;overflow:hidden;outline:none"
tabindex="0"
/>
@ -332,14 +314,9 @@ exports[`renders components/modal/demo/component-token.tsx correctly 1`] = `
role="dialog"
style="width:300px"
>
<div
aria-hidden="true"
style="width:0;height:0;overflow:hidden;outline:none"
tabindex="0"
/>
<div
style="outline:none"
tabindex="-1"
tabindex="0"
>
<div
class="ant-modal-content"
@ -412,7 +389,6 @@ exports[`renders components/modal/demo/component-token.tsx correctly 1`] = `
</div>
</div>
<div
aria-hidden="true"
style="width:0;height:0;overflow:hidden;outline:none"
tabindex="0"
/>
@ -760,14 +736,9 @@ exports[`renders components/modal/demo/render-panel.tsx correctly 1`] = `
role="dialog"
style="width:100%;height:200px"
>
<div
aria-hidden="true"
style="width:0;height:0;overflow:hidden;outline:none"
tabindex="0"
/>
<div
style="outline:none"
tabindex="-1"
tabindex="0"
>
<div
class="ant-modal-content"
@ -839,7 +810,6 @@ exports[`renders components/modal/demo/render-panel.tsx correctly 1`] = `
</div>
</div>
<div
aria-hidden="true"
style="width:0;height:0;overflow:hidden;outline:none"
tabindex="0"
/>
@ -850,14 +820,9 @@ exports[`renders components/modal/demo/render-panel.tsx correctly 1`] = `
role="dialog"
style="width:200px;height:150px"
>
<div
aria-hidden="true"
style="width:0;height:0;overflow:hidden;outline:none"
tabindex="0"
/>
<div
style="outline:none"
tabindex="-1"
tabindex="0"
>
<div
class="ant-modal-content"
@ -917,7 +882,6 @@ exports[`renders components/modal/demo/render-panel.tsx correctly 1`] = `
</div>
</div>
<div
aria-hidden="true"
style="width:0;height:0;overflow:hidden;outline:none"
tabindex="0"
/>
@ -928,14 +892,9 @@ exports[`renders components/modal/demo/render-panel.tsx correctly 1`] = `
role="dialog"
style="width:300px;height:200px"
>
<div
aria-hidden="true"
style="width:0;height:0;overflow:hidden;outline:none"
tabindex="0"
/>
<div
style="outline:none"
tabindex="-1"
tabindex="0"
>
<div
class="ant-modal-content"
@ -1008,7 +967,6 @@ exports[`renders components/modal/demo/render-panel.tsx correctly 1`] = `
</div>
</div>
<div
aria-hidden="true"
style="width:0;height:0;overflow:hidden;outline:none"
tabindex="0"
/>
@ -1019,14 +977,9 @@ exports[`renders components/modal/demo/render-panel.tsx correctly 1`] = `
role="dialog"
style="width:380px;height:200px"
>
<div
aria-hidden="true"
style="width:0;height:0;overflow:hidden;outline:none"
tabindex="0"
/>
<div
style="outline:none"
tabindex="-1"
tabindex="0"
>
<div
class="ant-modal-content"
@ -1171,7 +1124,6 @@ exports[`renders components/modal/demo/render-panel.tsx correctly 1`] = `
</div>
</div>
<div
aria-hidden="true"
style="width:0;height:0;overflow:hidden;outline:none"
tabindex="0"
/>
@ -1256,14 +1208,9 @@ exports[`renders components/modal/demo/wireframe.tsx correctly 1`] = `
role="dialog"
style="width:100%"
>
<div
aria-hidden="true"
style="width:0;height:0;overflow:hidden;outline:none"
tabindex="0"
/>
<div
style="outline:none"
tabindex="-1"
tabindex="0"
>
<div
class="ant-modal-content"
@ -1335,7 +1282,6 @@ exports[`renders components/modal/demo/wireframe.tsx correctly 1`] = `
</div>
</div>
<div
aria-hidden="true"
style="width:0;height:0;overflow:hidden;outline:none"
tabindex="0"
/>
@ -1346,14 +1292,9 @@ exports[`renders components/modal/demo/wireframe.tsx correctly 1`] = `
role="dialog"
style="width:200px"
>
<div
aria-hidden="true"
style="width:0;height:0;overflow:hidden;outline:none"
tabindex="0"
/>
<div
style="outline:none"
tabindex="-1"
tabindex="0"
>
<div
class="ant-modal-content"
@ -1413,7 +1354,6 @@ exports[`renders components/modal/demo/wireframe.tsx correctly 1`] = `
</div>
</div>
<div
aria-hidden="true"
style="width:0;height:0;overflow:hidden;outline:none"
tabindex="0"
/>
@ -1424,14 +1364,9 @@ exports[`renders components/modal/demo/wireframe.tsx correctly 1`] = `
role="dialog"
style="width:300px"
>
<div
aria-hidden="true"
style="width:0;height:0;overflow:hidden;outline:none"
tabindex="0"
/>
<div
style="outline:none"
tabindex="-1"
tabindex="0"
>
<div
class="ant-modal-content"
@ -1504,7 +1439,6 @@ exports[`renders components/modal/demo/wireframe.tsx correctly 1`] = `
</div>
</div>
<div
aria-hidden="true"
style="width:0;height:0;overflow:hidden;outline:none"
tabindex="0"
/>

4
package.json
View File

@ -116,11 +116,11 @@
"rc-cascader": "~3.28.1",
"rc-checkbox": "~3.3.0",
"rc-collapse": "~3.8.0",
"rc-dialog": "~9.5.2",
"rc-dialog": "~9.6.0",
"rc-drawer": "~7.2.0",
"rc-dropdown": "~4.2.0",
"rc-field-form": "~2.4.0",
"rc-image": "~7.10.0",
"rc-image": "~7.11.0",
"rc-input": "~1.6.3",
"rc-input-number": "~9.2.0",
"rc-mentions": "~2.16.0",