feat: input组件无障碍优化 (#1246)

* feat: input组件无障碍优化 * feat: 修改示例读屏文案
Tencent · Dec 20, 2022 · eb03fae · eb03fae
1 parent a6aa237
commit eb03fae
Show file tree

Hide file tree

Showing 7 changed files with 71 additions and 16 deletions.
diff --git a/src/input/__test__/__snapshots__/demo.test.js.snap b/src/input/__test__/__snapshots__/demo.test.js.snap
@@ -68,7 +68,12 @@ exports[`Input Input bordered demo works fine 1`] = `
     borderless="{{false}}"
     placeholder="请输入文字"
     status="error"
-    suffixIcon="error-circle-filled"
+    suffixIcon="{{
+      Object {
+        "ariaLabel": "提示",
+        "name": "error-circle-filled",
+      }
+    }}"
     tips="错误提示文字"
   />
 </bordered>
@@ -102,7 +107,12 @@ exports[`Input Input layout demo works fine 1`] = `
     label="标签文字"
     layout="vertical"
     placeholder="请输入文字"
-    suffixIcon="error-circle-filled"
+    suffixIcon="{{
+      Object {
+        "ariaLabel": "提示",
+        "name": "error-circle-filled",
+      }
+    }}"
   />
 </layout>
 `;
@@ -168,6 +178,8 @@ exports[`Input Input special demo works fine 1`] = `
         class="suffix--line"
       />
       <wx-image
+        ariaLabel="验证码"
+        ariaRole="img"
         class="image"
         mode="heightFix"
         src="https://wwcdn.weixin.qq.com/node/wework/images/202010241547.ac6876be9c.png"
@@ -190,6 +202,7 @@ exports[`Input Input special demo works fine 1`] = `
         class="suffix--line"
       />
       <wx-view
+        ariaRole="button"
         class="verify"
       >
          发送验证码 
@@ -238,7 +251,12 @@ exports[`Input Input suffix demo works fine 1`] = `
   <t-input
     label="标签文字"
     placeholder="请输入文字"
-    suffixIcon="error-circle-filled"
+    suffixIcon="{{
+      Object {
+        "ariaLabel": "提示",
+        "name": "error-circle-filled",
+      }
+    }}"
   />
   <t-input
     placeholder="请输入手机号码"
@@ -254,7 +272,12 @@ exports[`Input Input suffix demo works fine 1`] = `
   <t-input
     label="标签文字"
     placeholder="请输入文字"
-    suffixIcon="user-avatar"
+    suffixIcon="{{
+      Object {
+        "ariaLabel": "通讯录",
+        "name": "user-avatar",
+      }
+    }}"
   />
 </suffix>
 `;
diff --git a/src/input/__test__/__snapshots__/index.test.js.snap b/src/input/__test__/__snapshots__/index.test.js.snap
@@ -5,13 +5,15 @@ exports[`input props : clearable && label && suffix 1`] = `
   class="base"
 >
   <wx-view
+    ariaDescribedby="{{true}}"
     class="t-input t-input--size-medium t-input--layout-horizontal t-class"
     style=""
   >
     <wx-view
       class="t-input__wrap--prefix"
     >
       <wx-view
+        ariaHidden="{{true}}"
         class="t-input__label"
       >
         <wx-text
@@ -30,6 +32,9 @@ exports[`input props : clearable && label && suffix 1`] = `
         <wx-input
           adjustPosition="{{true}}"
           alwaysEmbed="{{false}}"
+          ariaLabel="tdesign"
+          ariaRole="textbox"
+          ariaRoledescription="tdesign"
           autoFocus="{{false}}"
           class="t-input__control t-input__control--left t-class-input"
           confirmHold="{{false}}"
@@ -70,8 +75,8 @@ exports[`input props : clearable && label && suffix 1`] = `
           >
             <wx-view
               ariaHidden="{{false}}"
-              ariaLabel=""
-              ariaRole=""
+              ariaLabel="清除"
+              ariaRole="button"
               class="t-icon t-class"
               style="font-size: 24px"
               bind:tap="onTap"
@@ -100,7 +105,7 @@ exports[`input props : clearable && label && suffix 1`] = `
             <wx-view
               ariaHidden="{{false}}"
               ariaLabel=""
-              ariaRole=""
+              ariaRole="button"
               class="t-icon t-class"
               style="font-size: 24px"
               bind:tap="onTap"
@@ -122,13 +127,15 @@ exports[`input slots : label 1`] = `
   class="base"
 >
   <wx-view
+    ariaDescribedby="{{true}}"
     class="t-input t-input--size-medium t-input--layout-horizontal t-class"
     style=""
   >
     <wx-view
       class="t-input__wrap--prefix"
     >
       <wx-view
+        ariaHidden="{{true}}"
         class="t-input__label"
       >
         <wx-text
@@ -152,6 +159,9 @@ exports[`input slots : label 1`] = `
         <wx-input
           adjustPosition="{{true}}"
           alwaysEmbed="{{false}}"
+          ariaLabel="slot"
+          ariaRole="textbox"
+          ariaRoledescription="slot"
           autoFocus="{{false}}"
           class="t-input__control t-input__control--left t-class-input"
           confirmHold="{{false}}"

diff --git a/src/input/_example/bordered/index.wxml b/src/input/_example/bordered/index.wxml
@@ -3,7 +3,7 @@
 <t-input placeholder="请输入文字" status="warning" borderless="{{false}}" />
 <t-input
   placeholder="请输入文字"
