feat(picker): 支持点击选择, 无障碍适配. (#1051)

Author: byq1213

src/picker-item/picker-item.ts

@@ -91,6 +91,36 @@ export default class PickerItem extends SuperComponent {
         });
       });
     },
+    onTap(e) {
+      const { index } = e.currentTarget.dataset;
+      const {
+        itemHeight,
+        data: { options, classPrefix },
+      } = this;
+      wx.createSelectorQuery()
+        .in(this)
+        .select(`#${classPrefix}__group`)
+        .node()
+        .exec((res) => {
+          const scrollView = res[0].node;
+          scrollView.scrollTo({
+            top: 0,
+          });
+        });
+      this.setData({
+        duration: DefaultDuration,
+        offset: -index * itemHeight,
+      });
+      wx.nextTick(() => {
+        this._selectedIndex = index;
+        this._selectedValue = options[index]?.value;
+        this._selectedLabel = options[index]?.label;
+        this.parent?.triggerColumnChange({
+          index,
+          column: this.columnIndex || 0,
+        });
+      });
+    },
 
     // 刷新选中状态
     update() {

src/picker-item/picker-item.wxml

@@ -1,7 +1,9 @@
 <wxs src="../common/utils.wxs" module="_" />
 <view
+  id="{{classPrefix}}__group"
   style="{{ style }}"
   class="{{_.cls(classPrefix + '__group', [])}} class {{prefix}}-class"
+  enhanced="true"
   bind:touchstart="onTouchStart"
   catch:touchmove="onTouchMove"
   bind:touchend="onTouchEnd"
@@ -17,8 +19,9 @@
       wx:key="index"
       wx:for-item="option"
       data-index="{{ index }}"
+      bind:tap="onTap"
     >
       {{option.label}}
     </view>
   </view>
-</view>
+</scroll-view>

src/picker/picker.wxml

@@ -1,13 +1,29 @@
 <wxs src="../common/utils.wxs" module="_" />
 
 <t-popup visible="{{visible}}" placement="bottom" bind:visible-change="onPopupChange">
-  <view slot="content" style="{{ style }}" class="{{classPrefix}} {{prefix}}-class">
+  <view
+    slot="content"
+    style="{{ style }}"
+    class="{{classPrefix}} {{prefix}}-class"
+    tabindex="-1"
+    focus="{{true}}"
+  >
     <view class="{{classPrefix}}__toolbar" wx:if="{{header}}">
-      <view class="{{classPrefix}}__cancel {{prefix}}-class-cancel" wx:if="{{cancelBtn}}" bindtap="onCancel"
+      <view
+        class="{{classPrefix}}__cancel {{prefix}}-class-cancel"
+        wx:if="{{cancelBtn}}"
+        bindtap="onCancel"
+        aria-role="button"
         >{{cancelBtn}}</view
       >
-      <view class="{{classPrefix}}__title {{prefix}}-class-title">{{title}}</view>
-      <view class="{{classPrefix}}__confirm {{prefix}}-class-confirm" wx:if="{{confirmBtn}}" bindtap="onConfirm"
+      <view class="{{classPrefix}}__title {{prefix}}-class-title" focus="{{true}}" aria-label="{{title}}选择框"
+        >{{title}}</view
+      >
+      <view
+        class="{{classPrefix}}__confirm {{prefix}}-class-confirm"
+        wx:if="{{confirmBtn}}"
+        bindtap="onConfirm"
+        aria-role="button"
         >{{confirmBtn}}</view
       >
     </view>