Skip to content

Commit 2e7cbd2

Browse files
yangyanAurorayangyanAurora
committed
feat: 添加部分组件无障碍功能支持
- button - Checkbox - Countdown - Empty - Image - InputNumber - Price - Progress - NavBar - NoticeBar - Radio - Switch - Tabbar - Tabs - Toast
1 parent e9a80b8 commit 2e7cbd2

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

70 files changed

+827
-25
lines changed

‎src/packages/button/button.taro.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -159,6 +159,7 @@ export const Button = React.forwardRef<HTMLButtonElement, Partial<ButtonProps>>(
159159
className={buttonClassNames}
160160
style={{ ...getStyle, ...style }}
161161
onClick={(e) => handleClick(e as any)}
162+
ariaLabel="button"
162163
>
163164
<View className="nut-button-wrap">
164165
{loading && <Loading className="nut-icon-loading" />}

‎src/packages/checkbox/checkbox.taro.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -203,6 +203,8 @@ export const Checkbox: FC<
203203
)}
204204
{...rest}
205205
onClick={handleClick}
206+
ariaRole="checkbox"
207+
ariaChecked={innerChecked && !innerIndeterminate}
206208
>
207209
{renderCheckboxItem()}
208210
</View>

‎src/packages/checkbox/checkbox.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -208,6 +208,9 @@ export const Checkbox: FunctionComponent<
208208
)}
209209
{...rest}
210210
onClick={handleClick}
211+
role="checkbox"
212+
tabIndex={0}
213+
aria-checked={innerChecked && !innerIndeterminate}
211214
>
212215
{renderCheckboxItem()}
213216
</div>

‎src/packages/countdown/countdown.taro.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ const InternalCountDown: ForwardRefRenderFunction<
4848
onRestart,
4949
onUpdate,
5050
children,
51+
ariaRoledescription,
5152
...rest
5253
} = { ...defaultProps, ...props }
5354
const classPrefix = 'nut-countdown'
@@ -64,6 +65,10 @@ const InternalCountDown: ForwardRefRenderFunction<
6465
diffTime: 0, // 设置了 startTime 时，与 date.now() 的差异
6566
})
6667

68+
const [role, setRole] = useState('')
69+
// ARIA alert提示内容
70+
const [alertContent, setAlertContent] = useState('')
71+
6772
// 时间戳转换 或 获取当前时间的时间戳
6873
const getTimeStamp = (timeStr?: string | number) => {
6974
if (!timeStr) return Date.now()
@@ -102,6 +107,12 @@ const InternalCountDown: ForwardRefRenderFunction<
102107
stateRef.current.counting = false
103108
pause()
104109
onEnd && onEnd()
110+
setRole('alert')
111+
setAlertContent('时间到')
112+
setTimeout(() => {
113+
setRole('')
114+
setAlertContent('')
115+
}, 3000)
105116
}
106117

107118
if (remainTime > 0) {
@@ -327,9 +338,14 @@ const InternalCountDown: ForwardRefRenderFunction<
327338
<View
328339
className={`${classPrefix} ${className}`}
329340
style={{ ...style }}
341+
ariaLabel="倒计时"
342+
ariaRoledescription={ariaRoledescription}
330343
{...rest}
331344
>
332345
{renderTaroTime()}
346+
<View role={role} style={{ display: 'none' }}>
347+
{alertContent}
348+
</View>
333349
</View>
334350
)}
335351
</>

‎src/packages/countdown/countdown.tsx‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ const InternalCountDown: ForwardRefRenderFunction<
4545
onRestart,
4646
onUpdate,
4747
children,
48+
ariaRoledescription,
4849
...rest
4950
} = { ...defaultProps, ...props }
5051
const classPrefix = 'nut-countdown'
@@ -61,6 +62,10 @@ const InternalCountDown: ForwardRefRenderFunction<
6162
diffTime: 0, // 设置了 startTime 时，与 date.now() 的差异
6263
})
6364

