feat(image): support aria (#1136)

* feat(image): support aria * test(image): update snap * feat(image): example add aria-label * test(image): update snap
Tencent · Dec 5, 2022 · c1f61eb · c1f61eb
1 parent 34d9fcc
commit c1f61eb
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 9 deletions.
diff --git a/src/image-viewer/__test__/__snapshots__/index.test.js.snap b/src/image-viewer/__test__/__snapshots__/index.test.js.snap
@@ -9,6 +9,7 @@ exports[`image-viewer :base 1`] = `
   bind:load="onImageLoadSuccess"
 >
   <wx-view
+    ariaHidden="{{false}}"
     class="t-class t-image t-image__mask t-image--loading t-image--shape-square"
     style=" "
   >
@@ -49,6 +50,8 @@ exports[`image-viewer :base 1`] = `
     </t-loading>
   </wx-view>
   <wx-image
+    ariaHidden="{{true}}"
+    ariaLabel=""
     class="t-class t-image t-image--shape-square"
     hidden="{{true}}"
     id="image"
@@ -73,6 +76,7 @@ exports[`image-viewer :base 2`] = `
   bind:load="onImageLoadSuccess"
 >
   <wx-view
+    ariaHidden="{{false}}"
     class="t-class t-image t-image__mask t-image--loading t-image--shape-square"
     style=" "
   >
@@ -113,6 +117,8 @@ exports[`image-viewer :base 2`] = `
     </t-loading>
   </wx-view>
   <wx-image
+    ariaHidden="{{true}}"
+    ariaLabel=""
     class="t-class t-image t-image--shape-square"
     hidden="{{true}}"
     id="image"
@@ -137,6 +143,7 @@ exports[`image-viewer :base 3`] = `
   bind:load="onImageLoadSuccess"
 >
   <wx-view
+    ariaHidden="{{false}}"
     class="t-class t-image t-image__mask t-image--loading t-image--shape-square"
     style=" "
   >
@@ -177,6 +184,8 @@ exports[`image-viewer :base 3`] = `
     </t-loading>
   </wx-view>
   <wx-image
+    ariaHidden="{{true}}"
+    ariaLabel=""
     class="t-class t-image t-image--shape-square"
     hidden="{{true}}"
     id="image"

diff --git a/src/image/__test__/__snapshots__/demo.test.js.snap b/src/image/__test__/__snapshots__/demo.test.js.snap
@@ -14,6 +14,7 @@ exports[`Image Image base demo works fine 1`] = `
         裁切
       </wx-view>
       <t-image
+        ariaLabel="一个放置在墙角的黄色行李箱"
         height="72"
         mode="aspectFill"
         src="https://we-retail-static-1300977798.cos.ap-guangzhou.myqcloud.com/retail-ui/components-exp/image/image-2.jpg"
@@ -29,6 +30,7 @@ exports[`Image Image base demo works fine 1`] = `
         适应高
       </wx-view>
       <t-image
+        ariaLabel="一个放置在墙角的黄色行李箱"
         height="72"
         mode="heightFix"
         src="https://we-retail-static-1300977798.cos.ap-guangzhou.myqcloud.com/retail-ui/components-exp/image/image-2.jpg"
@@ -44,6 +46,7 @@ exports[`Image Image base demo works fine 1`] = `
         拉伸
       </wx-view>
       <t-image
+        ariaLabel="一个放置在墙角的黄色行李箱"
         height="72"
         src="https://we-retail-static-1300977798.cos.ap-guangzhou.myqcloud.com/retail-ui/components-exp/image/image-2.jpg"
         width="72"
@@ -62,6 +65,7 @@ exports[`Image Image base demo works fine 1`] = `
         方形
       </wx-view>
       <t-image
+        ariaLabel="一个放置在墙角的黄色行李箱"
         height="72"
         mode="aspectFill"
         src="https://we-retail-static-1300977798.cos.ap-guangzhou.myqcloud.com/retail-ui/components-exp/image/image-2.jpg"
@@ -77,6 +81,7 @@ exports[`Image Image base demo works fine 1`] = `
         圆角方形
       </wx-view>
       <t-image
+        ariaLabel="一个放置在墙角的黄色行李箱"
         height="72"
         shape="round"
         src="https://we-retail-static-1300977798.cos.ap-guangzhou.myqcloud.com/retail-ui/components-exp/image/image-2.jpg"
@@ -92,6 +97,7 @@ exports[`Image Image base demo works fine 1`] = `
         圆形
       </wx-view>
       <t-image
+        ariaLabel="一个放置在墙角的黄色行李箱"
         height="72"
         shape="circle"
         src="https://we-retail-static-1300977798.cos.ap-guangzhou.myqcloud.com/retail-ui/components-exp/image/image-2.jpg"

diff --git a/src/image/__test__/__snapshots__/index.test.js.snap b/src/image/__test__/__snapshots__/index.test.js.snap
@@ -4,6 +4,7 @@ exports[`image :base 1`] = `
 <main>
   <t-image>
     <wx-view
+      ariaHidden="{{false}}"
       class="t-class t-image t-image__mask t-image--faild t-image--shape-square"
       style=" "
     >
@@ -14,8 +15,8 @@ exports[`image :base 1`] = `
         <t-icon>
           <wx-view
             ariaHidden="{{false}}"
-            ariaLabel=""
-            ariaRole=""
+            ariaLabel="加载失败"
+            ariaRole="img"
             class="t-icon t-class"
             style=""
             bind:tap="onTap"
@@ -28,6 +29,8 @@ exports[`image :base 1`] = `
       </wx-view>
     </wx-view>
     <wx-image
+      ariaHidden="{{true}}"
+      ariaLabel=""
       class="t-class t-image t-image--shape-square"
       hidden="{{true}}"
       id="image"
@@ -51,6 +54,8 @@ exports[`image :success 1`] = `
     bind:load="handleLoad"
   >
     <wx-image
+      ariaHidden="{{false}}"
+      ariaLabel=""
       class="t-class t-image t-image--shape-square"
       hidden="{{false}}"
       id="image"

diff --git a/src/image/_example/base/index.wxml b/src/image/_example/base/index.wxml
@@ -1,29 +1,29 @@
 <view class="tr">
   <view class="col">
     <view class="text">裁切</view>
-    <t-image src="{{imageSrc}}" mode="aspectFill" width="72" height="72" />
+    <t-image src="{{imageSrc}}" mode="aspectFill" width="72" height="72" aria-label="一个放置在墙角的黄色行李箱" />
   </view>
   <view class="col">
     <view class="text">适应高</view>
-    <t-image src="{{imageSrc}}" mode="heightFix" width="72" height="72" />
+    <t-image src="{{imageSrc}}" mode="heightFix" width="72" height="72" aria-label="一个放置在墙角的黄色行李箱" />
   </view>
   <view class="col">
     <view class="text">拉伸</view>
-    <t-image src="{{imageSrc}}" width="72" height="72" />
+    <t-image src="{{imageSrc}}" width="72" height="72" aria-label="一个放置在墙角的黄色行李箱" />
   </view>
 </view>
 
 <view class="tr">
   <view class="col">
     <view class="text">方形</view>
-    <t-image src="{{imageSrc}}" mode="aspectFill" width="72" height="72" />
+    <t-image src="{{imageSrc}}" mode="aspectFill" width="72" height="72" aria-label="一个放置在墙角的黄色行李箱" />
   </view>
   <view class="col">
     <view class="text">圆角方形</view>
-    <t-image src="{{imageSrc}}" width="72" height="72" shape="round" />
+    <t-image src="{{imageSrc}}" width="72" height="72" shape="round" aria-label="一个放置在墙角的黄色行李箱" />
   </view>
   <view class="col">
     <view class="text">圆形</view>
-    <t-image src="{{imageSrc}}" width="72" height="72" shape="circle" />
+    <t-image src="{{imageSrc}}" width="72" height="72" shape="circle" aria-label="一个放置在墙角的黄色行李箱" />
   </view>
 </view>
diff --git a/src/image/image.wxml b/src/image/image.wxml
@@ -3,6 +3,7 @@
   wx:if="{{isLoading}}"
   style="{{innerStyle}} {{customStyle}}"
   class="{{prefix}}-class {{classPrefix}} {{classPrefix}}__mask {{classPrefix}}--loading {{classPrefix}}--shape-{{shape}}"
+  aria-hidden="{{ariaHidden}}"
 >
   <t-loading
     wx:if="{{loading === 'default'}}"
@@ -22,9 +23,10 @@
   wx:elif="{{isFailed}}"
   style="{{innerStyle}} {{customStyle}}"
   class="{{prefix}}-class {{classPrefix}} {{classPrefix}}__mask {{classPrefix}}--faild {{classPrefix}}--shape-{{shape}}"
+  aria-hidden="{{ariaHidden}}"
 >
   <view wx:if="{{error === 'default'}}" style="font-size: 44rpx" class="{{prefix}}-class-load">
-    <t-icon name="close" />
+    <t-icon name="close" aria-role="img" aria-label="加载失败" />
   </view>
   <view wx:elif="{{error && error !== 'slot'}}" class="{{classPrefix}}__common {{prefix}}-class-load"> {{error}} </view>
   <slot wx:else name="error" class="{{prefix}}-class-load"></slot>
@@ -42,4 +44,6 @@
   bind:load="onLoaded"
   bind:error="onLoadError"
   show-menu-by-longpress="{{showMenuByLongpress}}"
+  aria-hidden="{{ariaHidden || isLoading || isFailed}}"
+  aria-label="{{ariaLabel}}"
 />