From ce3a347723bcf09adfbfed908f4c390555ff01a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@youzan.com>
Date: Mon, 3 Jun 2019 16:23:00 +0800
Subject: [PATCH] [improvement] Tab: optimize aria-hidden attr

---
 .../test/__snapshots__/index.spec.js.snap     |  4 +-
 .../test/__snapshots__/demo.spec.js.snap      |  2 +-
 .../list/test/__snapshots__/demo.spec.js.snap |  2 +-
 packages/tab/index.js                         | 21 ++++-----
 .../tab/test/__snapshots__/demo.spec.js.snap  | 44 +++++++++----------
 .../tab/test/__snapshots__/index.spec.js.snap | 44 +++++++++----------
 6 files changed, 56 insertions(+), 61 deletions(-)

diff --git a/packages/coupon-list/test/__snapshots__/index.spec.js.snap b/packages/coupon-list/test/__snapshots__/index.spec.js.snap
index 3e51b5b49..76960c3e8 100644
--- a/packages/coupon-list/test/__snapshots__/index.spec.js.snap
+++ b/packages/coupon-list/test/__snapshots__/index.spec.js.snap
@@ -117,7 +117,7 @@ exports[`render coupon list 1`] = `
           </div>
         </div>
       </div>
-      <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
+      <div role="tabpanel" class="van-tab__pane" style="display: none;">
         <!---->
       </div>
     </div>
@@ -159,7 +159,7 @@ exports[`render empty coupon list 1`] = `
       </div>
     </div>
     <div class="van-tabs__content">
-      <div role="tabpanel" class="van-tab__pane" aria-hidden="true" style="display: none;">
+      <div role="tabpanel" class="van-tab__pane" style="display: none;">
         <div class="van-coupon-list__list" style="height: 628px;">
           <div class="van-coupon-list__empty"><img src="https://img.yzcdn.cn/vant/coupon-empty.png">
             <p>暂无优惠券</p>
diff --git a/packages/index-bar/test/__snapshots__/demo.spec.js.snap b/packages/index-bar/test/__snapshots__/demo.spec.js.snap
index 7254b82c2..05f027a1b 100644
--- a/packages/index-bar/test/__snapshots__/demo.spec.js.snap
+++ b/packages/index-bar/test/__snapshots__/demo.spec.js.snap
@@ -380,7 +380,7 @@ exports[`renders demo correctly 1`] = `
           </div>
         </div>
       </div>
-      <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
+      <div role="tabpanel" class="van-tab__pane" style="display: none;">
         <!---->
       </div>
     </div>
diff --git a/packages/list/test/__snapshots__/demo.spec.js.snap b/packages/list/test/__snapshots__/demo.spec.js.snap
index 95e6022a7..109fb9d1e 100644
--- a/packages/list/test/__snapshots__/demo.spec.js.snap
+++ b/packages/list/test/__snapshots__/demo.spec.js.snap
@@ -19,7 +19,7 @@ exports[`renders demo correctly 1`] = `
           </div>
         </div>
       </div>
-      <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
+      <div role="tabpanel" class="van-tab__pane" style="display: none;">
         <!---->
       </div>
     </div>
