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

byq1213 · Dec 17, 2022 · 2bc351d · 2bc351d
1 parent 293aee3
commit 2bc351d
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 18 deletions.
diff --git a/src/picker/_example/base/index.wxml b/src/picker/_example/base/index.wxml
@@ -1,21 +1,21 @@
 <block>
-  <view class="pannel-item" bind:tap="onClickPicker" data-key="{{PICKER_KEY.CITY}}">
+  <label class="pannel-item" bind:tap="onClickPicker" data-key="{{PICKER_KEY.CITY}}" aria-role="button">
     <view class="pannel-label">城市</view>
     <view class="pannel-text {{cityValue.length ? '' : 'empty'}}">{{cityCurrentValue || '选择城市'}}</view>
     <t-icon name="chevron-right" color="rgba(0, 0, 0, 0.26)" size="24px" />
-  </view>
-  <view class="pannel-item" bind:tap="onClickPicker" data-key="{{PICKER_KEY.YEAR_SEASONS}}">
+  </label>
+  <label class="pannel-item" bind:tap="onClickPicker" data-key="{{PICKER_KEY.YEAR_SEASONS}}" aria-role="button">
     <view class="pannel-label">年份和季节</view>
     <view class="pannel-text {{yearSeasonsValue.length ? '' : 'empty'}}">
       {{yearSeasonsCurrentValue || '选择年份和季节' }}</view
     >
     <t-icon name="chevron-right" color="rgba(0, 0, 0, 0.26)" size="24px" />
-  </view>
-  <view class="pannel-item last" bind:tap="onClickPicker" data-key="{{PICKER_KEY.DATE}}">
+  </label>
+  <label class="pannel-item last" bind:tap="onClickPicker" data-key="{{PICKER_KEY.DATE}}" aria-role="button">
     <view class="pannel-label">日期</view>
     <view class="pannel-text {{dateValue.length ? '' : 'empty'}}"> {{dateCurrentValue || '选择日期' }}</view>
     <t-icon name="chevron-right" color="rgba(0, 0, 0, 0.26)" size="24px" />
-  </view>
+  </label>
 </block>
 
 <!-- 城市不带标题 -->

diff --git a/src/picker/_example/picker.wxml b/src/picker/_example/picker.wxml
@@ -5,32 +5,39 @@
     <base />
   </t-demo>
   <t-demo desc="带标题选择器">
-    <view class="pannel-item" bind:tap="onClickPicker" data-key="{{PICKER_KEY.CITY_TITLE}}">
+    <label class="pannel-item" bind:tap="onClickPicker" data-key="{{PICKER_KEY.CITY_TITLE}}" aria-role="button">
       <view class="pannel-label">城市</view>
       <view class="pannel-text {{cityTitleValue.length ? '' : 'empty'}}"
         >{{ cityTitleCurrentValue || '选择城市' }}</view
       >
       <t-icon name="chevron-right" color="rgba(0, 0, 0, 0.26)" size="24px" />
-    </view>
-    <view
+    </label>
+    <label
       class="pannel-item"
       bind:tap="onClickPicker"
       data-title="选择年份和季节"
       data-key="{{PICKER_KEY.YEAR_SEASONS_TITLE}}"
+      aria-role="button"
     >
       <view class="pannel-label">年份和季节</view>
       <view class="pannel-text {{yearSeasonsTitleValue.length ? '' : 'empty'}}">
         {{ yearSeasonsTitleCurrentValue || '选择年份和季节' }}</view
       >
       <t-icon name="chevron-right" color="rgba(0, 0, 0, 0.26)" size="24px" />
-    </view>
-    <view class="pannel-item" bind:tap="onClickPicker" data-title="选择日期" data-key="{{PICKER_KEY.DATE_TITLE}}">
+    </label>
+    <label
+      class="pannel-item"
+      bind:tap="onClickPicker"
+      data-title="选择日期"
+      data-key="{{PICKER_KEY.DATE_TITLE}}"
+      aria-role="button"
+    >
       <view class="pannel-label">日期</view>
       <view class="pannel-text {{dateTitleValue.length ? '' : 'empty'}}">
         {{ dateTitleCurrentValue || '选择日期' }}</view
       >
       <t-icon name="chevron-right" color="rgba(0, 0, 0, 0.26)" size="24px" />
-    </view>
+    </label>
   </t-demo>
 
   <!-- 城市带标题 -->

diff --git a/src/picker/picker-item.ts b/src/picker/picker-item.ts
@@ -89,6 +89,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() {

diff --git a/src/picker/picker-item.wxml b/src/picker/picker-item.wxml
@@ -1,4 +1,6 @@
-<view
+<scroll-view
+  enhanced="true"
+  id="{{classPrefix}}__group"
   style="{{ customStyle }}"
   class="{{classPrefix}}__group"
   bind:touchstart="onTouchStart"
@@ -16,8 +18,9 @@
       wx:key="index"
       wx:for-item="option"
       data-index="{{ index }}"
+      bind:tap="onTap"
     >
       {{option.label}}
     </view>
   </view>
-</view>
+</scroll-view>
diff --git a/src/picker/picker.wxml b/src/picker/picker.wxml
@@ -1,11 +1,27 @@
 <t-popup visible="{{visible}}" placement="bottom" bind:visible-change="onPopupChange">
-  <view slot="content" style="{{ customStyle }}" class="{{classPrefix}} {{prefix}}-class">
+  <view
+    slot="content"
+    style="{{ customStyle }}"
+    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>