fix(avatar): 无障碍朗读支持. (Tencent#1028)

byq1213 · Nov 29, 2022 · 8d6eb44 · 8d6eb44
1 parent 8629fcd
commit 8d6eb44
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 3 deletions.
diff --git a/src/avatar/_example/action/index.wxml b/src/avatar/_example/action/index.wxml
@@ -2,13 +2,13 @@
   <view class="avatar-example">
     <t-avatar-group max="5" cascading="left-up" size="medium">
       <t-avatar wx:for="{{pics}}" wx:for-item="pic" wx:key="index" image="{{pic}}" bordered />
-      <t-avatar slot="collapseAvatar" icon="user-add" bindtap="onAddTap" bordered />
+      <t-avatar slot="collapseAvatar" icon="user-add" bindtap="onAddTap" bordered alt="点击添加" />
     </t-avatar-group>
   </view>
   <view class="avatar-example">
     <t-avatar-group max="5" size="medium">
       <t-avatar wx:for="{{pics}}" wx:for-item="pic" wx:key="index" image="{{pic}}" bordered />
-      <t-avatar slot="collapseAvatar" icon="user-add" bindtap="onAddTap" bordered />
+      <t-avatar slot="collapseAvatar" icon="user-add" bindtap="onAddTap" bordered alt="点击添加" />
     </t-avatar-group>
   </view>
 </view>
diff --git a/src/avatar/_example/character-avatar/index.wxml b/src/avatar/_example/character-avatar/index.wxml
@@ -1,6 +1,6 @@
 <view class="demo-avatar">
   <view class="avatar-example">
-    <t-avatar t-class-content="external-class-content">A</t-avatar>
+    <t-avatar t-class-content="external-class-content" alt="字母A为名称">A</t-avatar>
   </view>
   <view class="avatar-example">
     <t-avatar shape="round" t-class-content="external-class-content">A</t-avatar>

diff --git a/src/avatar/avatar.wxml b/src/avatar/avatar.wxml
@@ -18,6 +18,8 @@
     <view
       class="{{this.getAvatarOuterClass(classPrefix, size, shape, bordered)}} {{prefix}}-class-image "
       style="{{this.getAvatarSizePx(size)}}"
+      aria-label="{{ alt || '头像'}}"
+      aria-role="img"
     >
       <t-image
         wx:if="{{image}}"