65+
const [role, setRole] = useState('')
66+
// ARIA alert提示内容
67+
const [alertContent, setAlertContent] = useState('')
68+
6469
// 时间戳转换 或 获取当前时间的时间戳
6570
const getTimeStamp = (timeStr?: string | number) => {
6671
if (!timeStr) return Date.now()
@@ -97,6 +102,12 @@ const InternalCountDown: ForwardRefRenderFunction<
97102
stateRef.current.counting = false
98103
pause()
99104
onEnd && onEnd()
105+
setRole('alert')
106+
setAlertContent('时间到')
107+
setTimeout(() => {
108+
setRole('')
109+
setAlertContent('')
110+
}, 3000)
100111
}
101112

102113
if (remainTime > 0) {
@@ -282,9 +293,11 @@ const InternalCountDown: ForwardRefRenderFunction<
282293
<div
283294
className={`${classPrefix} ${className}`}
284295
style={{ ...style }}
296+
aria-label="倒计时"
297+
aria-roledescription={ariaRoledescription}
285298
{...rest}
286299
dangerouslySetInnerHTML={{
287-
__html: `${renderTime}`,
300+
__html: `${renderTime}<span style="display:none" role=${role}>${alertContent}</span>`,
288301
}}
289302
/>
290303
)}

‎src/packages/countdown/demo.taro.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import Demo6 from './demos/taro/demo6'
1212
import Demo7 from './demos/taro/demo7'
1313
import Demo8 from './demos/taro/demo8'
1414
import Demo9 from './demos/taro/demo9'
15+
import Demo10 from './demos/taro/demo10'
1516

