feature/zhangpaopao/picker aria

src/date-time-picker/__test__/__virtualHostSnapshot__/index.test.js.snap

@@ -448,9 +448,14 @@ exports[`date-time-picker :base 1`] = `
               </wx-view>
             </wx-view>
             <wx-view
-              class="t-popup__close"
-              bind:tap="handleClose"
-            />
+              ariaHidden="{{true}}"
+              ariaRole="alert"
+              class="t-picker-item__aria__content"
+            >
+
+    9月
+
+            </wx-view>
           </wx-view>
         </wx-view>
         <t-overlay

src/picker-item/picker-item.less

@@ -18,6 +18,7 @@
     overflow: hidden;
     flex: 1;
     z-index: 1;
+    position: relative;
   }
 
   &__wrapper {
@@ -38,4 +39,13 @@
       font-weight: 600;
     }
   }
+
+  &__aria__content {
+    position: absolute;
+    bottom: -100%;
+    opacity: 0;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+  }
 }

src/picker-item/picker-item.ts

@@ -51,6 +51,7 @@ export default class PickerItem extends SuperComponent {
     duration: 0, // 滚动动画延迟
     value: '',
     curIndex: 0,
+    isScrolling: false,
     labelAlias: 'label',
     valueAlias: 'value',
   };
@@ -68,10 +69,14 @@ export default class PickerItem extends SuperComponent {
       // touch偏移增量
       const touchDeltaY = event.touches[0].clientY - StartY;
       const deltaY = this.calculateViewDeltaY(touchDeltaY);
+      const offset = range(StartOffset + deltaY, -(this.getCount() * itemHeight), 0);
+      const index = range(Math.round(-offset / this.itemHeight), 0, this.getCount() - 1);
 
       this.setData({
-        offset: range(StartOffset + deltaY, -(this.getCount() * itemHeight), 0),
+        offset,
         duration: DefaultDuration,
+        curIndex: index,
+        isScrolling: true,
       });
     },
 
@@ -87,6 +92,7 @@ export default class PickerItem extends SuperComponent {
       this.setData({
         curIndex: index,
         offset: -index * this.itemHeight,
+        isScrolling: false,
       });
 
       if (index === this._selectedIndex) {

src/picker-item/picker-item.wxml

@@ -7,6 +7,7 @@
   catch:touchmove="onTouchMove"
   bind:touchend="onTouchEnd"
   bind:touchcancel="onTouchEnd"
+  aria-role="listbox"
 >
   <view
     class="{{classPrefix}}__wrapper"
@@ -18,8 +19,14 @@
       wx:key="index"
       wx:for-item="option"
       data-index="{{ index }}"
+      aria-role="option"
+      aria-hidden="{{curIndex !== index}}"
+      aria-label="{{option.label + '，按住后上下滑动选择'}}"
     >
       {{option[labelAlias]}}
     </view>
   </view>
+  <view class="{{classPrefix}}__aria__content" aria-role="alert" aria-hidden="{{!isScrolling}}">
+    {{ options[curIndex].label }}
+  </view>
 </view>

src/picker/__test__/__snapshots__/index.test.js.snap

@@ -31,28 +31,35 @@ exports[`picker :base 1`] = `
             class="t-picker__toolbar"
           >
             <wx-view
+              ariaRole="button"
               class="t-picker__cancel t-class-cancel"
               bind:tap="onCancel"
             >
-              取消
+
+        取消
+
             </wx-view>
             <wx-view
               class="t-picker__title t-class-title"
             >
 
             </wx-view>
             <wx-view
+              ariaRole="button"
               class="t-picker__confirm t-class-confirm"
               bind:tap="onConfirm"
             >
-              确认
+
+        确认
+
             </wx-view>
           </wx-view>
           <wx-view
             class="t-picker__main"
           >
             <t-picker-item>
               <wx-view
+                ariaRole="listbox"
                 class="t-picker-item__group class t-class"
                 style=""
                 bind:touchcancel="onTouchEnd"
@@ -65,6 +72,9 @@ exports[`picker :base 1`] = `
                   style="transition: transform 0ms cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, 0px, 0)"
                 >
                   <wx-view
+                    ariaHidden="{{false}}"
+                    ariaLabel="2021年，按住后上下滑动选择"
+                    ariaRole="option"
                     class="t-picker-item__item t-picker-item__item--active"
                     data-index="{{0}}"
                   >
@@ -73,6 +83,9 @@ exports[`picker :base 1`] = `
 
                   </wx-view>
                   <wx-view
