feat(ActionSheet): improve accessibility (#4525)

src/action-sheet/demo/index.vue

@@ -7,7 +7,7 @@
 
     <demo-block :title="$t('status')">
       <van-button type="primary" @click="show2 = true">{{ $t('buttonText') }}</van-button>
-      <van-action-sheet v-model="show2" :actions="statusActions" @select="onSelect" />
+      <van-action-sheet v-model="show2" close-on-click-action :actions="statusActions" />
     </demo-block>
 
     <demo-block :title="$t('title2')">
@@ -15,9 +15,9 @@
       <van-action-sheet
         v-model="show3"
         :actions="simpleActions"
+        close-on-click-action
         :cancel-text="$t('cancel')"
         @cancel="onCancel"
-        @select="onSelect"
       />
     </demo-block>
 
@@ -83,7 +83,6 @@ export default {
   methods: {
     onSelect(item) {
       this.show1 = false;
-      this.show2 = false;
       this.$toast(item.name);
     },
 

src/action-sheet/index.less

@@ -6,10 +6,13 @@
 
   &__item,
   &__cancel {
+    display: block;
+    width: 100%;
     font-size: @action-sheet-item-font-size;
     line-height: @action-sheet-item-height;
     text-align: center;
     background-color: @action-sheet-item-background;
+    border: none;
 
     &:active {
       background-color: @active-color;

src/action-sheet/index.tsx

@@ -96,22 +96,22 @@ function ActionSheet(
     }
 
     return (
-      <div
+      <button
         class={[bem('item', { disabled }), item.className, BORDER_TOP]}
         style={{ color: item.color }}
         onClick={onClickOption}
       >
         {OptionContent()}
-      </div>
+      </button>
     );
   }
 
   function CancelText() {
     if (cancelText) {
       return (
-        <div class={bem('cancel')} onClick={onCancel}>
+        <button class={bem('cancel')} onClick={onCancel}>
           {cancelText}
-        </div>
+        </button>
       );
     }
   }

src/action-sheet/test/__snapshots__/index.spec.js.snap

@@ -1,35 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`callback events 1`] = `
-<div class="van-popup van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom">
+<div class="van-popup van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom"><button class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></button><button class="van-action-sheet__item van-action-sheet__item--disabled van-hairline--top"><span class="van-action-sheet__name">Option</span></button><button class="van-action-sheet__item van-action-sheet__item--disabled van-hairline--top">
-  <div class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></div>
-  <div class="van-action-sheet__item van-action-sheet__item--disabled van-hairline--top"><span class="van-action-sheet__name">Option</span></div>
-  <div class="van-action-sheet__item van-action-sheet__item--disabled van-hairline--top">
     <div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular" style="color: rgb(201, 201, 201); width: 20px; height: 20px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
-  </div>
+  </button><button class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span><span class="van-action-sheet__subname">Subname</span></button><button class="van-action-sheet__cancel">Cancel</button></div>
-  <div class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span><span class="van-action-sheet__subname">Subname</span></div>
-  <div class="van-action-sheet__cancel">Cancel</div>
-</div>
 `;
 
-exports[`color option 1`] = `
+exports[`color option 1`] = `<div class="van-popup van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom"><button class="van-action-sheet__item van-hairline--top" style="color: red;"><span class="van-action-sheet__name">Option</span></button></div>`;
-<div class="van-popup van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom">
-  <div class="van-action-sheet__item van-hairline--top" style="color: red;"><span class="van-action-sheet__name">Option</span></div>
-</div>
-`;
 
-exports[`disable lazy-render 1`] = `
+exports[`disable lazy-render 1`] = `<div class="van-popup van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" style="display: none;" name="van-popup-slide-bottom"><button class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></button><button class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></button><button class="van-action-sheet__cancel">Cancel</button></div>`;
-<div class="van-popup van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" style="display: none;" name="van-popup-slide-bottom">
-  <div class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></div>
-  <div class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></div>
-  <div class="van-action-sheet__cancel">Cancel</div>
-</div>
-`;
 
 exports[`render title and default slot 1`] = ``;
 
-exports[`round prop 1`] = `
+exports[`round prop 1`] = `<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom"><button class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></button></div>`;
-<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom">
-  <div class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></div>
-</div>
-`;