feat(Search): improve accessibility (#4522)

youzan · Sep 20, 2019 · 890936f · 890936f
1 parent a1ac34b
commit 890936f
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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('');