From 890936f61d958e8fff526e04f1787f1a6628e9ba Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Sat, 21 Sep 2019 07:34:46 +0800
Subject: [PATCH] feat(Search): improve accessibility (#4522)

---
 src/search/index.tsx                             | 12 ++++++------
 src/search/test/__snapshots__/demo.spec.js.snap  |  6 ++----
 src/search/test/__snapshots__/index.spec.js.snap |  4 +---
 src/search/test/index.spec.js                    |  2 +-
 4 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/src/search/index.tsx b/src/search/index.tsx
index eda6a05de..decc48b4d 100644
--- a/src/search/index.tsx
+++ b/src/search/index.tsx
@@ -53,17 +53,17 @@ function Search(
     }
 
     function onCancel() {
+      if (slots.action) {
+        return;
+      }
+
       emit(ctx, 'input', '');
       emit(ctx, 'cancel');
     }
 
     return (
-      <div class={bem('action')}>
-        {slots.action ? (
-          slots.action()
-        ) : (
-          <div onClick={onCancel}>{props.actionText || t('cancel')}</div>
-        )}
+      <div class={bem('action')} role="button" tabindex="0" onClick={onCancel}>
+        {slots.action ? slots.action() : props.actionText || t('cancel')}
       </div>
     );
   }
diff --git a/src/search/test/__snapshots__/demo.spec.js.snap b/src/search/test/__snapshots__/demo.spec.js.snap
index 38da8d0b1..34977e7c3 100644
--- a/src/search/test/__snapshots__/demo.spec.js.snap
+++ b/src/search/test/__snapshots__/demo.spec.js.snap
@@ -27,9 +27,7 @@ exports[`renders demo correctly 1`] = `
             </div>
           </div>
         </div>
-        <div class="van-search__action">
-          <div>取消</div>
-        </div>
+        <div role="button" tabindex="0" class="van-search__action">取消</div>
       </div>
     </form>
   </div>
@@ -45,7 +43,7 @@ exports[`renders demo correctly 1`] = `
           </div>
         </div>
       </div>
-      <div class="van-search__action">
+      <div role="button" tabindex="0" class="van-search__action">
         <div>搜索</div>
       </div>
     </div>
diff --git a/src/search/test/__snapshots__/index.spec.js.snap b/src/search/test/__snapshots__/index.spec.js.snap
index 7d722b2c2..6ce6f0752 100644
--- a/src/search/test/__snapshots__/index.spec.js.snap
+++ b/src/search/test/__snapshots__/index.spec.js.snap
@@ -11,9 +11,7 @@ exports[`action-text prop 1`] = `
       </div>
     </div>
   </div>
-  <div class="van-search__action">
-    <div>Custom Text</div>
-  </div>
+  <div role="button" tabindex="0" class="van-search__action">Custom Text</div>
 </div>
 `;
 
diff --git a/src/search/test/index.spec.js b/src/search/test/index.spec.js
index 3693a8427..884cabe4c 100644
--- a/src/search/test/index.spec.js
+++ b/src/search/test/index.spec.js
@@ -35,7 +35,7 @@ test('cancel event', () => {
     }
   });
 
-  const cancel = wrapper.find('.van-search__action div');
+  const cancel = wrapper.find('.van-search__action');
   cancel.trigger('click');
 
   expect(onInput).toHaveBeenCalledWith('');