feat: 合并近期跨原生改动点，增加了无障碍，部分组件增加了新功能。 (#3420)

* fix: 修订导入方式,兼容五端处理

* fix: 兼容原生侧样式无法支持的属性处理

* feat(checkbox): 跟进最新设计规范,勾选态为白色背景,增加选中态自定义类名

* fix: 样式兼容原生侧

* feat(input): 增加native styles

* feat(radio): 样式修订,增加无障碍

* feat(tabs): 修订原生侧样式兼容,临时方案

* feat(switch): 无障碍

* feat(popup): 增加top属性,无障碍等

* feat(dialog): 增加底部按钮上的角标,支持配置,修订dialog的最新的样式标量值

* fix: 补充多语言

* fix(toast): 增加无障碍,原生适配

* fix: 修复cr问题

* feat(noticebar): taro 版本优化

---------

Co-authored-by: tongen <tongen@jd.com>

Author: xiaoyatong

src/locales/zh-UG.ts

@@ -139,6 +139,6 @@ const zhUG: BaseLang = {
   watermark: {
     errorCanvasTips: 'Canvas نى قوللىمايدۇ',
   },
-  mask: 'mask',
+  mask: 'قاپلىما قەۋەت',
 }
 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/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,12 @@
     transform: translate(-50%, -50%);
     opacity: 0;
     content: ' ';
+    /* #ifdef dynamic*/
+    pointer-events: none;
+    /* #endif */
+    /* #ifndef dynamic*/
+    pointer-events: auto;
+    /* #endif */
   }
 
   &::after {

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

@@ -19,6 +19,7 @@
 
   &-icon-checked {
     color: $color-primary;
+    background-color: $white;
     transition-duration: 0.3s;
     transition-property: color, border-color, background-color;
     border-radius: 50%;
@@ -41,6 +42,7 @@
 
   &-icon-indeterminate {
     color: $color-primary;
+    background-color: $white;
     box-shadow: 0px 2px 4px 0px #ff0f2333;
     border-radius: 50%;
 
@@ -51,6 +53,8 @@
 
   &-icon-disabled {
     color: $color-text-disabled;
+    background-color: $white;
+    border-radius: 50%;
     box-shadow: none;
   }
 
@@ -65,7 +69,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

@@ -79,32 +79,38 @@ export const Checkbox: FC<
   const renderIcon = () => {
     if (innerDisabled) {
       if (innerIndeterminate) {
-        return <CheckDisabled className={color()} />
+        // @ts-ignore
+        return <CheckDisabled className={color()} ariaHidden />
       }
       if (innerChecked) {
-        return <Checked className={color()} />
+        // @ts-ignore
+        return <Checked className={color()} ariaHidden />
       }
-      return <CheckDisabled className={color()} />
+      // @ts-ignore
+      return <CheckDisabled className={color()} ariaHidden />
     }
     if (!innerChecked) {
       return React.isValidElement(icon) ? (
         icon
       ) : (
-        <CheckNormal className={color()} />
+        // @ts-ignore
+        <CheckNormal className={color()} ariaHidden />
       )
     }
     if (innerIndeterminate) {
       return React.isValidElement(indeterminateIcon) ? (
         indeterminateIcon
       ) : (
-        <CheckDisabled className={color()} />
+        // @ts-ignore
+        <CheckDisabled className={color()} ariaHidden />
       )
     }
     return React.isValidElement(activeIcon) ? (
       activeIcon
     ) : (
       <View className={`${classPrefix}-icon-wrap`}>
-        <Checked className={color()} />
+        {/* @ts-ignore */}
+        <Checked className={color()} ariaHidden />
       </View>
     )
   }
@@ -198,11 +204,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>