test: update snapshots

components/badge/__tests__/__snapshots__/demo.test.js.snap

@@ -7,7 +7,7 @@ exports[`renders ./components/badge/demo/change.md correctly 1`] = `
   <div><span class="ant-badge"><a href="#" class="head-example"></a><sup title="5" class="ant-scroll-number ant-badge-count ant-badge-zoom-enter"><span class="ant-scroll-number-only" style="transform: translateY(-1500%);"><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="current">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p></span></sup></span>
     <div class="ant-btn-group"><button type="button" class="ant-btn ant-btn-default"><i class="anticon anticon-minus"></i></button><button type="button" class="ant-btn ant-btn-default"><i class="anticon anticon-plus"></i></button></div>
   </div>
-  <div style="margin-top: 10px;"><span class="ant-badge"><a href="#" class="head-example"></a><sup class="ant-scroll-number ant-badge-dot ant-badge-zoom-enter"></sup></span> <span tabindex="0" class="ant-switch ant-switch-checked"><span class="ant-switch-inner"></span></span></div>
+  <div style="margin-top: 10px;"><span class="ant-badge"><a href="#" class="head-example"></a><sup class="ant-scroll-number ant-badge-dot ant-badge-zoom-enter"></sup></span> <button type="button" role="switch" aria-checked="true" class="ant-switch ant-switch-checked"><span class="ant-switch-inner"></span></button></div>
 </div>
 `;
 

components/form/__tests__/__snapshots__/demo.test.js.snap

@@ -520,7 +520,7 @@ exports[`renders ./components/form/demo/validate-other.vue correctly 1`] = `
   <div class="ant-row ant-form-item">
     <div class="ant-col-6 ant-form-item-label"><label for="input-number" title="InputNumber" class="">InputNumber</label></div>
     <div class="ant-col-14 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control has-success"><span class="ant-form-item-children"><div class="ant-input-number" data-__meta="[object Object]" data-__field="[object Object]" id="input-number"><div class="ant-input-number-handler-wrap"><span unselectable="unselectable" role="button" aria-label="Increase Value" class="ant-input-number-handler ant-input-number-handler-up "><span unselectable="unselectable" class="ant-input-number-handler-up-inner"></span></span><span unselectable="unselectable" role="button" aria-label="Decrease Value" class="ant-input-number-handler ant-input-number-handler-down "><span unselectable="unselectable" class="ant-input-number-handler-down-inner"></span></span></div>
+      <div class="ant-form-item-control has-success"><span class="ant-form-item-children"><div class="ant-input-number" data-__meta="[object Object]" data-__field="[object Object]" id="input-number"><div class="ant-input-number-handler-wrap"><span class="ant-input-number-handler ant-input-number-handler-up " unselectable="unselectable" role="button" aria-label="Increase Value"><span unselectable="unselectable" class="ant-input-number-handler-up-inner"></span></span><span class="ant-input-number-handler ant-input-number-handler-down " unselectable="unselectable" role="button" aria-label="Decrease Value"><span unselectable="unselectable" class="ant-input-number-handler-down-inner"></span></span></div>
       <div role="spinbutton" aria-valuemin="1" aria-valuemax="10" aria-valuenow="3" class="ant-input-number-input-wrap"><input autocomplete="off" max="10" min="1" step="1" class="ant-input-number-input"></div>
     </div><span class="ant-form-text"> machines</span></span>
     <!---->
@@ -530,7 +530,7 @@ exports[`renders ./components/form/demo/validate-other.vue correctly 1`] = `
   <div class="ant-row ant-form-item">
     <div class="ant-col-6 ant-form-item-label"><label for="switch" title="Switch" class="">Switch</label></div>
     <div class="ant-col-14 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><span tabindex="0" class="ant-switch" data-__meta="[object Object]" data-__field="[object Object]" id="switch"><span class="ant-switch-inner"></span></span></span>
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><button type="button" role="switch" class="ant-switch" data-__meta="[object Object]" data-__field="[object Object]" id="switch"><span class="ant-switch-inner"></span></button></span>
         <!---->
       </div>
     </div>
@@ -708,7 +708,7 @@ exports[`renders ./components/form/demo/validate-static.vue correctly 1`] = `
   <div class="ant-row ant-form-item">
     <div class="ant-col-xs-24 ant-col-sm-5 ant-form-item-label"><label title="Success" class="">Success</label></div>
     <div class="ant-col-xs-24 ant-col-sm-12 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control has-feedback has-success"><span class="ant-form-item-children"><div class="ant-input-number" style="width: 100%;"><div class="ant-input-number-handler-wrap"><span unselectable="unselectable" role="button" aria-label="Increase Value" class="ant-input-number-handler ant-input-number-handler-up "><span unselectable="unselectable" class="ant-input-number-handler-up-inner"></span></span><span unselectable="unselectable" role="button" aria-label="Decrease Value" class="ant-input-number-handler ant-input-number-handler-down "><span unselectable="unselectable" class="ant-input-number-handler-down-inner"></span></span></div>
+      <div class="ant-form-item-control has-feedback has-success"><span class="ant-form-item-children"><div class="ant-input-number" style="width: 100%;"><div class="ant-input-number-handler-wrap"><span class="ant-input-number-handler ant-input-number-handler-up " unselectable="unselectable" role="button" aria-label="Increase Value"><span unselectable="unselectable" class="ant-input-number-handler-up-inner"></span></span><span class="ant-input-number-handler ant-input-number-handler-down " unselectable="unselectable" role="button" aria-label="Decrease Value"><span unselectable="unselectable" class="ant-input-number-handler-down-inner"></span></span></div>
       <div role="spinbutton" aria-valuemin="-9007199254740991" class="ant-input-number-input-wrap"><input autocomplete="off" min="-9007199254740991" step="1" class="ant-input-number-input"></div>
     </div></span>
     <!---->
@@ -723,7 +723,7 @@ exports[`renders ./components/form/demo/without-form-create.vue correctly 1`] =
   <div class="ant-row ant-form-item ant-form-item-with-help">
     <div class="ant-col-7 ant-form-item-label"><label title="Prime between 8 &amp; 12" class="">Prime between 8 &amp; 12</label></div>
     <div class="ant-col-12 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-input-number"><div class="ant-input-number-handler-wrap"><span unselectable="unselectable" role="button" aria-label="Increase Value" class="ant-input-number-handler ant-input-number-handler-up "><span unselectable="unselectable" class="ant-input-number-handler-up-inner"></span></span><span unselectable="unselectable" role="button" aria-label="Decrease Value" class="ant-input-number-handler ant-input-number-handler-down "><span unselectable="unselectable" class="ant-input-number-handler-down-inner"></span></span></div>
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-input-number"><div class="ant-input-number-handler-wrap"><span class="ant-input-number-handler ant-input-number-handler-up " unselectable="unselectable" role="button" aria-label="Increase Value"><span unselectable="unselectable" class="ant-input-number-handler-up-inner"></span></span><span class="ant-input-number-handler ant-input-number-handler-down " unselectable="unselectable" role="button" aria-label="Decrease Value"><span unselectable="unselectable" class="ant-input-number-handler-down-inner"></span></span></div>
       <div role="spinbutton" aria-valuemin="8" aria-valuemax="12" aria-valuenow="11" class="ant-input-number-input-wrap"><input autocomplete="off" max="12" min="8" step="1" class="ant-input-number-input"></div>
     </div></span>
     <div class="ant-form-explain show-help-enter">A prime is a natural number greater than 1 that has no positive divisors other than 1 and itself.</div>

components/input-number/__tests__/__snapshots__/demo.test.js.snap

@@ -3,7 +3,7 @@
 exports[`renders ./components/input-number/demo/basic.md correctly 1`] = `
 <div>
   <div class="ant-input-number">