-  suffixIcon="error-circle-filled"
+  suffixIcon="{{ { name: 'error-circle-filled', ariaLabel: '提示' } }}"
   status="error"
   tips="错误提示文字"
   borderless="{{false}}"

diff --git a/src/input/_example/layout/index.wxml b/src/input/_example/layout/index.wxml
@@ -1 +1,6 @@
-<t-input label="标签文字" layout="vertical" placeholder="请输入文字" suffixIcon="error-circle-filled"></t-input>
+<t-input
+  label="标签文字"
+  layout="vertical"
+  placeholder="请输入文字"
+  suffixIcon="{{ { name: 'error-circle-filled', ariaLabel: '提示' } }}"
+></t-input>
diff --git a/src/input/_example/special/index.wxml b/src/input/_example/special/index.wxml
@@ -7,6 +7,8 @@
       class="image"
       src="https://wwcdn.weixin.qq.com/node/wework/images/202010241547.ac6876be9c.png"
       mode="heightFix"
+      aria-role="img"
+      aria-label="验证码"
     />
   </view>
 </t-input>
@@ -21,7 +23,7 @@
 >
   <view slot="suffix" style="display: flex; align-items: center">
     <view class="suffix--line"></view>
-    <view class="verify"> 发送验证码 </view>
+    <view class="verify" aria-role="button"> 发送验证码 </view>
   </view>
 </t-input>
 

diff --git a/src/input/_example/suffix/index.wxml b/src/input/_example/suffix/index.wxml
@@ -1,7 +1,11 @@
-<t-input label="标签文字" placeholder="请输入文字" suffixIcon="error-circle-filled" />
+<t-input
+  label="标签文字"
+  placeholder="请输入文字"
+  suffixIcon="{{ { name: 'error-circle-filled', ariaLabel: '提示' } }}"
+/>
 
 <t-input placeholder="请输入手机号码">
   <t-button slot="suffix" theme="primary" t-class="custom-button"> 操作按钮 </t-button>
 </t-input>
 
-<t-input label="标签文字" placeholder="请输入文字" suffixIcon="user-avatar" />
+<t-input label="标签文字" placeholder="请输入文字" suffixIcon="{{ { name: 'user-avatar', ariaLabel: '通讯录' } }}" />
diff --git a/src/input/input.wxml b/src/input/input.wxml
@@ -5,17 +5,20 @@
 <view
   style="{{ customStyle }}"
   class="{{classPrefix}} {{classPrefix}}--size-{{size}} {{classPrefix}}--layout-{{layout}} {{prefix}}-class"
+  aria-describedby
 >
+  <!-- aria-describedby用于关联该行设置了aria-hidden的元素最近的焦点，解决触发焦点过度上下偏移的问题 -->
+
   <view wx:if="{{prefixIconName || _.isNoEmptyObj(prefixIconData) || label}}" class="{{classPrefix}}__wrap--prefix">
     <view wx:if="{{prefixIconName || _.isNoEmptyObj(prefixIconData)}}" class="{{classPrefix}}__icon--prefix">
       <slot wx:if="{{prefixIconName === 'slot'}}" name="prefixIcon" />
       <template
         wx:else
         is="icon"
-        data="{{tClass: prefix + '-class-prefix-icon', size: 24, name: prefixIconName, ...prefixIconData}}"
+        data="{{tClass: prefix + '-class-prefix-icon', ariaHidden: true, size: 24, name: prefixIconName, ...prefixIconData}}"
       ></template>
     </view>
-    <view wx:if="{{label}}" class="{{classPrefix}}__label">
+    <view wx:if="{{label}}" class="{{classPrefix}}__label" aria-hidden>
       <slot name="label" wx:if="{{label === 'slot'}}" />
       <text wx:else class="{{prefix}}-class-label">{{label}}</text>
     </view>
@@ -56,7 +59,15 @@
         safe-password-salt="{{safePasswordSalt}}"
         safe-password-custom-hash="{{safePasswordCustomHash}}"
         class="{{this.getInputClass(classPrefix, suffix, align, disabled)}} {{prefix}}-class-input"
+        aria-role="textbox"
+        aria-label="{{label}}"
+        aria-roledescription="{{label}}"
       />
+      <!--
+        这里aria-role="textbox"和aria-label组合使用实现ios的聚合焦点播报效果。
+        ios会播报aria-label，不会重复播报aria-roledescription的内容；
+        安卓不会播报aria-label，会播报aria-roledescription的内容
+      -->
 
       <view
         wx:if="{{(clearableName || _.isNoEmptyObj(clearableData)) && value.length > 0}}"
@@ -65,7 +76,7 @@
       >
         <template
           is="icon"
-          data="{{tClass: prefix + '-class-clearable', size: 24, name: clearableName, ...clearableData}}"
+          data="{{tClass: prefix + '-class-clearable', ariaRole: 'button', ariaLabel: '清除', size: 24, name: clearableName, ...clearableData}}"
         ></template>
       </view>
       <view class="{{classPrefix}}__wrap--suffix {{prefix}}-class-suffix">
@@ -76,7 +87,7 @@
         <template
           wx:if="{{suffixIconName || _.isNoEmptyObj(suffixIconData)}}"
           is="icon"
-          data="{{tClass: prefix + '-class-suffix-icon', size: 24, name: suffixIconName, ...suffixIconData}}"
+          data="{{tClass: prefix + '-class-suffix-icon', ariaRole: 'button', size: 24, name: suffixIconName, ...suffixIconData}}"
         ></template>
         <slot wx:else name="suffixIcon" />
       </view>