fix(rate): 评分组件支持无障碍滑动 (#1574)

* fix(rate): 评分组件支持滑动无障碍操作(#1050)

* fix(rate): 评分组件样式问题修复.(#1050)

* fix(rate): 评分组件单测问题.(#1050)

* fix(rate): 抽象样式, 冗余代码.(#1050)

* fix(rate): 删除冗余节点.(#1050)

* fix(rate): 优化读取.(#1050)

* fix(rate): 新增额外的读取.(#1050)

* fix(rate): 修复警告旁白导致的滑动卡顿.(#1050)

* fix(rate): sr-only注释(#1050)

* fix(rate): update test snapshots. (#1050)

src/common/style/utilities/_index.less

@@ -51,3 +51,18 @@
     transform: scaleX(0.5);
   }
 }
+
+// 屏幕中不显示, 但可被读屏
+.sr-only() {
+  &--sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    clip-path: inset(50%);
+    border: 0;
+  }
+}

src/rate/__test__/__snapshots__/demo.test.js.snap

@@ -237,6 +237,15 @@ exports[`Rate Rate special demo works fine 1`] = `
     >
       <t-rate
         size="30"
+        texts="{{
+          Array [
+            "非常糟糕",
+            "有些糟糕",
+            "可以尝试",
+            "可以前往",
+            "推荐前往",
+          ]
+        }}"
         value="{{4}}"
         bind:change="onChange"
       />

src/rate/_example/special/index.wxml

@@ -1,6 +1,6 @@
 <view class="demo-rate">
   <view class="rate-wrapper">
-    <t-rate value="{{value}}" size="30" bind:change="onChange" />
+    <t-rate value="{{value}}" size="30" bind:change="onChange" texts="{{texts}}" />
   </view>
   <view class="desc desc--{{value > 3 ? 'active' : ''}}">{{texts[value - 1]}}</view>
 </view>

src/rate/rate.less

@@ -61,6 +61,7 @@
       color: @rate-text-active-color;
       font-weight: @rate-text-active-font-weight;
     }
+    .sr-only();
   }
 
   &__tips {

src/rate/rate.ts

@@ -27,6 +27,7 @@ export default class Rate extends SuperComponent {
     tipsLeft: 0,
     actionType: '',
     scaleIndex: -1,
+    isVisibleToScreenReader: false,
   };
 
   methods = {
@@ -76,6 +77,7 @@ export default class Rate extends SuperComponent {
     },
     onTouchMove(e: WechatMiniprogram.TouchEvent) {
       this.onTouch(e, 'move');
+      this.showAlertText()
     },
     onTouchEnd() {
       this.touchEnd = true;
@@ -95,5 +97,17 @@ export default class Rate extends SuperComponent {
       this._trigger('change', { value });
       setTimeout(() => this.setData({ tipsVisible: false, scaleIndex: -1 }), 300);
     },
+    // 旁白模式: 变更数值时显示告警文案
+    showAlertText() {
+      if (this.data.isVisibleToScreenReader === true) return;
+      this.setData({
+        isVisibleToScreenReader: true,
+      });
+      setTimeout(() => {
+        this.setData({
+          isVisibleToScreenReader: false,
+        });
+      }, 2e3);
+    },
   };
 }

src/rate/rate.wxml

@@ -10,21 +10,36 @@
     catch:tap="{{ !disabled ? 'onTap' : '' }}"
     catch:touchend="{{ !disabled ? 'onTouchEnd' : ''}}"
     catch:touchcancel="{{ !disabled ? 'onTouchEnd' : ''}}"
+    aria-role="slider"
+    aria-valuemax="{{count}}"
+    aria-valuemin="{{0}}"
+    aria-valuenow="{{value}}"
+    aria-valuetext="{{utils.getText(texts,value,defaultTexts)}}"
   >
     <t-icon
       wx:for="{{ count }}"
       wx:key="*this"
       class="{{classPrefix }}__icon {{utils.getIconClass(classPrefix + '__icon', defaultValue, value, index, allowHalf, disabled, scaleIndex)}}"
+      style="margin-right:{{ count - index > 1 ? gap : 0 }}px; {{utils.getColor(color)}}"
       t-class="{{prefix}}-class-icon"
       name="{{utils.getIconName(defaultValue, value, index, icon)}}"
       size="{{ size }}"
-      style="margin-right:{{ count - index > 1 ? gap : 0 }}px; {{utils.getColor(color)}}"
     />
   </view>
-  <text wx:if="{{showText}}" class="{{_.cls(classPrefix + '__text', [['active', value > 0]])}} {{prefix}}-class-text"
+  <text
+    wx:if="{{showText}}"
+    class="{{_.cls(classPrefix + '__text', [['active', value > 0]])}} {{prefix}}-class-text"
+    aria-hidden="{{true}}"
     >{{utils.getText(texts,value,defaultTexts)}}</text
   >
-  <view wx:if="{{tipsVisible}}" class="{{classPrefix}}__tips" style="left: {{tipsLeft}}px">
+  <text
+    wx:if="{{isVisibleToScreenReader}}"
+    class="{{_.cls(classPrefix + '__text', [['active', value > 0], ['sr-only', isVisibleToScreenReader]])}} {{prefix}}-class-text"
+    aria-role="alert"
+    aria-live="assertive"
+    >{{value+'星'}} {{utils.getText(texts,value,defaultTexts)}}</text
+  >
+  <view wx:if="{{tipsVisible}}" class="{{classPrefix}}__tips" style="left: {{tipsLeft}}px" aria-hidden="{{true}}">
     <block wx:if="{{actionType == 'tap'}}">
       <view
         wx:if="{{allowHalf}}"