-    <div class="ant-input-number-handler-wrap"><span unselectable="unselectable" role="button" aria-label="Increase Value" class="ant-input-number-handler ant-input-number-handler-up "><span unselectable="unselectable" class="ant-input-number-handler-up-inner"></span></span><span unselectable="unselectable" role="button" aria-label="Decrease Value" class="ant-input-number-handler ant-input-number-handler-down "><span unselectable="unselectable" class="ant-input-number-handler-down-inner"></span></span></div>
+    <div class="ant-input-number-handler-wrap"><span class="ant-input-number-handler ant-input-number-handler-up " unselectable="unselectable" role="button" aria-label="Increase Value"><span unselectable="unselectable" class="ant-input-number-handler-up-inner"></span></span><span class="ant-input-number-handler ant-input-number-handler-down " unselectable="unselectable" role="button" aria-label="Decrease Value"><span unselectable="unselectable" class="ant-input-number-handler-down-inner"></span></span></div>
     <div role="spinbutton" aria-valuemin="1" aria-valuemax="10" aria-valuenow="3" class="ant-input-number-input-wrap"><input autocomplete="off" max="10" min="1" step="1" class="ant-input-number-input"></div>
   </div>
   当前值：3
@@ -12,7 +12,7 @@ exports[`renders ./components/input-number/demo/basic.md correctly 1`] = `
 
 exports[`renders ./components/input-number/demo/digit.md correctly 1`] = `
 <div class="ant-input-number">
-  <div class="ant-input-number-handler-wrap"><span unselectable="unselectable" role="button" aria-label="Increase Value" class="ant-input-number-handler ant-input-number-handler-up "><span unselectable="unselectable" class="ant-input-number-handler-up-inner"></span></span><span unselectable="unselectable" role="button" aria-label="Decrease Value" class="ant-input-number-handler ant-input-number-handler-down "><span unselectable="unselectable" class="ant-input-number-handler-down-inner"></span></span></div>
+  <div class="ant-input-number-handler-wrap"><span class="ant-input-number-handler ant-input-number-handler-up " unselectable="unselectable" role="button" aria-label="Increase Value"><span unselectable="unselectable" class="ant-input-number-handler-up-inner"></span></span><span class="ant-input-number-handler ant-input-number-handler-down " unselectable="unselectable" role="button" aria-label="Decrease Value"><span unselectable="unselectable" class="ant-input-number-handler-down-inner"></span></span></div>
   <div role="spinbutton" aria-valuemin="0" aria-valuemax="10" class="ant-input-number-input-wrap"><input autocomplete="off" max="10" min="0" step="0.1" class="ant-input-number-input"></div>
 </div>
 `;
@@ -20,7 +20,7 @@ exports[`renders ./components/input-number/demo/digit.md correctly 1`] = `
 exports[`renders ./components/input-number/demo/disabled.md correctly 1`] = `
 <div>
   <div class="ant-input-number ant-input-number-disabled">
-    <div class="ant-input-number-handler-wrap"><span unselectable="unselectable" role="button" aria-label="Increase Value" aria-disabled="true" class="ant-input-number-handler ant-input-number-handler-up "><span unselectable="unselectable" class="ant-input-number-handler-up-inner"></span></span><span unselectable="unselectable" role="button" aria-label="Decrease Value" aria-disabled="true" class="ant-input-number-handler ant-input-number-handler-down "><span unselectable="unselectable" class="ant-input-number-handler-down-inner"></span></span></div>
+    <div class="ant-input-number-handler-wrap"><span class="ant-input-number-handler ant-input-number-handler-up " unselectable="unselectable" role="button" aria-label="Increase Value" aria-disabled="true"><span unselectable="unselectable" class="ant-input-number-handler-up-inner"></span></span><span class="ant-input-number-handler ant-input-number-handler-down " unselectable="unselectable" role="button" aria-label="Decrease Value" aria-disabled="true"><span unselectable="unselectable" class="ant-input-number-handler-down-inner"></span></span></div>
     <div role="spinbutton" aria-valuemin="1" aria-valuemax="10" aria-valuenow="3" class="ant-input-number-input-wrap"><input autocomplete="off" disabled="disabled" max="10" min="1" step="1" class="ant-input-number-input"></div>
   </div>
   <div style="margin-top: 20px;"><button type="button" class="ant-btn ant-btn-primary"><span>Toggle disabled</span></button></div>
@@ -30,11 +30,11 @@ exports[`renders ./components/input-number/demo/disabled.md correctly 1`] = `
 exports[`renders ./components/input-number/demo/formatter.md correctly 1`] = `
 <div>
   <div class="ant-input-number">
-    <div class="ant-input-number-handler-wrap"><span unselectable="unselectable" role="button" aria-label="Increase Value" class="ant-input-number-handler ant-input-number-handler-up "><span unselectable="unselectable" class="ant-input-number-handler-up-inner"></span></span><span unselectable="unselectable" role="button" aria-label="Decrease Value" class="ant-input-number-handler ant-input-number-handler-down "><span unselectable="unselectable" class="ant-input-number-handler-down-inner"></span></span></div>
+    <div class="ant-input-number-handler-wrap"><span class="ant-input-number-handler ant-input-number-handler-up " unselectable="unselectable" role="button" aria-label="Increase Value"><span unselectable="unselectable" class="ant-input-number-handler-up-inner"></span></span><span class="ant-input-number-handler ant-input-number-handler-down " unselectable="unselectable" role="button" aria-label="Decrease Value"><span unselectable="unselectable" class="ant-input-number-handler-down-inner"></span></span></div>
     <div role="spinbutton" aria-valuemin="-9007199254740991" aria-valuenow="1000" class="ant-input-number-input-wrap"><input autocomplete="off" min="-9007199254740991" step="1" class="ant-input-number-input"></div>
   </div>
   <div class="ant-input-number">
-    <div class="ant-input-number-handler-wrap"><span unselectable="unselectable" role="button" aria-label="Increase Value" aria-disabled="true" class="ant-input-number-handler ant-input-number-handler-up ant-input-number-handler-up-disabled"><span unselectable="unselectable" class="ant-input-number-handler-up-inner"></span></span><span unselectable="unselectable" role="button" aria-label="Decrease Value" class="ant-input-number-handler ant-input-number-handler-down "><span unselectable="unselectable" class="ant-input-number-handler-down-inner"></span></span></div>
+    <div class="ant-input-number-handler-wrap"><span class="ant-input-number-handler ant-input-number-handler-up ant-input-number-handler-up-disabled" unselectable="unselectable" role="button" aria-label="Increase Value" aria-disabled="true"><span unselectable="unselectable" class="ant-input-number-handler-up-inner"></span></span><span class="ant-input-number-handler ant-input-number-handler-down " unselectable="unselectable" role="button" aria-label="Decrease Value"><span unselectable="unselectable" class="ant-input-number-handler-down-inner"></span></span></div>
     <div role="spinbutton" aria-valuemin="0" aria-valuemax="100" aria-valuenow="100" class="ant-input-number-input-wrap"><input autocomplete="off" max="100" min="0" step="1" class="ant-input-number-input"></div>
   </div>
 </div>
@@ -43,15 +43,15 @@ exports[`renders ./components/input-number/demo/formatter.md correctly 1`] = `
 exports[`renders ./components/input-number/demo/size.md correctly 1`] = `
 <div>
   <div class="ant-input-number ant-input-number-lg">
-    <div class="ant-input-number-handler-wrap"><span unselectable="unselectable" role="button" aria-label="Increase Value" class="ant-input-number-handler ant-input-number-handler-up "><span unselectable="unselectable" class="ant-input-number-handler-up-inner"></span></span><span unselectable="unselectable" role="button" aria-label="Decrease Value" class="ant-input-number-handler ant-input-number-handler-down "><span unselectable="unselectable" class="ant-input-number-handler-down-inner"></span></span></div>
+    <div class="ant-input-number-handler-wrap"><span class="ant-input-number-handler ant-input-number-handler-up " unselectable="unselectable" role="button" aria-label="Increase Value"><span unselectable="unselectable" class="ant-input-number-handler-up-inner"></span></span><span class="ant-input-number-handler ant-input-number-handler-down " unselectable="unselectable" role="button" aria-label="Decrease Value"><span unselectable="unselectable" class="ant-input-number-handler-down-inner"></span></span></div>
     <div role="spinbutton" aria-valuemin="1" aria-valuemax="100000" aria-valuenow="3" class="ant-input-number-input-wrap"><input autocomplete="off" max="100000" min="1" step="1" class="ant-input-number-input"></div>
   </div>
   <div class="ant-input-number">
-    <div class="ant-input-number-handler-wrap"><span unselectable="unselectable" role="button" aria-label="Increase Value" class="ant-input-number-handler ant-input-number-handler-up "><span unselectable="unselectable" class="ant-input-number-handler-up-inner"></span></span><span unselectable="unselectable" role="button" aria-label="Decrease Value" class="ant-input-number-handler ant-input-number-handler-down "><span unselectable="unselectable" class="ant-input-number-handler-down-inner"></span></span></div>
+    <div class="ant-input-number-handler-wrap"><span class="ant-input-number-handler ant-input-number-handler-up " unselectable="unselectable" role="button" aria-label="Increase Value"><span unselectable="unselectable" class="ant-input-number-handler-up-inner"></span></span><span class="ant-input-number-handler ant-input-number-handler-down " unselectable="unselectable" role="button" aria-label="Decrease Value"><span unselectable="unselectable" class="ant-input-number-handler-down-inner"></span></span></div>
     <div role="spinbutton" aria-valuemin="1" aria-valuemax="100000" aria-valuenow="3" class="ant-input-number-input-wrap"><input autocomplete="off" max="100000" min="1" step="1" class="ant-input-number-input"></div>
   </div>
   <div class="ant-input-number ant-input-number-sm">
-    <div class="ant-input-number-handler-wrap"><span unselectable="unselectable" role="button" aria-label="Increase Value" class="ant-input-number-handler ant-input-number-handler-up "><span unselectable="unselectable" class="ant-input-number-handler-up-inner"></span></span><span unselectable="unselectable" role="button" aria-label="Decrease Value" class="ant-input-number-handler ant-input-number-handler-down "><span unselectable="unselectable" class="ant-input-number-handler-down-inner"></span></span></div>
+    <div class="ant-input-number-handler-wrap"><span class="ant-input-number-handler ant-input-number-handler-up " unselectable="unselectable" role="button" aria-label="Increase Value"><span unselectable="unselectable" class="ant-input-number-handler-up-inner"></span></span><span class="ant-input-number-handler ant-input-number-handler-down " unselectable="unselectable" role="button" aria-label="Decrease Value"><span unselectable="unselectable" class="ant-input-number-handler-down-inner"></span></span></div>
     <div role="spinbutton" aria-valuemin="1" aria-valuemax="100000" aria-valuenow="3" class="ant-input-number-input-wrap"><input autocomplete="off" max="100000" min="1" step="1" class="ant-input-number-input"></div>
   </div>
 </div>

components/layout/__tests__/__snapshots__/demo.test.js.snap

@@ -45,7 +45,7 @@ exports[`renders ./components/layout/demo/custom-trigger.md correctly 1`] = `
   <div class="ant-layout-sider ant-layout-sider-dark" style="max-width: 200px; min-width: 200px; width: 200px;">
     <div class="ant-layout-sider-children">
       <div class="logo"></div>
