Skip to content

Commit cc7d3f9

Browse files
yaogengzhuyaogengzhu
authored
feat(loading): support aria (#1534)
* feat(loading): loading support aira * test: update snap * feat: 备选方案WIP * test: update snap
1 parent 4383473 commit cc7d3f9

File tree

3 files changed

+48
-2
lines changed

3 files changed

+48
-2
lines changed

‎src/image-viewer/__test__/__snapshots__/index.test.js.snap‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,8 @@ exports[`image-viewer :base 1`] = `
2525
style=""
2626
>
2727
<wx-view
28+
ariaLabel="加载中"
29+
ariaRole="img"
2830
class="t-class-indicator t-loading__spinner t-loading__spinner--dots "
2931
style="width: 44rpx; height: 44rpx; color: inherit ; animation-duration: 0.8s; animation-play-state: running;"
3032
>
@@ -42,6 +44,8 @@ exports[`image-viewer :base 1`] = `
4244
/>
4345
</wx-view>
4446
<wx-view
47+
ariaHidden="{{true}}"
48+
ariaLabel=""
4549
class="t-loading__text t-loading__text--horizontal t-class-text"
4650
/>
4751
</wx-view>
@@ -91,6 +95,8 @@ exports[`image-viewer :base 2`] = `
9195
style=""
9296
>
9397
<wx-view
98+
ariaLabel="加载中"
99+
ariaRole="img"
94100
class="t-class-indicator t-loading__spinner t-loading__spinner--dots "
95101
style="width: 44rpx; height: 44rpx; color: inherit ; animation-duration: 0.8s; animation-play-state: running;"
96102
>
@@ -108,6 +114,8 @@ exports[`image-viewer :base 2`] = `
108114
/>
109115
</wx-view>
110116
<wx-view
117+
ariaHidden="{{true}}"
118+
ariaLabel=""
111119
class="t-loading__text t-loading__text--horizontal t-class-text"
112120
/>
113121
</wx-view>
@@ -157,6 +165,8 @@ exports[`image-viewer :base 3`] = `
157165
style=""
158166
>
159167
<wx-view
168+
ariaLabel="加载中"
169+
ariaRole="img"
160170
class="t-class-indicator t-loading__spinner t-loading__spinner--dots "
161171
style="width: 44rpx; height: 44rpx; color: inherit ; animation-duration: 0.8s; animation-play-state: running;"
162172
>
@@ -174,6 +184,8 @@ exports[`image-viewer :base 3`] = `
174184
/>
175185
</wx-view>
176186
<wx-view
187+
ariaHidden="{{true}}"
188+
ariaLabel=""
177189
class="t-loading__text t-loading__text--horizontal t-class-text"
178190
/>
179191
</wx-view>

‎src/loading/loading.wxml‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@
1313
wx:if="{{indicator && theme != 'error'}}"
1414
class="{{prefix}}-class-indicator {{classPrefix}}__spinner {{classPrefix}}__spinner--{{ theme }} {{reverse ? 'reverse' : ''}}"
1515
style="width: {{ utils.addUnit(size) }}; height: {{ utils.addUnit(size) }}; {{inheritColor ? 'color: inherit' : ''}} {{indicator ? '' : 'display:none'}}; {{duration ? 'animation-duration: ' + duration / 1000 + 's;' : ''}} animation-play-state: {{pause ? 'paused' : 'running'}};"
16+
aria-role="{{ theme !== 'error' ? ariaRole || 'img' : ''}}"
17+
aria-label="{{ ariaLabel || text || '加载中' }}"
1618
>
1719
<view wx:if="{{ theme === 'spinner' }}" wx:for="{{12}}" wx:key="index" class="{{classPrefix}}__dot" />
1820
<view wx:if="{{ theme === 'circular' }}" class="{{classPrefix}}__circular" />
@@ -31,10 +33,14 @@
3133
></view>
3234
</block>
3335
</view>
34-
<view class="{{utils.cls(classPrefix + '__text', [layout])}} {{prefix}}-class-text">
36+
<view
37+
class="{{utils.cls(classPrefix + '__text', [layout])}} {{prefix}}-class-text"
38+
aria-hidden="{{indicator && theme != 'error'}}"
39+
aria-label="{{ ariaLabel || text }}"
40+
>
3541
<view wx:if="{{theme === 'error'}}">
3642
加载失败
37-
<text class="{{classPrefix}}__refresh-btn" bind:tap="refreshPage">刷新</text>
43+
<text class="{{classPrefix}}__refresh-btn" bind:tap="refreshPage" aria-role="button">刷新</text>
3844
</view>
3945
<block wx:if="{{text && text !== 'slot'}}">{{text}}</block>
4046
<slot name="text" />

‎src/swiper/__test__/__snapshots__/index.test.js.snap‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,8 @@ exports[`swiper snapshot 1`] = `
5555
style=""
5656
>
5757
<wx-view
58+
ariaLabel="加载中"
59+
ariaRole="img"
5860
class="t-class-indicator t-loading__spinner t-loading__spinner--dots "
5961
style="width: 44rpx; height: 44rpx; color: inherit ; animation-duration: 0.8s; animation-play-state: running;"
6062
>
@@ -72,6 +74,8 @@ exports[`swiper snapshot 1`] = `
7274
/>
7375
</wx-view>
7476
<wx-view
77+
ariaHidden="{{true}}"
78+
ariaLabel=""
7579
class="t-loading__text t-loading__text--horizontal t-class-text"
7680
/>
7781
</wx-view>
@@ -124,6 +128,8 @@ exports[`swiper snapshot 1`] = `
124128
style=""
125129
>
126130
<wx-view
131+
ariaLabel="加载中"
132+
ariaRole="img"
127133
class="t-class-indicator t-loading__spinner t-loading__spinner--dots "
128134
style="width: 44rpx; height: 44rpx; color: inherit ; animation-duration: 0.8s; animation-play-state: running;"
129135
>
@@ -141,6 +147,8 @@ exports[`swiper snapshot 1`] = `
141147
/>
142148
</wx-view>
143149
<wx-view
150+
ariaHidden="{{true}}"
151+
ariaLabel=""
144152
class="t-loading__text t-loading__text--horizontal t-class-text"
145153
/>
146154
</wx-view>
@@ -193,6 +201,8 @@ exports[`swiper snapshot 1`] = `
193201
style=""
194202
>
195203
<wx-view
204+
ariaLabel="加载中"
205+
ariaRole="img"
196206
class="t-class-indicator t-loading__spinner t-loading__spinner--dots "
197207
style="width: 44rpx; height: 44rpx; color: inherit ; animation-duration: 0.8s; animation-play-state: running;"
198208
>
@@ -210,6 +220,8 @@ exports[`swiper snapshot 1`] = `
210220
/>
211221
</wx-view>
212222
<wx-view
223+
ariaHidden="{{true}}"
224+
ariaLabel=""
213225
class="t-loading__text t-loading__text--horizontal t-class-text"
214226
/>
215227
</wx-view>
@@ -262,6 +274,8 @@ exports[`swiper snapshot 1`] = `
262274
style=""
263275
>
264276
<wx-view
277+
ariaLabel="加载中"
278+
ariaRole="img"
265279
class="t-class-indicator t-loading__spinner t-loading__spinner--dots "
266280
style="width: 44rpx; height: 44rpx; color: inherit ; animation-duration: 0.8s; animation-play-state: running;"
267281
>
@@ -279,6 +293,8 @@ exports[`swiper snapshot 1`] = `
279293
/>
280294
</wx-view>
281295
<wx-view
296+
ariaHidden="{{true}}"
297+
ariaLabel=""
282298
class="t-loading__text t-loading__text--horizontal t-class-text"
283299
/>
284300
</wx-view>
@@ -331,6 +347,8 @@ exports[`swiper snapshot 1`] = `
331347
style=""
332348
>
333349
<wx-view
350+
ariaLabel="加载中"
351+
ariaRole="img"
334352
class="t-class-indicator t-loading__spinner t-loading__spinner--dots "
335353
style="width: 44rpx; height: 44rpx; color: inherit ; animation-duration: 0.8s; animation-play-state: running;"
336354
>
@@ -348,6 +366,8 @@ exports[`swiper snapshot 1`] = `
348366
/>
349367
</wx-view>
350368
<wx-view
369+
ariaHidden="{{true}}"
370+
ariaLabel=""
351371
class="t-loading__text t-loading__text--horizontal t-class-text"
352372
/>
353373
</wx-view>
@@ -438,6 +458,8 @@ exports[`swiper snapshot 1`] = `
438458
style=""
439459
>
440460
<wx-view
461+
ariaLabel="加载中"
462+
ariaRole="img"
441463
class="t-class-indicator t-loading__spinner t-loading__spinner--dots "
442464
style="width: 44rpx; height: 44rpx; color: inherit ; animation-duration: 0.8s; animation-play-state: running;"
443465
>
@@ -455,6 +477,8 @@ exports[`swiper snapshot 1`] = `
455477
/>
456478
</wx-view>
457479
<wx-view
480+
ariaHidden="{{true}}"
481+
ariaLabel=""
458482
class="t-loading__text t-loading__text--horizontal t-class-text"
459483
/>
460484
</wx-view>
@@ -507,6 +531,8 @@ exports[`swiper snapshot 1`] = `
507531
style=""
508532
>
509533
<wx-view
534+
ariaLabel="加载中"
535+
ariaRole="img"
510536
class="t-class-indicator t-loading__spinner t-loading__spinner--dots "
511537
style="width: 44rpx; height: 44rpx; color: inherit ; animation-duration: 0.8s; animation-play-state: running;"
512538
>
@@ -524,6 +550,8 @@ exports[`swiper snapshot 1`] = `
524550
/>
525551
</wx-view>
526552
<wx-view
553+
ariaHidden="{{true}}"
554+
ariaLabel=""
527555
class="t-loading__text t-loading__text--horizontal t-class-text"
528556
/>
529557
</wx-view>

0 commit comments

Comments
 (0)