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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nutui/nutui-react-taro",
-  "version": "3.0.18",
+  "version": "3.0.19-cpp.16",
   "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.2",
     "@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,7 @@ export interface BaseLang {
   select: string
   edit: string
   reset: string
+  close?: string
   video: {
     errorTip: string
     clickRetry: string

src/locales/en-US.ts

@@ -10,6 +10,7 @@ const enUS: BaseLang = {
   select: 'Select',
   edit: 'Edit',
   reset: 'Reset',
+  close: 'close',
   video: {
     errorTip: 'Error Tip',
     clickRetry: 'Click Retry',

src/locales/id-ID.ts

@@ -10,6 +10,7 @@ const idID: BaseLang = {
   select: 'Pilih',
   edit: 'Sunting',
   reset: 'Mengatur Ulang',
+  close: 'Tutup',
   video: {
     errorTip: 'Terjadi Kesalahan',
     clickRetry: 'Coba Lagi',

src/locales/tr-TR.ts

@@ -10,6 +10,7 @@ const trTR: BaseLang = {
   select: 'Seçiniz',
   edit: 'düzenlemek',
   reset: 'sıfırlama',
+  close: 'Kapat',
   video: {
     errorTip: 'Video yüklenemedi',
     clickRetry: 'Yeniden Tıklayın',

src/locales/zh-CN.ts

@@ -10,6 +10,7 @@ const zhCN: BaseLang = {
   select: '请选择',
   edit: '编辑',
   reset: '重置',
+  close: '关闭',
   video: {
     errorTip: '视频加载失败',
     clickRetry: '点击重试',

src/locales/zh-TW.ts

@@ -10,6 +10,7 @@ const zhCN: BaseLang = {
   select: '請選擇',
   edit: '編輯',
   reset: '重置',
+  close: '關閉',
   video: {
     errorTip: '視頻加載失敗',
     clickRetry: '點擊重試',

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 @@ import React, {
   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 @@ export const AvatarCropper: FunctionComponent<
     cropperCanvasContext: null,
   })
 
-  useLayoutEffect(() => {
+  useReady(() => {
     if (showAlipayCanvas2D) {
       const { canvasId } = canvasAll
       createSelectorQuery()
@@ -150,7 +149,7 @@ export const AvatarCropper: FunctionComponent<
         })
         .exec()
     }
-  }, [showAlipayCanvas2D, state.displayHeight, state.displayWidth])
+  })
 
   useEffect(() => {
     setCanvasAll({
@@ -694,5 +693,4 @@ export const AvatarCropper: FunctionComponent<
     </>
   )
 }
-
 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 React, { CSSProperties, useCallback, useMemo } from 'react'
 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 ButtonSize = 'xlarge' | 'large' | 'normal' | 'small' | 'mini'
 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 @@ export const Button = React.forwardRef<HTMLButtonElement, Partial<ButtonProps>>(
       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 @@ export const Button = React.forwardRef<HTMLButtonElement, Partial<ButtonProps>>(
       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 @@ export const Button = React.forwardRef<HTMLButtonElement, Partial<ButtonProps>>(
           )}
           {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;

src/packages/cellgroup/cellgroup.scss

@@ -2,7 +2,9 @@
   display: block;
 
   &-title {
+    /* #ifndef dynamic*/
     display: inherit;
+    /* #endif */
     padding: $cell-group-title-padding;
     color: $cell-group-title-color;
     font-size: $cell-group-title-font-size;
@@ -12,7 +14,9 @@
   }
 
   &-description {
+    /* #ifndef dynamic*/
     display: inherit;
+    /* #endif */
     padding: $cell-group-description-padding;
     color: $cell-group-description-color;
     font-size: $cell-group-description-font-size;

src/packages/checkbox/checkbox.scss

@@ -65,7 +65,12 @@
 
   &-button {
     position: relative;
+    /* #ifdef dynamic*/
+    display: flex;
+    /* #endif */
+    /* #ifndef dynamic*/
     display: inline-flex;
+    /* #endif */
     align-items: center;
     min-height: 32px;
     padding: $checkbox-button-padding;

src/packages/checkbox/checkbox.taro.tsx

@@ -198,11 +198,15 @@ export const Checkbox: FC<
         {
           [`${classPrefix}-reverse`]: labelPosition === 'left',
           'nut-checkbox-list-item': ctx?.list,
+          [`${classPrefix}-active`]: innerChecked,
         },
         className
       )}
       {...rest}
       onClick={handleClick}
+      ariaRole="checkbox"
+      tabIndex={innerDisabled ? -1 : 0}
+      ariaChecked={innerIndeterminate ? 'mixed' : innerChecked}
     >
       {renderCheckboxItem()}
     </View>

src/packages/checkbox/checkbox.tsx

@@ -203,11 +203,15 @@ export const Checkbox: FunctionComponent<
         {
           [`${classPrefix}-reverse`]: labelPosition === 'left',
           'nut-checkbox-list-item': ctx?.list,
+          [`${classPrefix}-active`]: innerChecked,
         },
         className
       )}
       {...rest}
       onClick={handleClick}
+      role="checkbox"
+      tabIndex={innerDisabled ? -1 : 0}
+      aria-checked={innerIndeterminate ? 'mixed' : innerChecked}
     >
       {renderCheckboxItem()}
     </div>

src/packages/checkboxgroup/checkboxgroup.scss

@@ -30,7 +30,12 @@
     flex-wrap: wrap;
 
     .nut-checkbox {
+      /* #ifdef dynamic*/
+      display: flex;
+      /* #endif */
+      /* #ifndef dynamic*/
       display: inline-flex;
+      /* #endif */
       flex: 1;
       margin-right: 20px;