-      <ul class="ant-menu ant-menu-inline ant-menu-root ant-menu-dark" role="menu">
+      <ul role="menu" class="ant-menu ant-menu-inline ant-menu-root ant-menu-dark">
         <li role="menuitem" class="ant-menu-item ant-menu-item-selected" style="padding-left: 24px;"><i class="anticon anticon-user"></i> <span>nav 1</span></li>
         <li role="menuitem" class="ant-menu-item" style="padding-left: 24px;"><i class="anticon anticon-video-camera"></i> <span>nav 2</span></li>
         <li role="menuitem" class="ant-menu-item" style="padding-left: 24px;"><i class="anticon anticon-upload"></i> <span>nav 3</span></li>
@@ -65,10 +65,22 @@ exports[`renders ./components/layout/demo/fixed.md correctly 1`] = `
 <div class="ant-layout" id="components-layout-demo-fixed">
   <div class="ant-layout-header" style="position: fixed; z-index: 1; width: 100%;">
     <div class="logo"></div>
-    <ul class="ant-menu ant-menu-horizontal ant-menu-root ant-menu-dark" role="menu" style="line-height: 64px;">
+    <ul role="menu" class="ant-menu ant-menu-horizontal ant-menu-root ant-menu-dark" style="line-height: 64px;">
+      <li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display: none;">
+        <div aria-haspopup="true" class="ant-menu-submenu-title"><i class="ant-menu-submenu-arrow"></i></div>
+      </li>
       <li role="menuitem" class="ant-menu-item">nav 1</li>
+      <li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display: none;">
+        <div aria-haspopup="true" class="ant-menu-submenu-title"><i class="ant-menu-submenu-arrow"></i></div>
+      </li>
       <li role="menuitem" class="ant-menu-item ant-menu-item-selected">nav 2</li>
+      <li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display: none;">
+        <div aria-haspopup="true" class="ant-menu-submenu-title"><i class="ant-menu-submenu-arrow"></i></div>
+      </li>
       <li role="menuitem" class="ant-menu-item">nav 3</li>
+      <li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="visibility: hidden; position: absolute; display: none;">
+        <div aria-haspopup="true" class="ant-menu-submenu-title"><i class="ant-menu-submenu-arrow"></i></div>
+      </li>
     </ul>
   </div>
   <div class="ant-layout-content" style="padding: 0px 50px; margin-top: 64px;">
@@ -86,7 +98,7 @@ exports[`renders ./components/layout/demo/fixed-sider.md correctly 1`] = `
   <div class="ant-layout-sider ant-layout-sider-dark" style="max-width: 200px; min-width: 200px; width: 200px; overflow: auto; height: 100vh; position: fixed; left: 0px;">
     <div class="ant-layout-sider-children">
       <div class="logo"></div>
-      <ul class="ant-menu ant-menu-inline ant-menu-root ant-menu-dark" role="menu">
+      <ul role="menu" class="ant-menu ant-menu-inline ant-menu-root ant-menu-dark">
         <li role="menuitem" class="ant-menu-item" style="padding-left: 24px;"><i class="anticon anticon-user"></i> <span class="nav-text">nav 1</span></li>
         <li role="menuitem" class="ant-menu-item" style="padding-left: 24px;"><i class="anticon anticon-video-camera"></i> <span class="nav-text">nav 2</span></li>
         <li role="menuitem" class="ant-menu-item" style="padding-left: 24px;"><i class="anticon anticon-upload"></i> <span class="nav-text">nav 3</span></li>
