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

src/packages/button/button.taro.tsx

@@ -83,6 +83,7 @@
       ...rest
     } = { ...defaultProps, ...props }
 
+    const role = 'button'
     const getStyle = useMemo(() => {
       const style: CSSProperties = {}
       if (color) {
@@ -161,6 +162,8 @@
         className={buttonClassNames}
         style={{ ...getStyle, ...style }}
         onClick={(e) => handleClick(e as any)}
+        ariaRole={role}
+        ariaDisabled={disabled}
       >
         <View className="nut-button-wrap">
           {loading && <Loading className="nut-icon-loading" />}

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<ReturnType<typeof setTimeout>>()
+
   // 时间戳转换 或 获取当前时间的时间戳
   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 = 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: '手动控制',
+      supportAria: '支持ARIA',
     },
     'zh-TW': {
       basic: '基础用法',
@@ -36,6 +38,7 @@ const CountDownDemo = () => {
       controlTime: '控製開始和暫停的倒計時',
       customStyle: '自定義展示樣式',
       handleControl: '手動控製',
+      supportAria: '支持ARIA',
     },
     'en-US': {
       basic: 'Basic Usage',
@@ -47,6 +50,7 @@ const CountDownDemo = () => {
       controlTime: 'Manual Control',
       customStyle: 'Custom Style',
       handleControl: 'Handle Control',
+      supportAria: 'support ARIA',
     },
   })
 
@@ -76,6 +80,8 @@ const CountDownDemo = () => {
         <Demo8 />
         <View className="h2">{translated.handleControl}</View>
         <Demo9 />
+        <View className="h2">{translated.supportAria}</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,9 +23,10 @@ const CountDownDemo = () => {
       controlTime: '控制开始和暂停的倒计时',
       customStyle: '自定义展示样式',
       handleControl: '手动控制',
+      supportAria: '支持ARIA',
     },
     'zh-TW': {
-      basic: '基础用法',
+      basic: '基礎用法',
       remainingTime: '剩余時間用法',
       format: '自定義格式',
       millisecond: '毫秒級渲染',
@@ -33,6 +35,7 @@ const CountDownDemo = () => {
       controlTime: '控製開始和暫停的倒計時',
       customStyle: '自定義展示樣式',
       handleControl: '手動控製',
+      supportAria: '支持ARIA',
     },
     'en-US': {
       basic: 'Basic Usage',
@@ -44,6 +47,7 @@ const CountDownDemo = () => {
       controlTime: 'Manual Control',
       customStyle: 'Custom Style',
       handleControl: 'Handle Control',
+      supportAria: 'support ARIA',
     },
   })
 
@@ -68,6 +72,8 @@ const CountDownDemo = () => {
         <Demo8 />
         <h2>{translated.handleControl}</h2>
         <Demo9 />
+        <h2>{translated.supportAria}</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 @@
     style,
     className,
     onClick,
+    ariaRole,
+    ariaLabel,
   } = { ...defaultContentProps, ...props }
 
   const classPrefix = 'nut-dialog'
@@ -59,6 +61,9 @@
       className={classNames(`${classPrefix}-outer`, className)}
       style={style}
       onClick={(e: ITouchEvent) => handleClick(e)}
+      ariaRole={ariaRole}
+      ariaLabel={ariaLabel}
+      tabindex={-1}
     >
       {close}
       {header}

src/packages/dialog/dialog.taro.tsx

@@ -92,6 +92,7 @@ export const BaseDialog: FunctionComponent<Partial<TaroDialogProps>> & {
   const classPrefix = 'nut-dialog'
   const { locale } = useConfig()
   const [loading, setLoading] = useState(false)
+  const role = 'dialog'
 
   useCustomEvent(
     id as string,
@@ -292,6 +293,8 @@ export const BaseDialog: FunctionComponent<Partial<TaroDialogProps>> & {
         footer={renderFooter()}
         footerDirection={footerDirection}
         visible={visible}
+        ariaRole={role}
+        // ariaLabel={ariaLabel}
       >
         {content || children}
       </Content>
@@ -314,6 +317,7 @@ export const BaseDialog: FunctionComponent<Partial<TaroDialogProps>> & {
           closeOnOverlayClick={closeOnOverlayClick}
           lockScroll={lockScroll}
           onClick={onHandleClickOverlay}
+          ariaLabel="背景蒙层"
         />
       )}
       {renderContent()}

src/packages/dialog/dialog.tsx

@@ -276,6 +276,7 @@ const BaseDialog: ForwardRefRenderFunction<unknown, Partial<WebDialogProps>> = (
           closeOnOverlayClick={closeOnOverlayClick}
           lockScroll={lockScroll}
           onClick={onHandleClickOverlay}
+          ariaLabel="背景蒙层"
         />
       )}
       {renderContent()}

src/packages/image/demo.taro.tsx

@@ -12,6 +12,7 @@ import Demo5 from './demos/taro/demo5'
 import Demo6 from './demos/taro/demo6'
 import Demo7 from './demos/taro/demo7'
 import Demo8 from './demos/taro/demo8'
+import Demo9 from './demos/taro/demo9'
 
 const ImageDemo = () => {
   const [translated] = useTranslate({
@@ -24,6 +25,7 @@ const ImageDemo = () => {
       error: '加载失败',
       lazyload: '图片懒加载',
       imageText: 'Image + text 模式',
+      ARIAUsage: '无障碍使用示例',
     },
     'en-US': {
       basic: 'Basic Usage',
@@ -34,6 +36,7 @@ const ImageDemo = () => {
       error: 'Error',
       lazyload: 'Lazyload',
       imageText: 'Image + text ',
+      ARIAUsage: 'ARIA Usage',
     },
   })
   return (
@@ -64,6 +67,8 @@ const ImageDemo = () => {
             <Demo8 />
           </>
         )}
+        <View className="h2">{translated.ARIAUsage}</View>
+        <Demo9 />
       </ScrollView>
     </>
   )