+                    ariaHidden="{{true}}"
+                    ariaLabel="2020年，按住后上下滑动选择"
+                    ariaRole="option"
                     class="t-picker-item__item"
                     data-index="{{1}}"
                   >
@@ -81,6 +94,9 @@ exports[`picker :base 1`] = `
 
                   </wx-view>
                   <wx-view
+                    ariaHidden="{{true}}"
+                    ariaLabel="2019年，按住后上下滑动选择"
+                    ariaRole="option"
                     class="t-picker-item__item"
                     data-index="{{2}}"
                   >
@@ -89,10 +105,20 @@ exports[`picker :base 1`] = `
 
                   </wx-view>
                 </wx-view>
+                <wx-view
+                  ariaHidden="{{true}}"
+                  ariaRole="alert"
+                  class="t-picker-item__aria__content"
+                >
+
+    2021年
+
+                </wx-view>
               </wx-view>
             </t-picker-item>
             <t-picker-item>
               <wx-view
+                ariaRole="listbox"
                 class="t-picker-item__group class t-class"
                 style=""
                 bind:touchcancel="onTouchEnd"
@@ -105,6 +131,9 @@ exports[`picker :base 1`] = `
                   style="transition: transform 0ms cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, 0px, 0)"
                 >
                   <wx-view
+                    ariaHidden="{{false}}"
+                    ariaLabel="春，按住后上下滑动选择"
+                    ariaRole="option"
                     class="t-picker-item__item t-picker-item__item--active"
                     data-index="{{0}}"
                   >
@@ -113,6 +142,9 @@ exports[`picker :base 1`] = `
 
                   </wx-view>
                   <wx-view
+                    ariaHidden="{{true}}"
+                    ariaLabel="夏，按住后上下滑动选择"
+                    ariaRole="option"
                     class="t-picker-item__item"
                     data-index="{{1}}"
                   >
@@ -121,6 +153,9 @@ exports[`picker :base 1`] = `
 
                   </wx-view>
                   <wx-view
+                    ariaHidden="{{true}}"
+                    ariaLabel="秋，按住后上下滑动选择"
+                    ariaRole="option"
                     class="t-picker-item__item"
                     data-index="{{2}}"
                   >
@@ -129,6 +164,9 @@ exports[`picker :base 1`] = `
 
                   </wx-view>
                   <wx-view
+                    ariaHidden="{{true}}"
+                    ariaLabel="冬，按住后上下滑动选择"
+                    ariaRole="option"
                     class="t-picker-item__item"
                     data-index="{{3}}"
                   >
@@ -137,6 +175,15 @@ exports[`picker :base 1`] = `
 
                   </wx-view>
                 </wx-view>
+                <wx-view
+                  ariaHidden="{{true}}"
+                  ariaRole="alert"
+                  class="t-picker-item__aria__content"
+                >
+
+    春
+
+                </wx-view>
               </wx-view>
             </t-picker-item>
             <wx-view

src/picker/__test__/__virtualHostSnapshot__/index.test.js.snap

@@ -149,6 +149,15 @@ exports[`picker :base 1`] = `
               class="t-picker__indicator"
             />
           </wx-view>
+          <wx-view
+            ariaHidden="{{true}}"
+            ariaRole="alert"
+            class="t-picker-item__aria__content"
+          >
+
+    春
+
+          </wx-view>
         </wx-view>
         <wx-view
           class="t-popup__close"

src/picker/picker.wxml

@@ -10,13 +10,23 @@
 >
   <view slot="content" style="{{_._style([style, customStyle])}}" class="{{classPrefix}} {{prefix}}-class">
     <view class="{{classPrefix}}__toolbar" wx:if="{{header}}">
-      <view class="{{classPrefix}}__cancel {{prefix}}-class-cancel" wx:if="{{cancelBtn}}" bindtap="onCancel"
-        >{{cancelBtn}}</view
+      <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"
-        >{{confirmBtn}}</view
+      <view
+        class="{{classPrefix}}__confirm {{prefix}}-class-confirm"
+        wx:if="{{confirmBtn}}"
+        bindtap="onConfirm"
+        aria-role="button"
       >
+        {{confirmBtn}}
+      </view>
     </view>
     <slot name="header" />
     <view class="{{_.cls(classPrefix + '__main', [])}}">

src/swiper-nav/swiper-nav.wxml

@@ -1,6 +1,5 @@
 <wxs src="../common/utils.wxs" module="_" />
 
-
 <view
   wx:if="{{showControls}}"
   class="class {{prefix}}-class {{classPrefix}}__btn"