@@ -129,7 +141,7 @@ exports[`renders ./components/layout/demo/responsive.md correctly 1`] = `
   <div class="ant-layout-sider ant-layout-sider-dark" style="max-width: 200px; min-width: 200px; width: 200px;">
     <div class="ant-layout-sider-children">
       <div class="logo"></div>
-      <ul class="ant-menu ant-menu-inline ant-menu-root ant-menu-dark" role="menu">
+      <ul role="menu" class="ant-menu ant-menu-inline ant-menu-root ant-menu-dark">
         <li role="menuitem" class="ant-menu-item" style="padding-left: 24px;"><i class="anticon anticon-user"></i> <span class="nav-text">nav 1</span></li>
         <li role="menuitem" class="ant-menu-item" style="padding-left: 24px;"><i class="anticon anticon-video-camera"></i> <span class="nav-text">nav 2</span></li>
         <li role="menuitem" class="ant-menu-item" style="padding-left: 24px;"><i class="anticon anticon-upload"></i> <span class="nav-text">nav 3</span></li>
@@ -156,7 +168,7 @@ exports[`renders ./components/layout/demo/side.md correctly 1`] = `
   <div class="ant-layout-sider ant-layout-sider-dark ant-layout-sider-has-trigger" style="max-width: 200px; min-width: 200px; width: 200px;">
     <div class="ant-layout-sider-children">
       <div class="logo"></div>
-      <ul class="ant-menu ant-menu-inline ant-menu-root ant-menu-dark" role="menu">
+      <ul role="menu" class="ant-menu ant-menu-inline ant-menu-root ant-menu-dark">
         <li role="menuitem" class="ant-menu-item ant-menu-item-selected" style="padding-left: 24px;"><i class="anticon anticon-pie-chart"></i> <span>Option 1</span></li>
         <li role="menuitem" class="ant-menu-item" style="padding-left: 24px;"><i class="anticon anticon-desktop"></i> <span>Option 2</span></li>
         <li role="menuitem" class="ant-menu-submenu ant-menu-submenu-inline">
@@ -191,10 +203,22 @@ exports[`renders ./components/layout/demo/top.md correctly 1`] = `
 <div class="layout ant-layout" id="components-layout-demo-top">
   <div class="ant-layout-header">
     <div class="logo"></div>
-    <ul class="ant-menu ant-menu-horizontal ant-menu-root ant-menu-dark" role="menu" style="line-height: 64px;">
+    <ul role="menu" class="ant-menu ant-menu-horizontal ant-menu-root ant-menu-dark" style="line-height: 64px;">
+      <li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display: none;">
+        <div aria-haspopup="true" class="ant-menu-submenu-title"><i class="ant-menu-submenu-arrow"></i></div>
+      </li>
       <li role="menuitem" class="ant-menu-item">nav 1</li>
+      <li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display: none;">
+        <div aria-haspopup="true" class="ant-menu-submenu-title"><i class="ant-menu-submenu-arrow"></i></div>
+      </li>
       <li role="menuitem" class="ant-menu-item ant-menu-item-selected">nav 2</li>
+      <li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display: none;">
+        <div aria-haspopup="true" class="ant-menu-submenu-title"><i class="ant-menu-submenu-arrow"></i></div>
+      </li>
       <li role="menuitem" class="ant-menu-item">nav 3</li>
+      <li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="visibility: hidden; position: absolute; display: none;">
+        <div aria-haspopup="true" class="ant-menu-submenu-title"><i class="ant-menu-submenu-arrow"></i></div>
+      </li>
     </ul>
   </div>
   <div class="ant-layout-content" style="padding: 0px 50px;">
@@ -211,10 +235,22 @@ exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
 <div class="ant-layout" id="components-layout-demo-top-side">
   <div class="header ant-layout-header">
     <div class="logo"></div>
-    <ul class="ant-menu ant-menu-horizontal ant-menu-root ant-menu-dark" role="menu" style="line-height: 64px;">
+    <ul role="menu" class="ant-menu ant-menu-horizontal ant-menu-root ant-menu-dark" style="line-height: 64px;">
+      <li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display: none;">
+        <div aria-haspopup="true" class="ant-menu-submenu-title"><i class="ant-menu-submenu-arrow"></i></div>
+      </li>
       <li role="menuitem" class="ant-menu-item">nav 1</li>
+      <li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display: none;">
+        <div aria-haspopup="true" class="ant-menu-submenu-title"><i class="ant-menu-submenu-arrow"></i></div>
+      </li>
       <li role="menuitem" class="ant-menu-item ant-menu-item-selected">nav 2</li>
+      <li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display: none;">
+        <div aria-haspopup="true" class="ant-menu-submenu-title"><i class="ant-menu-submenu-arrow"></i></div>
+      </li>
       <li role="menuitem" class="ant-menu-item">nav 3</li>
+      <li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="visibility: hidden; position: absolute; display: none;">
+        <div aria-haspopup="true" class="ant-menu-submenu-title"><i class="ant-menu-submenu-arrow"></i></div>
+      </li>
     </ul>
   </div>
   <div class="ant-layout-content" style="padding: 0px 50px;">
@@ -222,10 +258,10 @@ exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
     <div class="ant-layout" style="padding: 24px 0px; background: rgb(255, 255, 255);">
       <div class="ant-layout-sider ant-layout-sider-dark" style="max-width: 200px; min-width: 200px; width: 200px; background: rgb(255, 255, 255);">
         <div class="ant-layout-sider-children">
-          <ul class="ant-menu ant-menu-inline ant-menu-root ant-menu-light" role="menu" style="height: 100%;">
+          <ul role="menu" class="ant-menu ant-menu-inline ant-menu-root ant-menu-light" style="height: 100%;">
             <li role="menuitem" class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected">
               <div aria-expanded="true" aria-owns="sub1$Menu" aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left: 24px;"><span><i class="anticon anticon-user"></i>subnav 1</span><i class="ant-menu-submenu-arrow"></i></div>
-              <ul class="ant-menu ant-menu-inline  ant-menu-sub" role="menu">
+              <ul role="menu" class="ant-menu ant-menu-inline  ant-menu-sub">
                 <li role="menuitem" class="ant-menu-item ant-menu-item-selected" style="padding-left: 48px;">option1</li>
                 <li role="menuitem" class="ant-menu-item" style="padding-left: 48px;">option2</li>
                 <li role="menuitem" class="ant-menu-item" style="padding-left: 48px;">option3</li>
@@ -258,19 +294,31 @@ exports[`renders ./components/layout/demo/top-side-2.md correctly 1`] = `
 <div class="ant-layout" id="components-layout-demo-top-side-2">
   <div class="header ant-layout-header">
     <div class="logo"></div>
-    <ul class="ant-menu ant-menu-horizontal ant-menu-root ant-menu-dark" role="menu" style="line-height: 64px;">
+    <ul role="menu" class="ant-menu ant-menu-horizontal ant-menu-root ant-menu-dark" style="line-height: 64px;">
+      <li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display: none;">
+        <div aria-haspopup="true" class="ant-menu-submenu-title"><i class="ant-menu-submenu-arrow"></i></div>
+      </li>
       <li role="menuitem" class="ant-menu-item">nav 1</li>
