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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nutui/nutui-react-taro",
-  "version": "3.0.18",
+  "version": "3.0.19-cpp.19",
   "style": "dist/style.css",
   "main": "dist/nutui.react.umd.js",
   "module": "dist/es/packages/nutui.react.build.js",
@@ -109,7 +109,7 @@
   "dependencies": {
     "@babel/runtime": "^7.23.9",
     "@nutui/icons-react": "^3.0.2-beta.5",
-    "@nutui/icons-react-taro": "^3.0.2-beta.3",
+    "@nutui/icons-react-taro": "3.0.2-cpp.3.beta.3",
     "@nutui/jdesign-icons-react-taro": "1.0.6-beta.2",
     "@nutui/touch-emulator": "^1.0.0",
     "@nutui/lottie-miniprogram": "^1.0.2",
@@ -241,6 +241,7 @@
     "@types/react-dom": "^18.2.19",
     "sass": "1.77.6",
     "@tarojs/api": "4.0.12",
-    "@tarojs/components": "4.0.12"
+    "@tarojs/components": "4.0.12",
+    "@nutui/icons-react-taro": "^3.0.2-cpp.1"
   }
 }

src/hooks/taro/use-custom-event.ts

@@ -1,9 +1,10 @@
 import { useEffect, useRef } from 'react'
 import isEqual from 'react-fast-compare'
-import { Events, getCurrentInstance } from '@tarojs/taro'
+import { eventCenter, getCurrentInstance } from '@tarojs/taro'
 import { useForceUpdate } from '@/hooks/use-force-update'
 
