feat: 添加组件无障碍功能支持

src/packages/button/button.taro.tsx

@@ -161,6 +161,7 @@ export const Button = React.forwardRef<HTMLButtonElement, Partial<ButtonProps>>(
         className={buttonClassNames}
         style={{ ...getStyle, ...style }}
         onClick={(e) => handleClick(e as any)}
+        ariaRole="button"
       >
         <View className="nut-button-wrap">
           {loading && <Loading className="nut-icon-loading" />}

src/packages/checkbox/checkbox.taro.tsx

@@ -204,6 +204,8 @@ export const Checkbox: FC<
       )}
       {...rest}
       onClick={handleClick}
+      ariaRole="checkbox"
+      ariaChecked={innerChecked && !innerIndeterminate}
     >
       {renderCheckboxItem()}
     </View>

src/packages/checkbox/checkbox.tsx

@@ -209,6 +209,9 @@ export const Checkbox: FunctionComponent<
       )}
       {...rest}
       onClick={handleClick}
+      role="checkbox"
+      tabIndex={innerDisabled ? -1 : 0}
+      aria-checked={innerIndeterminate ? 'mixed' : innerChecked}
     >
       {renderCheckboxItem()}
     </div>

src/packages/countdown/countdown.taro.tsx

@@ -24,6 +24,7 @@ const defaultProps = {
   autoStart: true,
   time: 0,
   destroy: false,
+  ariaLabel: '倒计时',
 } as TaroCountDownProps
 
 const InternalCountDown: ForwardRefRenderFunction<
@@ -48,6 +49,7 @@ const InternalCountDown: ForwardRefRenderFunction<
     onRestart,
     onUpdate,
     children,
+    ariaLabel,
     ...rest
   } = { ...defaultProps, ...props }
   const classPrefix = 'nut-countdown'
@@ -64,6 +66,11 @@ const InternalCountDown: ForwardRefRenderFunction<
     diffTime: 0, // 设置了 startTime 时，与 date.now() 的差异
   })
 
+  const [role, setRole] = useState('')
+  // ARIA alert提示内容
+  const [alertContent, setAlertContent] = useState('')
+  const alertTimerRef = useRef<number>()
+
   // 时间戳转换 或 获取当前时间的时间戳
   const getTimeStamp = (timeStr?: string | number) => {
     if (!timeStr) return Date.now()
@@ -102,6 +109,12 @@ const InternalCountDown: ForwardRefRenderFunction<
           stateRef.current.counting = false
           pause()
           onEnd && onEnd()
+          setRole('alert')
+          setAlertContent(`${ariaLabel}倒计时结束`)
+          alertTimerRef.current = window.setTimeout(() => {
+            setRole('')
+            setAlertContent('')
+          }, 3000)
         }
 
         if (remainTime > 0) {
@@ -257,6 +270,9 @@ const InternalCountDown: ForwardRefRenderFunction<
 
   const componentWillUnmount = () => {
     destroy && cancelAnimationFrame(stateRef.current.timer)
+    if (alertTimerRef.current) {
+      clearTimeout(alertTimerRef.current)
+    }
   }
 
   const getUnit = (unit: string) => {
@@ -327,9 +343,13 @@ const InternalCountDown: ForwardRefRenderFunction<
         <View
           className={`${classPrefix} ${className}`}
           style={{ ...style }}
+          ariaLabel={ariaLabel}
           {...rest}
         >
           {renderTaroTime()}
+          <View role={role} style={{ display: 'none' }}>
+            {alertContent}
+          </View>
         </View>
       )}
     </>

src/packages/countdown/countdown.tsx

@@ -21,6 +21,7 @@ const defaultProps = {
   autoStart: true,
   time: 0,
   destroy: false,
+  ariaLabel: '倒计时',
 } as WebCountDownProps
 
 const InternalCountDown: ForwardRefRenderFunction<
@@ -45,6 +46,7 @@ const InternalCountDown: ForwardRefRenderFunction<
     onRestart,
     onUpdate,
     children,
+    ariaLabel,
     ...rest
   } = { ...defaultProps, ...props }
   const classPrefix = 'nut-countdown'
@@ -61,6 +63,11 @@ const InternalCountDown: ForwardRefRenderFunction<
     diffTime: 0, // 设置了 startTime 时，与 date.now() 的差异
   })
 