+      <li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display: none;">
+        <div aria-haspopup="true" class="ant-menu-submenu-title"><i class="ant-menu-submenu-arrow"></i></div>
+      </li>
       <li role="menuitem" class="ant-menu-item ant-menu-item-selected">nav 2</li>
+      <li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display: none;">
+        <div aria-haspopup="true" class="ant-menu-submenu-title"><i class="ant-menu-submenu-arrow"></i></div>
+      </li>
       <li role="menuitem" class="ant-menu-item">nav 3</li>
+      <li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="visibility: hidden; position: absolute; display: none;">
+        <div aria-haspopup="true" class="ant-menu-submenu-title"><i class="ant-menu-submenu-arrow"></i></div>
+      </li>
     </ul>
   </div>
   <div class="ant-layout">
     <div class="ant-layout-sider ant-layout-sider-dark" style="max-width: 200px; min-width: 200px; width: 200px; background: rgb(255, 255, 255);">
       <div class="ant-layout-sider-children">
-        <ul class="ant-menu ant-menu-inline ant-menu-root ant-menu-light" role="menu" style="height: 100%; border-right: 0;">
+        <ul role="menu" class="ant-menu ant-menu-inline ant-menu-root ant-menu-light" style="height: 100%; border-right: 0;">
           <li role="menuitem" class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected">
             <div aria-expanded="true" aria-owns="sub1$Menu" aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left: 24px;"><span><i class="anticon anticon-user"></i>subnav 1</span><i class="ant-menu-submenu-arrow"></i></div>
-            <ul class="ant-menu ant-menu-inline  ant-menu-sub" role="menu">
+            <ul role="menu" class="ant-menu ant-menu-inline  ant-menu-sub">
               <li role="menuitem" class="ant-menu-item ant-menu-item-selected" style="padding-left: 48px;">option1</li>
               <li role="menuitem" class="ant-menu-item" style="padding-left: 48px;">option2</li>
               <li role="menuitem" class="ant-menu-item" style="padding-left: 48px;">option3</li>

components/menu/__tests__/__snapshots__/demo.test.js.snap

@@ -2,25 +2,40 @@
 
 exports[`renders ./components/menu/demo/horizontal.md correctly 1`] = `
 <div>
-  <ul class="ant-menu ant-menu-horizontal ant-menu-root ant-menu-light" role="menu">
+  <ul role="menu" class="ant-menu ant-menu-horizontal ant-menu-root ant-menu-light">
+    <li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display: none;">
+      <div aria-haspopup="true" class="ant-menu-submenu-title"><i class="ant-menu-submenu-arrow"></i></div>
+    </li>
     <li role="menuitem" class="ant-menu-item ant-menu-item-selected"><i class="anticon anticon-mail"></i>Navigation One
     </li>
+    <li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display: none;">
+      <div aria-haspopup="true" class="ant-menu-submenu-title"><i class="ant-menu-submenu-arrow"></i></div>
+    </li>
     <li role="menuitem" aria-disabled="true" class="ant-menu-item ant-menu-item-disabled"><i class="anticon anticon-appstore"></i>Navigation Two
     </li>
+    <li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display: none;">
+      <div aria-haspopup="true" class="ant-menu-submenu-title"><i class="ant-menu-submenu-arrow"></i></div>
+    </li>
     <li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal">
       <div aria-haspopup="true" class="ant-menu-submenu-title"><span><i class="anticon anticon-setting"></i>Navigation Three - Submenu</span><i class="ant-menu-submenu-arrow"></i></div>
     </li>
+    <li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display: none;">
+      <div aria-haspopup="true" class="ant-menu-submenu-title"><i class="ant-menu-submenu-arrow"></i></div>
+    </li>
     <li role="menuitem" class="ant-menu-item"><a href="https://ant.design" target="_blank" rel="noopener noreferrer">Navigation Four - Link</a></li>
+    <li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="visibility: hidden; position: absolute; display: none;">
+      <div aria-haspopup="true" class="ant-menu-submenu-title"><i class="ant-menu-submenu-arrow"></i></div>
+    </li>
   </ul>
 </div>
 `;
 
 exports[`renders ./components/menu/demo/inline.md correctly 1`] = `
 <div>
-  <ul class="ant-menu ant-menu-inline ant-menu-root ant-menu-light" role="menu" style="width: 256px;">
+  <ul role="menu" class="ant-menu ant-menu-inline ant-menu-root ant-menu-light" style="width: 256px;">
     <li role="menuitem" class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected">
       <div aria-expanded="true" aria-owns="sub1$Menu" aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left: 24px;"><span><i class="anticon anticon-mail"></i><span>Navigation One</span></span><i class="ant-menu-submenu-arrow"></i></div>
-      <ul class="ant-menu ant-menu-inline  ant-menu-sub" role="menu">
+      <ul role="menu" class="ant-menu ant-menu-inline  ant-menu-sub">
         <li class="ant-menu-item-group">
           <div class="ant-menu-item-group-title"><i class="anticon anticon-qq"></i><span>Item 1</span></div>
           <ul class="ant-menu-item-group-list">
@@ -51,13 +66,13 @@ exports[`renders ./components/menu/demo/inline.md correctly 1`] = `
 
 exports[`renders ./components/menu/demo/inline-collapsed.md correctly 1`] = `
 <div style="width: 256px;"><button type="button" class="ant-btn ant-btn-primary" style="margin-bottom: 16px;"><i class="anticon anticon-menu-fold"></i></button>
-  <ul class="ant-menu ant-menu-inline ant-menu-root ant-menu-dark" role="menu">
+  <ul role="menu" class="ant-menu ant-menu-inline ant-menu-root ant-menu-dark">
     <li role="menuitem" class="ant-menu-item ant-menu-item-selected" style="padding-left: 24px;"><i class="anticon anticon-pie-chart"></i> <span>Option 1</span></li>
     <li role="menuitem" class="ant-menu-item" style="padding-left: 24px;"><i class="anticon anticon-desktop"></i> <span>Option 2</span></li>
     <li role="menuitem" class="ant-menu-item" style="padding-left: 24px;"><i class="anticon anticon-inbox"></i> <span>Option 3</span></li>
     <li role="menuitem" class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open">
       <div aria-expanded="true" aria-owns="sub1$Menu" aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left: 24px;"><span><i class="anticon anticon-mail"></i><span>Navigation One</span></span><i class="ant-menu-submenu-arrow"></i></div>
-      <ul class="ant-menu ant-menu-inline  ant-menu-sub" role="menu">
+      <ul role="menu" class="ant-menu ant-menu-inline  ant-menu-sub">
         <li role="menuitem" class="ant-menu-item" style="padding-left: 48px;">Option 5</li>
         <li role="menuitem" class="ant-menu-item" style="padding-left: 48px;">Option 6</li>
         <li role="menuitem" class="ant-menu-item" style="padding-left: 48px;">Option 7</li>
@@ -74,10 +89,10 @@ exports[`renders ./components/menu/demo/inline-collapsed.md correctly 1`] = `
 
 exports[`renders ./components/menu/demo/sider-current.md correctly 1`] = `
 <div>
-  <ul class="ant-menu ant-menu-inline ant-menu-root ant-menu-light" role="menu" style="width: 256px;">
+  <ul role="menu" class="ant-menu ant-menu-inline ant-menu-root ant-menu-light" style="width: 256px;">
     <li role="menuitem" class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open">
       <div aria-expanded="true" aria-owns="sub1$Menu" aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left: 24px;"><span><i class="anticon anticon-mail"></i><span>Navigation One</span></span><i class="ant-menu-submenu-arrow"></i></div>
-      <ul class="ant-menu ant-menu-inline  ant-menu-sub" role="menu">
+      <ul role="menu" class="ant-menu ant-menu-inline  ant-menu-sub">
         <li role="menuitem" class="ant-menu-item" style="padding-left: 48px;">Option 1</li>
         <li role="menuitem" class="ant-menu-item" style="padding-left: 48px;">Option 2</li>
         <li role="menuitem" class="ant-menu-item" style="padding-left: 48px;">Option 3</li>
@@ -100,7 +115,7 @@ exports[`renders ./components/menu/demo/switch-mode.md correctly 1`] = `
 <div><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span></label> Change Mode
   <span classname="ant-divider" style="margin: 0px 1em;"></span> <label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span></label> Change Theme
   <br> <br>