-export const customEvents = new Events()
+// export const customEvents = new Events()
+export const customEvents = eventCenter
 
 export function useCustomEventsPath(selector?: string) {
   selector = selector || ''

src/locales/base.ts

@@ -8,6 +8,8 @@ export interface BaseLang {
   select: string
   edit: string
   reset: string
+  close: string
+  back: string
   video: {
     errorTip: string
     clickRetry: string
@@ -140,4 +142,9 @@ export interface BaseLang {
   watermark: {
     errorCanvasTips: string
   }
+  mask: string
+  arithmetic: {
+    plus: string
+    minus: string
+  }
 }

src/locales/en-US.ts

@@ -10,6 +10,8 @@ const enUS: BaseLang = {
   select: 'Select',
   edit: 'Edit',
   reset: 'Reset',
+  close: 'Close',
+  back: 'Back',
   video: {
     errorTip: 'Error Tip',
     clickRetry: 'Click Retry',
@@ -139,5 +141,10 @@ const enUS: BaseLang = {
   watermark: {
     errorCanvasTips: 'Canvas is not supported in the current environment',
   },
+  mask: 'Mask',
+  arithmetic: {
+    plus: 'Plus',
+    minus: 'Minus',
+  },
 }
 export default enUS

src/locales/id-ID.ts

@@ -10,6 +10,8 @@ const idID: BaseLang = {
   select: 'Pilih',
   edit: 'Sunting',
   reset: 'Mengatur Ulang',
+  close: 'Tutup',
+  back: 'Kembali',
   video: {
     errorTip: 'Terjadi Kesalahan',
     clickRetry: 'Coba Lagi',
@@ -140,5 +142,10 @@ const idID: BaseLang = {
   watermark: {
     errorCanvasTips: 'Canvas is not supported in the current environment',
   },
+  mask: 'Masker',
+  arithmetic: {
+    plus: 'Selain itu',
+    minus: 'minus',
+  },
 }
 export default idID

src/locales/tr-TR.ts

@@ -10,6 +10,8 @@ const trTR: BaseLang = {
   select: 'Seçiniz',
   edit: 'düzenlemek',
   reset: 'sıfırlama',
+  close: 'Kapat',
+  back: 'Geri dön',
   video: {
     errorTip: 'Video yüklenemedi',
     clickRetry: 'Yeniden Tıklayın',
@@ -148,5 +150,10 @@ const trTR: BaseLang = {
   watermark: {
     errorCanvasTips: 'Geçerli ortam Canvası desteklemiyor',
   },
+  mask: 'Maske',
+  arithmetic: {
+    plus: 'Ayrıca',
+    minus: 'eksi',
+  },
 }
 export default trTR

src/locales/zh-CN.ts

@@ -10,6 +10,8 @@ const zhCN: BaseLang = {
   select: '请选择',
   edit: '编辑',
   reset: '重置',
+  close: '关闭',
+  back: '返回',
   video: {
     errorTip: '视频加载失败',
     clickRetry: '点击重试',
@@ -140,5 +142,10 @@ const zhCN: BaseLang = {
   watermark: {
     errorCanvasTips: '当前环境不支持Canvas',
   },
+  mask: '蒙层',
+  arithmetic: {
+    plus: '加',
+    minus: '减',
+  },
 }
 export default zhCN

src/locales/zh-TW.ts

@@ -10,6 +10,8 @@ const zhCN: BaseLang = {
   select: '請選擇',
   edit: '編輯',
   reset: '重置',
+  close: '關閉',
+  back: '返回',
   video: {
     errorTip: '視頻加載失敗',
     clickRetry: '點擊重試',
@@ -140,5 +142,10 @@ const zhCN: BaseLang = {
   watermark: {
     errorCanvasTips: '當前環境不支持Canvas',
   },
+  mask: '蒙層',
+  arithmetic: {
+    plus: '加',
+    minus: '减',
+  },
 }
 export default zhCN

src/locales/zh-UG.ts

@@ -10,6 +10,8 @@ const zhUG: BaseLang = {
   select: 'تاللاڭ',
   edit: 'يحرر',
   reset: 'إعادة ضبط',
+  close: 'تاقاش',
+  back: 'ئاۋازقا',
   video: {
     errorTip: 'فىلىمنى قويۇش مەغلۇپ بولدى',
     clickRetry: 'قايتا سىناش',
@@ -138,5 +140,10 @@ const zhUG: BaseLang = {
   watermark: {
     errorCanvasTips: 'Canvas نى قوللىمايدۇ',
   },
+  mask: 'mask',
+  arithmetic: {
+    plus: 'ئەڭ‌',
+    minus: 'ئەممە',
+  },
 }
 export default zhUG

src/packages/actionsheet/actionsheet.scss

@@ -62,7 +62,9 @@
   &-safe-area {
     display: block;
     width: 100%;
+    /* #ifndef dynamic*/
     padding-bottom: constant(safe-area-inset-bottom);
     padding-bottom: env(safe-area-inset-bottom);
+    /* #endif */
   }
 }

src/packages/animatingnumbers/countup.scss

@@ -1,6 +1,11 @@
 .nut-countup {
   &-list {
+    /* #ifdef dynamic*/
+    display: flex;
+    /* #endif */
+    /* #ifndef dynamic*/
     display: inline-flex;
+    /* #endif */
     height: $countup-height;
     overflow: hidden;
     direction: ltr;

src/packages/avatarcropper/avatarcropper.scss

@@ -59,7 +59,9 @@
 
       &.top {
         top: 0;
+        /* #ifndef dynamic*/
         bottom: inherit;
+        /* #endif */
       }
 
       &-flex {

src/packages/avatarcropper/avatarcropper.taro.tsx

@@ -4,9 +4,8 @@
   useMemo,
   useCallback,
   FunctionComponent,
-  useLayoutEffect,
 } from 'react'
-import Taro, { createSelectorQuery } from '@tarojs/taro'
+import Taro, { useReady, createSelectorQuery } from '@tarojs/taro'
 import classNames from 'classnames'
 import { Canvas, CommonEventFunction, View } from '@tarojs/components'
 import { getWindowInfo } from '@/utils/taro/get-system-info'
@@ -138,7 +137,7 @@
     cropperCanvasContext: null,
   })
 
-  useLayoutEffect(() => {
+  useReady(() => {
     if (showAlipayCanvas2D) {
       const { canvasId } = canvasAll
       createSelectorQuery()
@@ -150,14 +149,14 @@
         })
         .exec()
     }
-  }, [showAlipayCanvas2D, state.displayHeight, state.displayWidth])
+  })
 
   useEffect(() => {
     setCanvasAll({
       ...canvasAll,
       cropperCanvasContext: Taro.createCanvasContext(canvasAll.canvasId),
     })
   }, [])
 
   const touch = useTouch()
 
@@ -169,7 +168,7 @@
       height,
       borderRadius: shape === 'round' ? '50%' : '',
     }
   }, [pixelRatio, state.cropperWidth])
 
   // 是否是横向
   const isAngle = useMemo(() => {
@@ -251,7 +250,7 @@
       ctx.scale(scale, scale)
       ctx.drawImage(src as HTMLImageElement, x, y, width, height)
     },
     [drawImage, state]
   )
 
   // web绘制
@@ -268,7 +267,7 @@
     canvas.height = state.displayHeight
     const ctx = canvas.getContext('2d') as CanvasRenderingContext2D
     canvas2dDraw(ctx)
   }, [canvas2dDraw])
 
   const alipayDraw = useCallback(() => {
     const ctx = canvasAll.cropperCanvas.getContext(
@@ -325,7 +324,7 @@
     ctx.scale(scale, scale)
     ctx.drawImage(src as string, x, y, width, height)
     ctx.draw()
   }, [drawImage, state.scale, state.angle, state.moveX, state.moveY])
 
   useEffect(() => {
     if (Math.abs(state.moveX) > maxMoveX) {
@@ -694,5 +693,4 @@
     </>
   )
 }
-
 AvatarCropper.displayName = 'NutAvatarCropper'

src/packages/badge/badge.scss

@@ -1,8 +1,13 @@
 .nut-badge {
   position: relative;
+  /* #ifdef dynamic*/
+  display: flex;
+  /* #endif */
+  /* #ifndef dynamic*/
   display: inline-flex;
-  vertical-align: middle;
   box-sizing: content-box;
+  /* #endif */
+  vertical-align: middle;
   width: auto;
 
   &-icon {
@@ -38,7 +43,12 @@
   }
 
   &-sup {
+    /* #ifdef dynamic*/
+    display: flex;
+    /* #endif */
+    /* #ifndef dynamic*/
     display: inline-flex;
+    /* #endif */
     text-align: center;
     min-width: $badge-min-width;
     padding: $badge-padding;

src/packages/button/button.scss

@@ -55,6 +55,9 @@
     transform: translate(-50%, -50%);
     opacity: 0;
     content: ' ';
+    /* #ifdef dynamic*/
+    pointer-events: none;
+    /* #endif */
   }
 
   &::after {

src/packages/button/button.taro.tsx

@@ -2,19 +2,18 @@
 import type { MouseEvent } from 'react'
 import classNames from 'classnames'
 import {
-  ButtonProps as MiniProgramButtonProps,
+  // ButtonProps as MiniProgramButtonProps,
   View,
-  Button as TaroButton,
+  // Button as TaroButton,
 } from '@tarojs/components'
 import { Loading } from '@nutui/icons-react-taro'
-import { getEnv } from '@tarojs/taro'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 import { harmony } from '@/utils/taro/platform'
 
-type OmitMiniProgramButtonProps = Omit<
-  MiniProgramButtonProps,
-  'size' | 'type' | 'onClick' | 'style'
->
+// type OmitMiniProgramButtonProps = Omit<
+//   MiniProgramButtonProps,
+//   'size' | 'type' | 'onClick' | 'style'
+// >
 
 export type ButtonType =
   | 'default'
@@ -27,9 +26,11 @@
 export type ButtonShape = 'square' | 'round'
 export type ButtonFill = 'solid' | 'outline' | 'dashed' | 'none'
 
-export interface ButtonProps
-  extends BasicComponent,
-    OmitMiniProgramButtonProps {
+// export interface ButtonProps
+//   extends BasicComponent,
+//     OmitMiniProgramButtonProps {
+
+export interface ButtonProps extends BasicComponent {
   color: string
   shape: ButtonShape
   type: ButtonType
@@ -76,12 +77,13 @@
       children,
       className,
       style,
-      formType,
+      // formType,
       nativeType,
       onClick,
       ...rest
     } = { ...defaultProps, ...props }
 
+    const role = 'button'
     const getStyle = useMemo(() => {
       const style: CSSProperties = {}
       if (color) {
@@ -145,20 +147,23 @@
       className
     )
 
-    if (getEnv() === 'WEB') {
-      ;(rest as any).type = formType
-    }
+    // if (getEnv() === 'WEB') {
+    //   ;(rest as any).type = formType
+    // }
     return (
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
       // eslint-disable-next-line react/button-has-type
-      <TaroButton
+      // <TaroButton
+      <View
         {...rest}
         ref={ref}
-        formType={formType || nativeType}
+        // formType={formType || nativeType}
         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" />}
@@ -175,7 +180,8 @@
           )}
           {rightIcon}
         </View>
-      </TaroButton>
+      </View>
+      // </TaroButton>
     )
   }
 )

src/packages/cascader/cascader.scss

@@ -11,8 +11,10 @@
   }
 
   .nut-tabs-titles-item {
+    /* #ifndef dynamic*/
     flex: initial;
     min-width: auto;
+    /* #endif */
     width: auto;
     padding: $cascader-tabs-item-padding;
     white-space: nowrap;