diff --git a/packages/tab/index.js b/packages/tab/index.js
index 3898e9a55..9d4a9db20 100644
--- a/packages/tab/index.js
+++ b/packages/tab/index.js
@@ -41,20 +41,20 @@ export default sfc({
   },
 
   render(h) {
-    const { slots } = this;
+    const { slots, selected } = this;
     const shouldRender = this.inited || !this.parent.lazyRender;
+    const Content = [shouldRender ? slots() : h()];
 
-    const Content = [
-      shouldRender ? slots() : h(),
-      slots('title') && <div ref="title">{slots('title')}</div>
-    ];
+    if (slots('title')) {
+      Content.push(<div ref="title">{slots('title')}</div>);
+    }
 
     if (this.parent.animated) {
       return (
         <div
           role="tabpanel"
-          aria-hidden={!this.selected}
-          class={bem('pane-wrapper', { inactive: !this.selected })}
+          aria-hidden={!selected}
+          class={bem('pane-wrapper', { inactive: !selected })}
         >
           <div class={bem('pane')}>{Content}</div>
         </div>
@@ -62,12 +62,7 @@ export default sfc({
     }
 
     return (
-      <div
-        vShow={this.selected}
-        role="tabpanel"
-        class={bem('pane')}
-        aria-hidden={!this.selected}
-      >
+      <div vShow={selected} role="tabpanel" class={bem('pane')}>
         {Content}
       </div>
     );
diff --git a/packages/tab/test/__snapshots__/demo.spec.js.snap b/packages/tab/test/__snapshots__/demo.spec.js.snap
index 2d32c3e59..597991c82 100644
--- a/packages/tab/test/__snapshots__/demo.spec.js.snap
+++ b/packages/tab/test/__snapshots__/demo.spec.js.snap
@@ -14,16 +14,16 @@ exports[`renders demo correctly 1`] = `
         </div>
       </div>
       <div class="van-tabs__content">
-        <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
+        <div role="tabpanel" class="van-tab__pane" style="display: none;">
           <!---->
         </div>
-        <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
+        <div role="tabpanel" class="van-tab__pane" style="display: none;">
           <!---->
         </div>
         <div role="tabpanel" class="van-tab__pane" style="">
           内容 3
         </div>
-        <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
+        <div role="tabpanel" class="van-tab__pane" style="display: none;">
           <!---->
         </div>
       </div>
@@ -48,25 +48,25 @@ exports[`renders demo correctly 1`] = `
         <div role="tabpanel" class="van-tab__pane" style="">
           内容 1
         </div>
-        <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
+        <div role="tabpanel" class="van-tab__pane" style="display: none;">
           <!---->
         </div>
-        <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
+        <div role="tabpanel" class="van-tab__pane" style="display: none;">
           <!---->
         </div>
-        <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
+        <div role="tabpanel" class="van-tab__pane" style="display: none;">
           <!---->
         </div>
-        <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
+        <div role="tabpanel" class="van-tab__pane" style="display: none;">
           <!---->
         </div>
-        <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
+        <div role="tabpanel" class="van-tab__pane" style="display: none;">
           <!---->
         </div>
-        <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
+        <div role="tabpanel" class="van-tab__pane" style="display: none;">
           <!---->
         </div>
-        <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
+        <div role="tabpanel" class="van-tab__pane" style="display: none;">
           <!---->
         </div>
       </div>
@@ -86,10 +86,10 @@ exports[`renders demo correctly 1`] = `
         <div role="tabpanel" class="van-tab__pane" style="">
           内容 1
         </div>
-        <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
+        <div role="tabpanel" class="van-tab__pane" style="display: none;">
           <!---->
         </div>
-        <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
+        <div role="tabpanel" class="van-tab__pane" style="display: none;">
           <!---->
         </div>
       </div>
@@ -108,10 +108,10 @@ exports[`renders demo correctly 1`] = `
         <div role="tabpanel" class="van-tab__pane" style="">
           内容 1
         </div>
-        <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
+        <div role="tabpanel" class="van-tab__pane" style="display: none;">
           <!---->
         </div>
-        <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
+        <div role="tabpanel" class="van-tab__pane" style="display: none;">
           <!---->
         </div>
       </div>
@@ -130,7 +130,7 @@ exports[`renders demo correctly 1`] = `
         <div role="tabpanel" class="van-tab__pane" style="">
           内容 1
         </div>
-        <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
+        <div role="tabpanel" class="van-tab__pane" style="display: none;">
           <!---->
         </div>
       </div>
@@ -148,16 +148,16 @@ exports[`renders demo correctly 1`] = `
         </div>
       </div>
       <div class="van-tabs__content">
-        <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
+        <div role="tabpanel" class="van-tab__pane" style="display: none;">
           <!---->
         </div>
-        <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
+        <div role="tabpanel" class="van-tab__pane" style="display: none;">
           <!---->
         </div>
         <div role="tabpanel" class="van-tab__pane" style="">
           内容 3
         </div>
-        <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
+        <div role="tabpanel" class="van-tab__pane" style="display: none;">
           <!---->
         </div>
       </div>
@@ -188,7 +188,7 @@ exports[`renders demo correctly 1`] = `
         <div role="tabpanel" class="van-tab__pane" style="">
           内容 1
         </div>
-        <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
+        <div role="tabpanel" class="van-tab__pane" style="display: none;">
           <!---->
         </div>
       </div>
@@ -243,16 +243,16 @@ exports[`renders demo correctly 1`] = `
         </div>
       </div>
       <div class="van-tabs__content">
-        <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
+        <div role="tabpanel" class="van-tab__pane" style="display: none;">
           <!---->
         </div>
-        <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
+        <div role="tabpanel" class="van-tab__pane" style="display: none;">
           <!---->
         </div>
         <div role="tabpanel" class="van-tab__pane" style="">
           内容 3
         </div>
-        <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
+        <div role="tabpanel" class="van-tab__pane" style="display: none;">
           <!---->
         </div>
       </div>
diff --git a/packages/tab/test/__snapshots__/index.spec.js.snap b/packages/tab/test/__snapshots__/index.spec.js.snap
index 2c006334c..9ef46c083 100644
--- a/packages/tab/test/__snapshots__/index.spec.js.snap
+++ b/packages/tab/test/__snapshots__/index.spec.js.snap
@@ -25,10 +25,10 @@ exports[`change tabs data 1`] = `
   </div>
   <div class="van-tabs__content">
     <div role="tabpanel" class="van-tab__pane">Text</div>
-    <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
+    <div role="tabpanel" class="van-tab__pane" style="display: none;">
       <!---->
     </div>
-    <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
+    <div role="tabpanel" class="van-tab__pane" style="display: none;">
       <!---->
     </div>
   </div>
@@ -48,10 +48,10 @@ exports[`change tabs data 2`] = `
   </div>
   <div class="van-tabs__content">
     <div role="tabpanel" class="van-tab__pane">Text</div>
-    <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
+    <div role="tabpanel" class="van-tab__pane" style="display: none;">
       <!---->
     </div>
-    <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
+    <div role="tabpanel" class="van-tab__pane" style="display: none;">
       <!---->
     </div>
   </div>
@@ -72,10 +72,10 @@ exports[`click to switch tab 1`] = `
   </div>
   <div class="van-tabs__content">
     <div role="tabpanel" class="van-tab__pane" style="">Text</div>
-    <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
+    <div role="tabpanel" class="van-tab__pane" style="display: none;">
       <!---->
     </div>
-    <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
+    <div role="tabpanel" class="van-tab__pane" style="display: none;">
       <!---->
     </div>
   </div>
@@ -95,11 +95,11 @@ exports[`click to switch tab 2`] = `
     </div>
   </div>
   <div class="van-tabs__content">
-    <div role="tabpanel" class="van-tab__pane" style="display: none;" aria-hidden="true">Text</div>
+    <div role="tabpanel" class="van-tab__pane" style="display: none;">Text</div>
     <div role="tabpanel" class="van-tab__pane" style="">
       Text
     </div>
-    <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
+    <div role="tabpanel" class="van-tab__pane" style="display: none;">
       <!---->
     </div>
   </div>
@@ -118,11 +118,11 @@ exports[`lazy render 1`] = `
   </div>
   <div class="van-tabs__content">
     <div role="tabpanel" class="van-tab__pane">Text</div>
-    <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
+    <div role="tabpanel" class="van-tab__pane" style="display: none;">
       <!---->
       <div><span>title2</span></div>
     </div>
-    <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
+    <div role="tabpanel" class="van-tab__pane" style="display: none;">
       <!---->
     </div>
   </div>
@@ -143,10 +143,10 @@ exports[`lazy render 2`] = `
   </div>
   <div class="van-tabs__content">
     <div role="tabpanel" class="van-tab__pane">Text</div>
-    <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
+    <div role="tabpanel" class="van-tab__pane" style="display: none;">
       Text
     </div>
-    <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">Text</div>
+    <div role="tabpanel" class="van-tab__pane" style="display: none;">Text</div>
   </div>
 </div>
 `;
@@ -162,11 +162,11 @@ exports[`render nav-left & nav-right slot 1`] = `
   </div>
   <div class="van-tabs__content">
     <div role="tabpanel" class="van-tab__pane">Text</div>
-    <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
+    <div role="tabpanel" class="van-tab__pane" style="display: none;">
       <!---->
       <div><span>title2</span></div>
     </div>
-    <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
+    <div role="tabpanel" class="van-tab__pane" style="display: none;">
       <!---->
     </div>
   </div>
@@ -187,10 +187,10 @@ exports[`swipe to switch tab 1`] = `
   </div>
   <div class="van-tabs__content">
     <div role="tabpanel" class="van-tab__pane">Text</div>
-    <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
+    <div role="tabpanel" class="van-tab__pane" style="display: none;">
       <!---->
     </div>
-    <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
+    <div role="tabpanel" class="van-tab__pane" style="display: none;">
       <!---->
     </div>
   </div>
@@ -210,11 +210,11 @@ exports[`swipe to switch tab 2`] = `
     </div>
   </div>
   <div class="van-tabs__content">
-    <div role="tabpanel" class="van-tab__pane" aria-hidden="true" style="display: none;">Text</div>
+    <div role="tabpanel" class="van-tab__pane" style="display: none;">Text</div>
     <div role="tabpanel" class="van-tab__pane" style="">
       Text
     </div>
-    <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
+    <div role="tabpanel" class="van-tab__pane" style="display: none;">
       <!---->
     </div>
   </div>
@@ -234,11 +234,11 @@ exports[`swipe to switch tab 3`] = `
     </div>
   </div>
   <div class="van-tabs__content">
-    <div role="tabpanel" class="van-tab__pane" aria-hidden="true" style="display: none;">Text</div>
+    <div role="tabpanel" class="van-tab__pane" style="display: none;">Text</div>
     <div role="tabpanel" class="van-tab__pane" style="">
       Text
     </div>
-    <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
+    <div role="tabpanel" class="van-tab__pane" style="display: none;">
       <!---->
     </div>
   </div>
@@ -259,10 +259,10 @@ exports[`swipe to switch tab 4`] = `
   </div>
   <div class="van-tabs__content">
     <div role="tabpanel" class="van-tab__pane" style="">Text</div>
-    <div role="tabpanel" class="van-tab__pane" style="display: none;" aria-hidden="true">
+    <div role="tabpanel" class="van-tab__pane" style="display: none;">
       Text
     </div>
-    <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
+    <div role="tabpanel" class="van-tab__pane" style="display: none;">
       <!---->
     </div>
   </div>