-  <ul class="ant-menu ant-menu-inline ant-menu-root ant-menu-light" role="menu" style="width: 256px;">
+  <ul role="menu" class="ant-menu ant-menu-inline ant-menu-root ant-menu-light" style="width: 256px;">
     <li role="menuitem" class="ant-menu-item ant-menu-item-selected" style="padding-left: 24px;"><i class="anticon anticon-mail"></i>
       Navigation One
     </li>
@@ -109,7 +124,7 @@ exports[`renders ./components/menu/demo/switch-mode.md correctly 1`] = `
     </li>
     <li role="menuitem" class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open">
       <div aria-expanded="true" aria-owns="sub1$Menu" aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left: 24px;"><span><i class="anticon anticon-appstore"></i><span>Navigation Three</span></span><i class="ant-menu-submenu-arrow"></i></div>
-      <ul class="ant-menu ant-menu-inline  ant-menu-sub" role="menu">
+      <ul role="menu" class="ant-menu ant-menu-inline  ant-menu-sub">
         <li role="menuitem" class="ant-menu-item" style="padding-left: 48px;">Option 3</li>
         <li role="menuitem" class="ant-menu-item" style="padding-left: 48px;">Option 4</li>
         <li role="menuitem" class="ant-menu-submenu ant-menu-submenu-inline">
@@ -128,7 +143,7 @@ exports[`renders ./components/menu/demo/switch-mode.md correctly 1`] = `
 
 exports[`renders ./components/menu/demo/template.md correctly 1`] = `
 <div style="width: 256px;"><button type="button" class="ant-btn ant-btn-primary" style="margin-bottom: 16px;"><i class="anticon anticon-menu-fold"></i></button>
-  <ul class="ant-menu ant-menu-inline ant-menu-root ant-menu-dark" role="menu">
+  <ul role="menu" class="ant-menu ant-menu-inline ant-menu-root ant-menu-dark">
     <li role="menuitem" class="ant-menu-item ant-menu-item-selected" style="padding-left: 24px;"><i class="anticon anticon-pie-chart"></i> <span>Option 1</span></li>
     <li role="menuitem" class="ant-menu-submenu ant-menu-submenu-inline" menuinfo="[object Object]">
       <div aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left: 24px;"><span><i class="anticon anticon-mail"></i><span>Navigation 2</span></span><i class="ant-menu-submenu-arrow"></i></div>
@@ -141,7 +156,7 @@ exports[`renders ./components/menu/demo/template.md correctly 1`] = `
 exports[`renders ./components/menu/demo/theme.md correctly 1`] = `
 <div><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span></label> Change Theme
   <br> <br>
-  <ul class="ant-menu ant-menu-inline ant-menu-root ant-menu-dark" role="menu" style="width: 256px;">
+  <ul role="menu" class="ant-menu ant-menu-inline ant-menu-root ant-menu-dark" style="width: 256px;">
     <li role="menuitem" class="ant-menu-item ant-menu-item-selected" style="padding-left: 24px;"><i class="anticon anticon-mail"></i>
       Navigation One
     </li>
@@ -150,7 +165,7 @@ exports[`renders ./components/menu/demo/theme.md correctly 1`] = `
     </li>
     <li role="menuitem" class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open">
       <div aria-expanded="true" aria-owns="sub1$Menu" aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left: 24px;"><span><i class="anticon anticon-appstore"></i><span>Navigation Three</span></span><i class="ant-menu-submenu-arrow"></i></div>
-      <ul class="ant-menu ant-menu-inline  ant-menu-sub" role="menu">
+      <ul role="menu" class="ant-menu ant-menu-inline  ant-menu-sub">
         <li role="menuitem" class="ant-menu-item" style="padding-left: 48px;">Option 3</li>
         <li role="menuitem" class="ant-menu-item" style="padding-left: 48px;">Option 4</li>
         <li role="menuitem" class="ant-menu-submenu ant-menu-submenu-inline">
@@ -169,7 +184,7 @@ exports[`renders ./components/menu/demo/theme.md correctly 1`] = `
 
 exports[`renders ./components/menu/demo/vertical.md correctly 1`] = `
 <div>
-  <ul class="ant-menu ant-menu-vertical ant-menu-root ant-menu-light" role="menu" style="width: 256px;">
+  <ul role="menu" class="ant-menu ant-menu-vertical ant-menu-root ant-menu-light" style="width: 256px;">
     <li role="menuitem" class="ant-menu-item"><i class="anticon anticon-mail"></i>
       Navigation One
     </li>

components/menu/__tests__/index.test.js

@@ -13,9 +13,9 @@ describe('Menu', () => {
     // jest.useFakeTimers()
   })
 
-  // afterEach(() => {
-  //   jest.useRealTimers()
-  // })
+  afterEach(() => {
+    // jest.useRealTimers()
+  })
   it('If has select nested submenu item ,the menu items on the grandfather level should be highlight', async () => {
     const wrapper = mount({
       render () {
@@ -123,12 +123,12 @@ describe('Menu', () => {
     wrapper.setProps({ openKeys: [] })
     await asyncExpect(() => {
       expect($$('.ant-menu-sub')[0].parentElement.style.display).toBe('none')
-    })
+    }, 0)
 
     wrapper.setProps({ openKeys: ['1'] })
     await asyncExpect(() => {
       expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none')
-    })
+    }, 0)
   })
 
   it('inline', async () => {
@@ -159,11 +159,11 @@ describe('Menu', () => {
     wrapper.setProps({ openKeys: [] })
     await asyncExpect(() => {
       expect($$('.ant-menu-sub')[0].style.display).toBe('none')
-    })
+    }, 0)
     wrapper.setProps({ openKeys: ['1'] })
     await asyncExpect(() => {
       expect($$('.ant-menu-sub')[0].style.display).not.toBe('none')
-    })
+    }, 0)
   })
 
   it('vertical', async () => {
@@ -194,11 +194,11 @@ describe('Menu', () => {
     wrapper.setProps({ openKeys: [] })
     await asyncExpect(() => {
       expect($$('.ant-menu-sub')[0].parentElement.style.display).toBe('none')
-    })
+    }, 0)
     wrapper.setProps({ openKeys: ['1'] })
     await asyncExpect(() => {
       expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none')
-    })
+    }, 0)
   })
 
   // https://github.com/ant-design/ant-design/pulls/4677