+  const [role, setRole] = useState('')
+  // ARIA alert提示内容
+  const [alertContent, setAlertContent] = useState('')
+  const alertTimerRef = useRef<number>()
+
   // 时间戳转换 或 获取当前时间的时间戳
   const getTimeStamp = (timeStr?: string | number) => {
     if (!timeStr) return Date.now()
@@ -97,6 +104,12 @@ const InternalCountDown: ForwardRefRenderFunction<
           stateRef.current.counting = false
           pause()
           onEnd && onEnd()
+          setRole('alert')
+          setAlertContent(`${ariaLabel}倒计时结束`)
+          alertTimerRef.current = window.setTimeout(() => {
+            setRole('')
+            setAlertContent('')
+          }, 3000)
         }
 
         if (remainTime > 0) {
@@ -270,6 +283,9 @@ const InternalCountDown: ForwardRefRenderFunction<
 
   const componentWillUnmount = () => {
     destroy && cancelAnimationFrame(stateRef.current.timer)
+    if (alertTimerRef.current) {
+      clearTimeout(alertTimerRef.current)
+    }
   }
 
   const renderTime = (() => {
@@ -282,9 +298,10 @@ const InternalCountDown: ForwardRefRenderFunction<
         <div
           className={`${classPrefix} ${className}`}
           style={{ ...style }}
+          aria-label={ariaLabel}
           {...rest}
           dangerouslySetInnerHTML={{
-            __html: `${renderTime}`,
+            __html: `${renderTime}<span style="display:none" role=${role}>${alertContent}</span>`,
           }}
         />
       )}

src/packages/countdown/demo.taro.tsx

@@ -12,6 +12,7 @@ import Demo6 from './demos/taro/demo6'
 import Demo7 from './demos/taro/demo7'
 import Demo8 from './demos/taro/demo8'
 import Demo9 from './demos/taro/demo9'
+import Demo10 from './demos/taro/demo10'
 
 const CountDownDemo = () => {
   const [translated] = useTranslate({
@@ -25,6 +26,7 @@ const CountDownDemo = () => {
       controlTime: '控制开始和暂停的倒计时',
       customStyle: '自定义展示样式',
       handleControl: '手动控制',
+      ariaBasic: 'ARIA基础用法',
     },
     'zh-TW': {
       basic: '基础用法',
@@ -36,6 +38,7 @@ const CountDownDemo = () => {
       controlTime: '控製開始和暫停的倒計時',
       customStyle: '自定義展示樣式',
       handleControl: '手動控製',
+      ariaBasic: 'ARIA基础用法',
     },
     'en-US': {
       basic: 'Basic Usage',
@@ -47,6 +50,7 @@ const CountDownDemo = () => {
       controlTime: 'Manual Control',
       customStyle: 'Custom Style',
       handleControl: 'Handle Control',
+      ariaBasic: 'ARIA Basic Usage',
     },
   })
 
@@ -76,6 +80,8 @@ const CountDownDemo = () => {
         <Demo8 />
         <View className="h2">{translated.handleControl}</View>
         <Demo9 />
+        <View className="h2">{translated.ariaBasic}</View>
+        <Demo10 />
       </ScrollView>
     </>
   )

src/packages/countdown/demo.tsx

@@ -9,6 +9,7 @@ import Demo6 from './demos/h5/demo6'
 import Demo7 from './demos/h5/demo7'
 import Demo8 from './demos/h5/demo8'
 import Demo9 from './demos/h5/demo9'
+import Demo10 from './demos/h5/demo10'
 
 const CountDownDemo = () => {
   const [translated] = useTranslate({
@@ -22,6 +23,7 @@ const CountDownDemo = () => {
       controlTime: '控制开始和暂停的倒计时',
       customStyle: '自定义展示样式',
       handleControl: '手动控制',
+      ariaBasic: 'ARIA基础用法',
     },
     'zh-TW': {
       basic: '基础用法',
@@ -33,6 +35,7 @@ const CountDownDemo = () => {
       controlTime: '控製開始和暫停的倒計時',
       customStyle: '自定義展示樣式',
       handleControl: '手動控製',
+      ariaBasic: 'ARIA基础用法',
     },
     'en-US': {
       basic: 'Basic Usage',
@@ -44,6 +47,7 @@ const CountDownDemo = () => {
       controlTime: 'Manual Control',
       customStyle: 'Custom Style',
       handleControl: 'Handle Control',
+      ariaBasic: 'ARIA Basic Usage',
     },
   })
 
@@ -68,6 +72,8 @@ const CountDownDemo = () => {
         <Demo8 />
         <h2>{translated.handleControl}</h2>
         <Demo9 />
+        <h2>{translated.ariaBasic}</h2>
+        <Demo10 />
       </div>
     </>
   )

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

@@ -0,0 +1,39 @@
+import React, { useRef } from 'react'
+import { Cell, CountDown } from '@nutui/nutui-react'
+
+const Demo1 = () => {
+  const stateRef = useRef({
+    endTime: Date.now() + 60 * 1000,
+  })
+  const onEnd = () => {
+    console.log('countdown: ended.')
+  }
+  return (
+    <>
+      <Cell>
+        <CountDown
+          endTime={stateRef.current.endTime}
+          type="primary"
+          onEnd={onEnd}
+          ariaLabel="双十一活动倒计时"
+        />
+      </Cell>
+      <Cell>
+        <CountDown
+          endTime={stateRef.current.endTime}
+          onEnd={onEnd}
+          ariaLabel="双十一活动倒计时"
+        />
+      </Cell>
+      <Cell>
+        <CountDown
+          endTime={stateRef.current.endTime}
+          type="text"
+          onEnd={onEnd}
+          ariaLabel="双十一活动倒计时"
+        />
+      </Cell>
+    </>
+  )
+}
+export default Demo1

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

@@ -0,0 +1,39 @@
+import React, { useRef } from 'react'
+import { Cell, CountDown } from '@nutui/nutui-react-taro'
+
+const Demo1 = () => {
+  const stateRef = useRef({
+    endTime: Date.now() + 60 * 1000,
+  })
+  const onEnd = () => {
+    console.log('countdown: ended.')
+  }
+  return (
+    <>
+      <Cell>
+        <CountDown
+          endTime={stateRef.current.endTime}
+          type="primary"
+          onEnd={onEnd}
+          ariaLabel="双十一活动倒计时"
+        />
+      </Cell>
+      <Cell>
+        <CountDown
+          endTime={stateRef.current.endTime}
+          onEnd={onEnd}
+          ariaLabel="双十一活动倒计时"
+        />
+      </Cell>
+      <Cell>
+        <CountDown
+          endTime={stateRef.current.endTime}
+          type="text"
+          onEnd={onEnd}
+          ariaLabel="双十一活动倒计时"
+        />
+      </Cell>
+    </>
+  )
+}
+export default Demo1

src/packages/dialog/content.taro.tsx

@@ -28,6 +28,8 @@ export const Content: FunctionComponent<
     style,
     className,
     onClick,
+    ariaRole,
+    ariaModal,
   } = { ...defaultContentProps, ...props }
 
   const classPrefix = 'nut-dialog'
@@ -59,6 +61,8 @@ export const Content: FunctionComponent<
       className={classNames(`${classPrefix}-outer`, className)}
       style={style}
       onClick={(e: ITouchEvent) => handleClick(e)}
+      ariaRole={ariaRole}
+      ariaModal={visible}
     >
       {close}
       {header}

src/packages/dialog/content.tsx

@@ -27,6 +27,7 @@ export const Content: FunctionComponent<
     style,
     className,
     onClick,
+    role,
   } = { ...defaultContentProps, ...props }
 
   const classPrefix = 'nut-dialog'
@@ -58,6 +59,8 @@ export const Content: FunctionComponent<
       className={classNames(`${classPrefix}-outer`, className)}
       style={style}
       onClick={handleClick}
+      role={role}
+      aria-modal={visible}
     >
       {close}
       {header}

src/packages/dialog/dialog.taro.tsx

@@ -45,6 +45,7 @@ const defaultProps = {
   onClose: () => {},
   onConfirm: () => {},
   onOverlayClick: () => true,
+  role: 'dialog',
 } as TaroDialogProps
 
 export const BaseDialog: FunctionComponent<Partial<TaroDialogProps>> & {
@@ -84,6 +85,7 @@ export const BaseDialog: FunctionComponent<Partial<TaroDialogProps>> & {
       onCancel,
       onConfirm,
       onOverlayClick,
+      role,
     },
     setParams,
   } = useParams(mergeProps(defaultProps, props))
@@ -283,6 +285,7 @@ export const BaseDialog: FunctionComponent<Partial<TaroDialogProps>> & {
         footer={renderFooter()}
         footerDirection={footerDirection}
         visible={visible}
+        ariaRole={role}
       >
         {content || children}
       </Content>
@@ -295,6 +298,7 @@ export const BaseDialog: FunctionComponent<Partial<TaroDialogProps>> & {
       style={{ display: visible ? 'block' : 'none' }}
       ref={refObject}
       catchMove={lockScroll}
+      ariaModal={visible}
     >
       {overlay && (
         <Overlay
@@ -305,6 +309,7 @@ export const BaseDialog: FunctionComponent<Partial<TaroDialogProps>> & {
           closeOnOverlayClick={closeOnOverlayClick}
           lockScroll={lockScroll}
           onClick={onHandleClickOverlay}
+          ariaRoledescription="背景蒙层"
         />
       )}
       {renderContent()}