1617
const CountDownDemo = () => {
1718
const [translated] = useTranslate({
@@ -25,6 +26,7 @@ const CountDownDemo = () => {
2526
controlTime: '控制开始和暂停的倒计时',
2627
customStyle: '自定义展示样式',
2728
handleControl: '手动控制',
29+
ariaBasic: 'ARIA基础用法',
2830
},
2931
'zh-TW': {
3032
basic: '基础用法',
@@ -36,6 +38,7 @@ const CountDownDemo = () => {
3638
controlTime: '控製開始和暫停的倒計時',
3739
customStyle: '自定義展示樣式',
3840
handleControl: '手動控製',
41+
ariaBasic: 'ARIA基础用法',
3942
},
4043
'en-US': {
4144
basic: 'Basic Usage',
@@ -47,6 +50,7 @@ const CountDownDemo = () => {
4750
controlTime: 'Manual Control',
4851
customStyle: 'Custom Style',
4952
handleControl: 'Handle Control',
53+
ariaBasic: 'ARIA Basic Usage',
5054
},
5155
})
5256

@@ -76,6 +80,8 @@ const CountDownDemo = () => {
7680
<Demo8 />
7781
<View className="h2">{translated.handleControl}</View>
7882
<Demo9 />
83+
<View className="h2">{translated.ariaBasic}</View>
84+
<Demo10 />
7985
</ScrollView>
8086
</>
8187
)

‎src/packages/countdown/demo.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import Demo6 from './demos/h5/demo6'
99
import Demo7 from './demos/h5/demo7'
1010
import Demo8 from './demos/h5/demo8'
1111
import Demo9 from './demos/h5/demo9'
12+
import Demo10 from './demos/h5/demo10'
1213

1314
const CountDownDemo = () => {
1415
const [translated] = useTranslate({
@@ -22,6 +23,7 @@ const CountDownDemo = () => {
2223
controlTime: '控制开始和暂停的倒计时',
2324
customStyle: '自定义展示样式',
2425
handleControl: '手动控制',
26+
ariaBasic: 'ARIA基础用法',
2527
},
2628
'zh-TW': {
2729
basic: '基础用法',
@@ -33,6 +35,7 @@ const CountDownDemo = () => {
3335
controlTime: '控製開始和暫停的倒計時',
3436
customStyle: '自定義展示樣式',
3537
handleControl: '手動控製',
38+
ariaBasic: 'ARIA基础用法',
3639
},
3740
'en-US': {
3841
basic: 'Basic Usage',
@@ -44,6 +47,7 @@ const CountDownDemo = () => {
4447
controlTime: 'Manual Control',
4548
customStyle: 'Custom Style',
4649
handleControl: 'Handle Control',
50+
ariaBasic: 'ARIA Basic Usage',
4751
},
4852
})
4953

@@ -68,6 +72,8 @@ const CountDownDemo = () => {
6872
<Demo8 />
6973
<h2>{translated.handleControl}</h2>
7074
<Demo9 />
75+
<h2>{translated.ariaBasic}</h2>
76+
<Demo10 />
7177
</div>
7278
</>
7379
)

‎src/packages/countdown/demos/h5/demo10.tsx‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import React, { useRef } from 'react'
2+
import { Cell, CountDown } from '@nutui/nutui-react'
3+
4+
const Demo1 = () => {
5+
const stateRef = useRef({
6+
endTime: Date.now() + 10 * 1000,
7+
})
8+
const onEnd = () => {
9+
console.log('countdown: ended.')
10+
}
11+
return (
12+
<>
13+
<Cell>
14+
<CountDown
15+
endTime={stateRef.current.endTime}
16+
type="primary"
17+
onEnd={onEnd}
18+
ariaRoledescription="双十一活动"
19+
/>
20+
</Cell>
21+
<Cell>
22+
<CountDown
23+
endTime={stateRef.current.endTime}
24+
onEnd={onEnd}
25+
ariaRoledescription="双十一活动"
26+
/>
27+
</Cell>
28+
<Cell>
29+
<CountDown
30+
endTime={stateRef.current.endTime}
31+
type="text"
32+
onEnd={onEnd}
33+
ariaRoledescription="双十一活动"
34+
/>
35+
</Cell>
36+
</>
37+
)
38+
}
39+
export default Demo1

‎src/packages/countdown/demos/taro/demo10.tsx‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import React, { useRef } from 'react'
2+
import { Cell, CountDown } from '@nutui/nutui-react-taro'
3+
4+
const Demo1 = () => {
5+
const stateRef = useRef({
6+
endTime: Date.now() + 60 * 1000,
7+
})
8+
const onEnd = () => {
9+
console.log('countdown: ended.')
10+
}
11+
return (
12+
<>
13+
<Cell>
14+
<CountDown
15+
endTime={stateRef.current.endTime}
16+
type="primary"
17+
onEnd={onEnd}
18+
ariaRoledescription="双十一活动"
19+
/>
20+
</Cell>
21+
<Cell>
22+
<CountDown
23+
endTime={stateRef.current.endTime}
24+
onEnd={onEnd}
25+
ariaRoledescription="双十一活动"
26+
/>
27+
</Cell>
28+
<Cell>
29+
<CountDown
30+
endTime={stateRef.current.endTime}
31+
type="text"
32+
onEnd={onEnd}
33+
ariaRoledescription="双十一活动"
34+
/>
35+
</Cell>
36+
</>
37+
)
38+
}
39+
export default Demo1

‎src/packages/dialog/content.taro.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,8 @@ export const Content: FunctionComponent<
2828
style,
2929
className,
3030
onClick,
31+
ariaRole,
32+
ariaModal,
3133
} = { ...defaultContentProps, ...props }
3234

3335
const classPrefix = 'nut-dialog'
@@ -59,6 +61,8 @@ export const Content: FunctionComponent<
5961
className={classNames(`${classPrefix}-outer`, className)}
6062
style={style}
6163
onClick={(e: ITouchEvent) => handleClick(e)}
64+
ariaRole={ariaRole}
65+
ariaModal={visible}
6266
>
6367
{close}
6468
{header}

0 commit comments

Comments
 (0)