@@ -375,15 +375,15 @@ describe('Menu', () => {
       await asyncExpect(() => {
         expect($$('.ant-menu-sub').length).toBe(0)
         toggleMenu(wrapper, 0, 'click')
-      })
+      }, 0)
       await asyncExpect(() => {
         expect($$('.ant-menu-sub').length).toBe(1)
         expect($$('.ant-menu-sub')[0].style.display).not.toBe('none')
         toggleMenu(wrapper, 0, 'click')
-      })
+      }, 500)
       await asyncExpect(() => {
         expect($$('.ant-menu-sub')[0].style.display).toBe('none')
-      })
+      }, 500)
     })
 
     it('vertical', async () => {
@@ -403,7 +403,7 @@ describe('Menu', () => {
       await asyncExpect(() => {
         expect($$('.ant-menu-sub').length).toBe(0)
         toggleMenu(wrapper, 0, 'mouseenter')
-      })
+      }, 0)
       await asyncExpect(() => {
         expect($$('.ant-menu-sub').length).toBe(1)
         expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none')
@@ -430,12 +430,12 @@ describe('Menu', () => {
       }, { attachToDocument: true, sync: false })
       await asyncExpect(() => {
         expect($$('.ant-menu-sub').length).toBe(0)
-        toggleMenu(wrapper, 0, 'mouseenter')
-      })
+        toggleMenu(wrapper, 1, 'mouseenter')
+      }, 0)
       await asyncExpect(() => {
         expect($$('.ant-menu-sub').length).toBe(1)
         expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none')
-        toggleMenu(wrapper, 0, 'mouseleave')
+        toggleMenu(wrapper, 1, 'mouseleave')
       }, 500)
       await asyncExpect(() => {
         expect($$('.ant-menu-sub')[0].parentElement.style.display).toBe('none')

components/popconfirm/__tests__/__snapshots__/index.test.js.snap

@@ -3,7 +3,7 @@
 exports[`Popconfirm should show overlay when trigger is clicked 1`] = `
 <div class="ant-popover-content">
   <div class="ant-popover-arrow"></div>
-  <div class="ant-popover-inner">
+  <div role="tooltip" class="ant-popover-inner">
     <div class="ant-popover-inner-content">
       <div class="ant-popover-message"><i class="anticon anticon-exclamation-circle"></i>
         <div class="ant-popover-message-title">code</div>

components/popover/__tests__/__snapshots__/index.test.js.snap

@@ -3,7 +3,7 @@
 exports[`Popover should show overlay when trigger is clicked 1`] = `
 <div class="ant-popover-content">
   <div class="ant-popover-arrow"></div>
-  <div class="ant-popover-inner">
+  <div role="tooltip" class="ant-popover-inner">
     <div>
       <div class="ant-popover-title">code</div>
       <div class="ant-popover-inner-content">console.log('hello world')</div>
@@ -15,7 +15,7 @@ exports[`Popover should show overlay when trigger is clicked 1`] = `
 exports[`Popover should show overlay when trigger is clicked 2`] = `
 <div class="ant-popover-content">
   <div class="ant-popover-arrow"></div>
-  <div class="ant-popover-inner">
+  <div role="tooltip" class="ant-popover-inner">
     <div>
       <div class="ant-popover-title">code</div>
       <div class="ant-popover-inner-content">console.log('hello world')</div>

components/slider/__tests__/__snapshots__/demo.test.js.snap

@@ -17,7 +17,7 @@ exports[`renders ./components/slider/demo/basic.md correctly 1`] = `
     <div role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50" class="ant-slider-handle ant-slider-handle-2" style="left: 50%;"></div>
     <div class="ant-slider-mark"></div>
   </div>
-  Disabled: <span tabindex="0" class="ant-switch ant-switch-small"><span class="ant-switch-inner"></span></span>
+  Disabled: <button type="button" role="switch" class="ant-switch ant-switch-small"><span class="ant-switch-inner"></span></button>
 </div>
 `;
 
@@ -74,7 +74,7 @@ exports[`renders ./components/slider/demo/input-number.md correctly 1`] = `
     </div>
     <div class="ant-col-4">
       <div class="ant-input-number" style="margin-left: 16px;">
-        <div class="ant-input-number-handler-wrap"><span unselectable="unselectable" role="button" aria-label="Increase Value" class="ant-input-number-handler ant-input-number-handler-up "><span unselectable="unselectable" class="ant-input-number-handler-up-inner"></span></span><span unselectable="unselectable" role="button" aria-label="Decrease Value" aria-disabled="true" class="ant-input-number-handler ant-input-number-handler-down ant-input-number-handler-down-disabled"><span unselectable="unselectable" class="ant-input-number-handler-down-inner"></span></span></div>
+        <div class="ant-input-number-handler-wrap"><span class="ant-input-number-handler ant-input-number-handler-up " unselectable="unselectable" role="button" aria-label="Increase Value"><span unselectable="unselectable" class="ant-input-number-handler-up-inner"></span></span><span class="ant-input-number-handler ant-input-number-handler-down ant-input-number-handler-down-disabled" unselectable="unselectable" role="button" aria-label="Decrease Value" aria-disabled="true"><span unselectable="unselectable" class="ant-input-number-handler-down-inner"></span></span></div>
         <div role="spinbutton" aria-valuemin="1" aria-valuemax="20" aria-valuenow="1" class="ant-input-number-input-wrap"><input autocomplete="off" max="20" min="1" step="1" class="ant-input-number-input"></div>
       </div>
     </div>
@@ -91,7 +91,7 @@ exports[`renders ./components/slider/demo/input-number.md correctly 1`] = `
     </div>
     <div class="ant-col-4">
       <div class="ant-input-number" style="margin-left: 16px;">
-        <div class="ant-input-number-handler-wrap"><span unselectable="unselectable" role="button" aria-label="Increase Value" class="ant-input-number-handler ant-input-number-handler-up "><span unselectable="unselectable" class="ant-input-number-handler-up-inner"></span></span><span unselectable="unselectable" role="button" aria-label="Decrease Value" aria-disabled="true" class="ant-input-number-handler ant-input-number-handler-down ant-input-number-handler-down-disabled"><span unselectable="unselectable" class="ant-input-number-handler-down-inner"></span></span></div>
+        <div class="ant-input-number-handler-wrap"><span class="ant-input-number-handler ant-input-number-handler-up " unselectable="unselectable" role="button" aria-label="Increase Value"><span unselectable="unselectable" class="ant-input-number-handler-up-inner"></span></span><span class="ant-input-number-handler ant-input-number-handler-down ant-input-number-handler-down-disabled" unselectable="unselectable" role="button" aria-label="Decrease Value" aria-disabled="true"><span unselectable="unselectable" class="ant-input-number-handler-down-inner"></span></span></div>
         <div role="spinbutton" aria-valuemin="0" aria-valuemax="1" aria-valuenow="0" class="ant-input-number-input-wrap"><input autocomplete="off" max="1" min="0" step="0.01" class="ant-input-number-input"></div>
       </div>
     </div>

components/slider/__tests__/__snapshots__/index.test.js.snap

@@ -5,7 +5,7 @@ exports[`Slider should show tooltip when hovering slider handler 1`] = `
   <div class="ant-tooltip  ant-tooltip-placement-top" style="left: -999px; top: -1003px;">
     <div class="ant-tooltip-content">
       <div class="ant-tooltip-arrow"></div>
-      <div class="ant-tooltip-inner">30</div>
+      <div role="tooltip" class="ant-tooltip-inner">30</div>
     </div>
   </div>
 </div>
@@ -16,7 +16,7 @@ exports[`Slider should show tooltip when hovering slider handler 2`] = `
   <div class="ant-tooltip  ant-tooltip-placement-top" style="display: none;">
     <div class="ant-tooltip-content">
       <div class="ant-tooltip-arrow"></div>
-      <div class="ant-tooltip-inner">30</div>
+      <div role="tooltip" class="ant-tooltip-inner">30</div>
     </div>
   </div>
 </div>

components/spin/__tests__/__snapshots__/demo.test.js.snap

@@ -22,7 +22,7 @@ exports[`renders ./components/spin/demo/delayAndDebounce.md correctly 1`] = `
       </div>
     </div>
   </div>
-  Loading state：<span tabindex="0" class="ant-switch"><span class="ant-switch-inner"></span></span>
+  Loading state：<button type="button" role="switch" class="ant-switch"><span class="ant-switch-inner"></span></button>
 </div>
 `;
 
@@ -41,7 +41,7 @@ exports[`renders ./components/spin/demo/nested.md correctly 1`] = `
       </div>
     </div>
   </div>
-  Loading state：<span tabindex="0" class="ant-switch"><span class="ant-switch-inner"></span></span>
+  Loading state：<button type="button" role="switch" class="ant-switch"><span class="ant-switch-inner"></span></button>
 </div>
 `;
 

components/switch/__tests__/__snapshots__/demo.test.js.snap

@@ -1,11 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/switch/demo/basic.md correctly 1`] = `<div><span tabindex="0" class="ant-switch ant-switch-checked"><span class="ant-switch-inner"></span></span></div>`;
+exports[`renders ./components/switch/demo/basic.md correctly 1`] = `<div><button type="button" role="switch" aria-checked="true" class="ant-switch ant-switch-checked"><span class="ant-switch-inner"></span></button></div>`;
 
-exports[`renders ./components/switch/demo/disabled.md correctly 1`] = `<div><span tabindex="-1" class="ant-switch ant-switch-checked ant-switch-disabled" style="margin-bottom: 5px;"><span class="ant-switch-inner"></span></span> <br> <button type="button" class="ant-btn ant-btn-primary"><span>Toggle disabled</span></button></div>`;
+exports[`renders ./components/switch/demo/disabled.md correctly 1`] = `<div><button type="button" role="switch" aria-checked="true" disabled="disabled" class="ant-switch ant-switch-checked ant-switch-disabled" style="margin-bottom: 5px;"><span class="ant-switch-inner"></span></button> <br> <button type="button" class="ant-btn ant-btn-primary"><span>Toggle disabled</span></button></div>`;
 
-exports[`renders ./components/switch/demo/loading.md correctly 1`] = `<div><span tabindex="0" class="ant-switch ant-switch-checked ant-switch-loading"><span class="ant-switch-inner"></span></span> <br> <span tabindex="0" class="ant-switch ant-switch-small ant-switch-loading"><span class="ant-switch-inner"></span></span></div>`;
+exports[`renders ./components/switch/demo/loading.md correctly 1`] = `<div><button type="button" role="switch" aria-checked="true" class="ant-switch ant-switch-checked ant-switch-loading"><span class="ant-switch-inner"></span></button> <br> <button type="button" role="switch" class="ant-switch ant-switch-small ant-switch-loading"><span class="ant-switch-inner"></span></button></div>`;
 
-exports[`renders ./components/switch/demo/size.md correctly 1`] = `<div><span tabindex="0" class="ant-switch ant-switch-checked"><span class="ant-switch-inner"></span></span> <br> <span tabindex="0" class="ant-switch ant-switch-checked ant-switch-small"><span class="ant-switch-inner"></span></span></div>`;
+exports[`renders ./components/switch/demo/size.md correctly 1`] = `<div><button type="button" role="switch" aria-checked="true" class="ant-switch ant-switch-checked"><span class="ant-switch-inner"></span></button> <br> <button type="button" role="switch" aria-checked="true" class="ant-switch ant-switch-checked ant-switch-small"><span class="ant-switch-inner"></span></button></div>`;
 
-exports[`renders ./components/switch/demo/text.md correctly 1`] = `<div><span tabindex="0" class="ant-switch ant-switch-checked"><span class="ant-switch-inner">开</span></span> <br> <span tabindex="0" class="ant-switch"><span class="ant-switch-inner">0</span></span> <br> <span tabindex="0" class="ant-switch ant-switch-checked"><span class="ant-switch-inner"><i class="anticon anticon-check"></i></span></span></div>`;
+exports[`renders ./components/switch/demo/text.md correctly 1`] = `<div><button type="button" role="switch" aria-checked="true" class="ant-switch ant-switch-checked"><span class="ant-switch-inner">开</span></button> <br> <button type="button" role="switch" class="ant-switch"><span class="ant-switch-inner">0</span></button> <br> <button type="button" role="switch" aria-checked="true" class="ant-switch ant-switch-checked"><span class="ant-switch-inner"><i class="anticon anticon-check"></i></span></button></div>`;

components/table/__tests__/__snapshots__/Table.filter.test.js.snap

@@ -43,7 +43,7 @@ exports[`Table.filter renders menu correctly 1`] = `
 <div>
   <div class="ant-dropdown  ant-dropdown-placement-bottomLeft" style="display: none;">
     <div class="ant-table-filter-dropdown ant-dropdown-content">
-      <ul class="ant-dropdown-menu ant-dropdown-menu-vertical ant-dropdown-menu-root" role="menu" tabindex="0">
+      <ul role="menu" tabindex="0" class="ant-dropdown-menu ant-dropdown-menu-vertical ant-dropdown-menu-root">
         <li role="menuitem" class="ant-dropdown-menu-item"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span></label><span>Boy</span></li>
         <li role="menuitem" class="ant-dropdown-menu-item"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span></label><span>Girl</span></li>
         <li role="menuitem" class="ant-dropdown-menu-submenu ant-dropdown-menu-submenu-vertical">
@@ -60,7 +60,7 @@ exports[`Table.filter renders radio filter correctly 1`] = `
 <div>
   <div class="ant-dropdown  ant-dropdown-placement-bottomLeft" style="display: none;">
     <div class="ant-table-filter-dropdown ant-dropdown-content">
-      <ul class="ant-dropdown-menu ant-dropdown-menu-vertical ant-dropdown-menu-root" role="menu" tabindex="0">
+      <ul role="menu" tabindex="0" class="ant-dropdown-menu ant-dropdown-menu-vertical ant-dropdown-menu-root">
         <li role="menuitem" class="ant-dropdown-menu-item"><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value=""><span class="ant-radio-inner"></span></span></label><span>Boy</span></li>
         <li role="menuitem" class="ant-dropdown-menu-item"><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value=""><span class="ant-radio-inner"></span></span></label><span>Girl</span></li>
         <li role="menuitem" class="ant-dropdown-menu-submenu ant-dropdown-menu-submenu-vertical">

components/table/__tests__/__snapshots__/Table.rowSelection.test.js.snap

@@ -76,7 +76,7 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
 exports[`Table.rowSelection render with default selection correctly 1`] = `
 <div>
   <div class="ant-dropdown  ant-dropdown-placement-bottomLeft" style="display: none;">
-    <ul class="ant-dropdown-menu ant-dropdown-menu-vertical ant-dropdown-menu-root ant-dropdown-menu-light ant-table-selection-menu ant-dropdown-content" role="menu" tabindex="0">
+    <ul role="menu" tabindex="0" class="ant-dropdown-menu ant-dropdown-menu-vertical ant-dropdown-menu-root ant-dropdown-menu-light ant-table-selection-menu ant-dropdown-content">
       <li role="menuitem" class="ant-dropdown-menu-item">
         <div>Select current page</div>
       </li>