Skip to content

Commit cd7136b

Browse files
gzzhanghaogzzhanghao
authored
feat(calendar): 增加无障碍支持 (#1217)
* feat(calendar): add a11y support * feat(collapse): add a11y support * feat(calendar): add 24rpx padding for close button
1 parent 81399d3 commit cd7136b

File tree

8 files changed

+155
-5
lines changed

8 files changed

+155
-5
lines changed

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

Lines changed: 99 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ exports[`calendar :base 1`] = `
1010
bind:visible-change="handleClose"
1111
>
1212
<wx-view
13+
ariaModal="true"
14+
ariaRole="dialog"
1315
class="t-popup t-popup--bottom t-fade-enter t-fade-enter-active t-class"
1416
style="z-index:11500;"
1517
bind:transitionend="onTransitionEnd"
@@ -26,6 +28,7 @@ exports[`calendar :base 1`] = `
2628
>
2729
<wx-view
2830
class="t-calendar__title"
31+
tabindex="0"
2932
>
3033
<wx-text>
3134
请选择日期
@@ -37,8 +40,8 @@ exports[`calendar :base 1`] = `
3740
>
3841
<wx-view
3942
ariaHidden="{{false}}"
40-
ariaLabel=""
41-
ariaRole=""
43+
ariaLabel="关闭"
44+
ariaRole="button"
4245
class="t-icon t-class"
4346
style="font-size: 24px"
4447
bind:tap="onTap"
@@ -49,6 +52,7 @@ exports[`calendar :base 1`] = `
4952
</wx-view>
5053
</t-icon>
5154
<wx-view
55+
ariaHidden="{{true}}"
5256
class="t-calendar__days"
5357
>
5458
<wx-view
@@ -110,6 +114,9 @@ exports[`calendar :base 1`] = `
110114
<wx-view />
111115
<wx-view />
112116
<wx-view
117+
ariaDisabled="{{false}}"
118+
ariaLabel="10月1日, 星期六"
119+
ariaRole="button"
113120
class="t-calendar__dates-item t-calendar__dates-item--"
114121
data-date="{{
115122
Object {
@@ -127,6 +134,9 @@ exports[`calendar :base 1`] = `
127134
128135
</wx-view>
129136
<wx-view
137+
ariaDisabled="{{false}}"
138+
ariaLabel="10月2日, 星期日"
139+
ariaRole="button"
130140
class="t-calendar__dates-item t-calendar__dates-item--"
131141
data-date="{{
132142
Object {
@@ -144,6 +154,9 @@ exports[`calendar :base 1`] = `
144154
145155
</wx-view>
146156
<wx-view
157+
ariaDisabled="{{false}}"
158+
ariaLabel="10月3日, 星期一"
159+
ariaRole="button"
147160
class="t-calendar__dates-item t-calendar__dates-item--"
148161
data-date="{{
149162
Object {
@@ -161,6 +174,9 @@ exports[`calendar :base 1`] = `
161174
162175
</wx-view>
163176
<wx-view
177+
ariaDisabled="{{false}}"
178+
ariaLabel="10月4日, 星期二"
179+
ariaRole="button"
164180
class="t-calendar__dates-item t-calendar__dates-item--"
165181
data-date="{{
166182
Object {
@@ -178,6 +194,9 @@ exports[`calendar :base 1`] = `
178194
179195
</wx-view>
180196
<wx-view
197+
ariaDisabled="{{false}}"
198+
ariaLabel="10月5日, 星期三"
199+
ariaRole="button"
181200
class="t-calendar__dates-item t-calendar__dates-item--"
182201
data-date="{{
183202
Object {
@@ -195,6 +214,9 @@ exports[`calendar :base 1`] = `
195214
196215
</wx-view>
197216
<wx-view
217+
ariaDisabled="{{false}}"
218+
ariaLabel="10月6日, 星期四"
219+
ariaRole="button"
198220
class="t-calendar__dates-item t-calendar__dates-item--"
199221
data-date="{{
200222
Object {
@@ -212,6 +234,9 @@ exports[`calendar :base 1`] = `
212234
213235
</wx-view>
214236
<wx-view
237+
ariaDisabled="{{false}}"
238+
ariaLabel="10月7日, 星期五"
239+
ariaRole="button"
215240
class="t-calendar__dates-item t-calendar__dates-item--"
216241
data-date="{{
217242
Object {
@@ -229,6 +254,9 @@ exports[`calendar :base 1`] = `
229254
230255
</wx-view>
231256
<wx-view
257+
ariaDisabled="{{false}}"
258+
ariaLabel="10月8日, 星期六"
259+
ariaRole="button"
232260
class="t-calendar__dates-item t-calendar__dates-item--"
233261
data-date="{{
234262
Object {
@@ -246,6 +274,9 @@ exports[`calendar :base 1`] = `
246274
247275
</wx-view>
248276
<wx-view
277+
ariaDisabled="{{false}}"
278+
ariaLabel="10月9日, 星期日"
279+
ariaRole="button"
249280
class="t-calendar__dates-item t-calendar__dates-item--"
250281
data-date="{{
251282
Object {
@@ -263,6 +294,9 @@ exports[`calendar :base 1`] = `
263294
264295
</wx-view>
265296
<wx-view
297+
ariaDisabled="{{false}}"
298+
ariaLabel="10月10日, 星期一"
299+
ariaRole="button"
266300
class="t-calendar__dates-item t-calendar__dates-item--"
267301
data-date="{{
268302
Object {
@@ -280,6 +314,9 @@ exports[`calendar :base 1`] = `
280314
281315
</wx-view>
282316
<wx-view
317+
ariaDisabled="{{false}}"
318+
ariaLabel="10月11日, 星期二"
319+
ariaRole="button"
283320
class="t-calendar__dates-item t-calendar__dates-item--"
284321
data-date="{{
285322
Object {
@@ -297,6 +334,9 @@ exports[`calendar :base 1`] = `
297334
298335
</wx-view>
299336
<wx-view
337+
ariaDisabled="{{false}}"
338+
ariaLabel="10月12日, 星期三"
339+
ariaRole="button"
300340
class="t-calendar__dates-item t-calendar__dates-item--"
301341
data-date="{{
302342
Object {
@@ -314,6 +354,9 @@ exports[`calendar :base 1`] = `
314354
315355
</wx-view>
316356
<wx-view
357+
ariaDisabled="{{false}}"
358+
ariaLabel="10月13日, 星期四"
359+
ariaRole="button"
317360
class="t-calendar__dates-item t-calendar__dates-item--"
318361
data-date="{{
319362
Object {
@@ -331,6 +374,9 @@ exports[`calendar :base 1`] = `
331374
332375
</wx-view>
333376
<wx-view
377+
ariaDisabled="{{false}}"
378+
ariaLabel="10月14日, 星期五"
379+
ariaRole="button"
334380
class="t-calendar__dates-item t-calendar__dates-item--"
335381
data-date="{{
336382
Object {
@@ -348,6 +394,9 @@ exports[`calendar :base 1`] = `
348394
349395
</wx-view>
350396
<wx-view
397+
ariaDisabled="{{false}}"
398+
ariaLabel="10月15日, 星期六"
399+
ariaRole="button"
351400
class="t-calendar__dates-item t-calendar__dates-item--"
352401
data-date="{{
353402
Object {
@@ -365,6 +414,9 @@ exports[`calendar :base 1`] = `
365414
366415
</wx-view>
367416
<wx-view
417+
ariaDisabled="{{false}}"
418+
ariaLabel="已选中, 10月16日, 星期日"
419+
ariaRole="button"
368420
class="t-calendar__dates-item t-calendar__dates-item--selected"
369421
data-date="{{
370422
Object {
@@ -382,6 +434,9 @@ exports[`calendar :base 1`] = `
382434
383435
</wx-view>
384436
<wx-view
437+
ariaDisabled="{{false}}"
438+
ariaLabel="10月17日, 星期一"
439+
ariaRole="button"
385440
class="t-calendar__dates-item t-calendar__dates-item--"
386441
data-date="{{
387442
Object {
@@ -399,6 +454,9 @@ exports[`calendar :base 1`] = `
399454
400455
</wx-view>
401456
<wx-view
457+
ariaDisabled="{{false}}"
458+
ariaLabel="10月18日, 星期二"
459+
ariaRole="button"
402460
class="t-calendar__dates-item t-calendar__dates-item--"
403461
data-date="{{
404462
Object {
@@ -416,6 +474,9 @@ exports[`calendar :base 1`] = `
416474
417475
</wx-view>
418476
<wx-view
477+
ariaDisabled="{{false}}"
478+
ariaLabel="10月19日, 星期三"
479+
ariaRole="button"
419480
class="t-calendar__dates-item t-calendar__dates-item--"
420481
data-date="{{
421482
Object {
@@ -433,6 +494,9 @@ exports[`calendar :base 1`] = `
433494
434495
</wx-view>
435496
<wx-view
497+
ariaDisabled="{{false}}"
498+
ariaLabel="10月20日, 星期四"
499+
ariaRole="button"
436500
class="t-calendar__dates-item t-calendar__dates-item--"
437501
data-date="{{
438502
Object {
@@ -450,6 +514,9 @@ exports[`calendar :base 1`] = `
450514
451515
</wx-view>
452516
<wx-view
517+
ariaDisabled="{{false}}"
518+
ariaLabel="10月21日, 星期五"
519+
ariaRole="button"
453520
class="t-calendar__dates-item t-calendar__dates-item--"
454521
data-date="{{
455522
Object {
@@ -467,6 +534,9 @@ exports[`calendar :base 1`] = `
467534
468535
</wx-view>
469536
<wx-view
537+
ariaDisabled="{{false}}"
538+
ariaLabel="10月22日, 星期六"
539+
ariaRole="button"
470540
class="t-calendar__dates-item t-calendar__dates-item--"
471541
data-date="{{
472542
Object {
@@ -484,6 +554,9 @@ exports[`calendar :base 1`] = `
484554
485555
</wx-view>
486556
<wx-view
557+
ariaDisabled="{{false}}"
558+
ariaLabel="10月23日, 星期日"
559+
ariaRole="button"
487560
class="t-calendar__dates-item t-calendar__dates-item--"
488561
data-date="{{
489562
Object {
@@ -501,6 +574,9 @@ exports[`calendar :base 1`] = `
501574
502575
</wx-view>
503576
<wx-view
577+
ariaDisabled="{{false}}"
578+
ariaLabel="10月24日, 星期一"
579+
ariaRole="button"
504580
class="t-calendar__dates-item t-calendar__dates-item--"
505581
data-date="{{
506582
Object {
@@ -518,6 +594,9 @@ exports[`calendar :base 1`] = `
518594
519595
</wx-view>
520596
<wx-view
597+
ariaDisabled="{{false}}"
598+
ariaLabel="10月25日, 星期二"
599+
ariaRole="button"
521600
class="t-calendar__dates-item t-calendar__dates-item--"
522601
data-date="{{
523602
Object {
@@ -535,6 +614,9 @@ exports[`calendar :base 1`] = `
535614
536615
</wx-view>
537616
<wx-view
617+
ariaDisabled="{{false}}"
618+
ariaLabel="10月26日, 星期三"
619+
ariaRole="button"
538620
class="t-calendar__dates-item t-calendar__dates-item--"
539621
data-date="{{
540622
Object {
@@ -552,6 +634,9 @@ exports[`calendar :base 1`] = `
552634
553635
</wx-view>
554636
<wx-view
637+
ariaDisabled="{{false}}"
638+
ariaLabel="10月27日, 星期四"
639+
ariaRole="button"
555640
class="t-calendar__dates-item t-calendar__dates-item--"
556641
data-date="{{
557642
Object {
@@ -569,6 +654,9 @@ exports[`calendar :base 1`] = `
569654
570655
</wx-view>
571656
<wx-view
657+
ariaDisabled="{{false}}"
658+
ariaLabel="10月28日, 星期五"
659+
ariaRole="button"
572660
class="t-calendar__dates-item t-calendar__dates-item--"
573661
data-date="{{
574662
Object {
@@ -586,6 +674,9 @@ exports[`calendar :base 1`] = `
586674
587675
</wx-view>
588676
<wx-view
677+
ariaDisabled="{{false}}"
678+
ariaLabel="10月29日, 星期六"
679+
ariaRole="button"
589680
class="t-calendar__dates-item t-calendar__dates-item--"
590681
data-date="{{
591682
Object {
@@ -603,6 +694,9 @@ exports[`calendar :base 1`] = `
603694
604695
</wx-view>
605696
<wx-view
697+
ariaDisabled="{{false}}"
698+
ariaLabel="10月30日, 星期日"
699+
ariaRole="button"
606700
class="t-calendar__dates-item t-calendar__dates-item--"
607701
data-date="{{
608702
Object {
@@ -620,6 +714,9 @@ exports[`calendar :base 1`] = `
620714
621715
</wx-view>
622716
<wx-view
717+
ariaDisabled="{{false}}"
718+
ariaLabel="10月31日, 星期一"
719+
ariaRole="button"
623720
class="t-calendar__dates-item t-calendar__dates-item--"
624721
data-date="{{
625722
Object {

‎src/calendar/calendar.less‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,8 @@
3030
position: absolute;
3131
top: 32rpx;
3232
right: 32rpx;
33+
margin: -24rpx;
34+
padding: 24rpx;
3335
}
3436

3537
&__days {

‎src/calendar/calendar.wxml‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,22 @@
1+
<wxs src="./calendar.wxs" module="_" />
12
<import src="../common/template/button.wxml" />
23

34
<view style="{{ customStyle }}">
45
<t-popup visible="{{visible}}" bind:visible-change="handleClose" placement="bottom">
56
<view class="{{classPrefix}}">
6-
<view class="{{classPrefix}}__title">
7+
<view class="{{classPrefix}}__title" tabindex="0">
78
<slot wx:if="{{title === 'slot'}}" name="title" />
89
<text wx:else>{{ title || '请选择日期' }}</text>
910
</view>
10-
<t-icon name="close" class="{{classPrefix}}__close-btn" size="24" bind:tap="handleClose" />
11-
<view class="{{classPrefix}}__days">
11+
<t-icon
12+
name="close"
13+
class="{{classPrefix}}__close-btn"
14+
size="24"
15+
aria-role="button"
16+
aria-label="关闭"
17+
bind:tap="handleClose"
18+
/>
19+
<view aria-hidden class="{{classPrefix}}__days">
1220
<view wx:for="{{days}}" wx:key="index" class="{{classPrefix}}__days-item">{{ item }}</view>
1321
</view>
1422
<scroll-view
@@ -30,6 +38,9 @@
3038
data-year="{{item.year}}"
3139
data-month="{{item.month}}"
3240
data-date="{{dateItem}}"
41+
aria-role="button"
42+
aria-label="{{_.getDateLabel(item, dateItem)}}"
43+
aria-disabled="{{dateItem.type === 'disabled'}}"
3344
bind:tap="handleSelect"
3445
>
3546
<view wx:if="{{dateItem.prefix}}" class="{{classPrefix}}__dates-item-prefix"

0 commit comments

Comments
 (0)