@tuya-miniapp/smart-ui 2.12.1-beta-5 → 2.12.1-beta-6

package/dist/bottom-sheet/index.js

@@ -21,6 +21,11 @@ SmartComponent({
             type: Boolean,
             value: true,
         },
+        /** 关闭图标读屏文案；不传则仅有 button 角色，由业务自行多语言传入 */
+        closeIconAriaLabel: {
+            type: String,
+            value: '',
+        },
         contentHeight: null,
         round: {
             type: Boolean,

package/dist/bottom-sheet/index.wxml

@@ -51,12 +51,14 @@
   <block wx:else>
     <view class="smart-bottom-sheet__header">
       <view wx:if="{{ title }}">{{ title }}</view>
-      <smart-icon 
-        wx:if="{{ title && showClose }}" 
-        name="{{ xmarkIcon }}" 
-        class="smart-bottom-sheet__icon" 
-        size="{{ iconSize }}" 
-        color="{{ xmarkIconColor }}" 
+      <smart-icon
+        wx:if="{{ title && showClose }}"
+        name="{{ xmarkIcon }}"
+        class="smart-bottom-sheet__icon"
+        size="{{ iconSize }}"
+        color="{{ xmarkIconColor }}"
+        ariaRole="button"
+        ariaLabel="{{ closeIconAriaLabel }}"
         bind:click="onClose"
       />
       <slot name="title" />

package/dist/cascader/index.js

@@ -42,6 +42,10 @@ SmartComponent({
             type: String,
             value: closeIcon,
         },
+        closeIconAriaLabel: {
+            type: String,
+            value: '',
+        },
         useTitleSlot: Boolean,
     },
     data: {

package/dist/cascader/index.wxml

@@ -6,7 +6,9 @@
   <smart-icon
     wx:if="{{ closeable }}"
     name="{{ closeIcon }}"
+    aria-role="button"
     class="smart-cascader__close-icon"
+    aria-label="{{ closeIconAriaLabel }}"
     bind:tap="onClose"
   />
 </view>

package/dist/field/cell-input.wxml

@@ -36,9 +36,16 @@
         wx:if="{{ showClear }}"
         name="{{ clearIcon }}"
         class="smart-field__clear-root smart-field__icon-root"
+        aria-label="{{ clearIconAriaLabel }}"
+        aria-role="button"
         catch:touchstart="onClear"
       />
-      <view class="smart-field__icon-container" bind:tap="onClickIcon">
+      <view
+        class="smart-field__icon-container"
+        bind:tap="onClickIcon"
+        aria-role="button"
+        aria-label="{{ rightIconButtonAriaLabel }}"
+      >
         <smart-icon
           wx:if="{{ rightIcon || icon }}"
           name="{{ rightIcon || icon }}"

package/dist/field/index.js

@@ -36,6 +36,12 @@ SmartComponent({
         }, locale: {
             type: String,
             value: '',
+        }, clearIconAriaLabel: {
+            type: String,
+            value: '',
+        }, rightIconButtonAriaLabel: {
+            type: String,
+            value: '',
         } }),
     data: {
         focused: false,

package/dist/grid-item/index.js

@@ -17,6 +17,10 @@ SmartComponent({
         badge: null,
         text: String,
         useSlot: Boolean,
+        ariaLabel: {
+            type: String,
+            value: '',
+        },
     },
     data: {
         viewStyle: '',

package/dist/grid-item/index.wxml

@@ -4,6 +4,8 @@
 <view
   class="custom-class {{ utils.bem('grid-item', { square }) }}"
   style="{{ computed.wrapperStyle({ square, gutter, columnNum, index }) }}"
+  aria-role="button"
+  aria-label="{{ ariaLabel }}"
   bindtap="onClick"
 >
   <view

package/dist/icon/index.js

@@ -12,6 +12,14 @@ SmartComponent({
             value: 'smart-icon',
         },
         name: String,
+        ariaLabel: {
+            type: String,
+            value: '',
+        },
+        ariaRole: {
+            type: String,
+            value: '',
+        },
     },
     methods: {
         onClick(event) {

package/dist/icon/index.wxml

@@ -4,6 +4,8 @@
   class="{{ computed.rootClass({ classPrefix, name }) }}"
   style="{{ computed.rootStyle({ customStyle, color, size }) }}"
   bindtap="onClick"
+  aria-role="{{ ariaRole }}"
+  aria-label="{{ ariaLabel }}"
 >
   <smart-info
     wx:if="{{ info !== null || dot }}"

package/dist/nav-bar/index.js

@@ -54,6 +54,18 @@ SmartComponent({
             type: Boolean,
             value: true,
         },
+        leftArrowAriaLabel: {
+            type: String,
+            value: '',
+        },
+        leftIconAriaLabel: {
+            type: String,
+            value: '',
+        },
+        rightIconAriaLabel: {
+            type: String,
+            value: '',
+        },
     },
     data: {
         leftArrowIcon: Left,

package/dist/nav-bar/index.wxml

@@ -19,6 +19,8 @@
         hover-stay-time="70"
         name="{{ leftArrowIcon }}"
         data-type="leftArrow"
+        aria-role="button"
+        aria-label="{{ leftArrowAriaLabel }}"
         custom-class="smart-nav-bar__arrow"
       />
       <view
@@ -28,6 +30,8 @@
         hover-stay-time="70"
         class="smart-nav-bar__icon-wrap"
         catch:tap="onClickLeftIcon"
+        aria-role="button"
+        aria-label="{{ leftIconAriaLabel }}"
       >
         <smart-icon 
          class="left-icon-class" 
@@ -60,6 +64,8 @@
         hover-stay-time="70"
         class="smart-nav-bar__icon-wrap"
         bind:tap="onClickRightIcon"
+        aria-role="button"
+        aria-label="{{ rightIconAriaLabel }}"
       >
         <smart-icon class="right-icon-class" custom-class="smart-nav-bar__icon" size="{{ rightIconSize }}" name="{{ rightIcon }}" color="{{ rightIconColor }}" />
       </view>

package/dist/notice-bar/index.js

@@ -47,6 +47,10 @@ SmartComponent({
             type: Number,
             value: 1,
         },
+        closeIconAriaLabel: {
+            type: String,
+            value: '',
+        },
         customStyle: {
             type: String,
             value: '',

package/dist/notice-bar/index.wxml

@@ -39,6 +39,8 @@
     name="{{ Xmark }}"
     style="{{ computed.rootStyle(rightIconStyle) }}"
     color=" {{ rightIconColor }} "
+    aria-role="button"
+    aria-label="{{ closeIconAriaLabel }}"
     catch:tap="onClickIcon"
   />
   <smart-icon 

package/dist/popup/index.js

@@ -34,6 +34,10 @@ SmartComponent({
             type: String,
             value: closeIcon,
         },
+        closeIconAriaLabel: {
+            type: String,
+            value: '',
+        },
         closeIconPosition: {
             type: String,
             value: 'top-right',

package/dist/popup/popup.wxml

@@ -11,6 +11,8 @@
     wx:if="{{ closeable }}"
     name="{{ closeIcon }}"
     class="close-icon-class smart-popup__close-icon smart-popup__close-icon--{{ closeIconPosition }}"
+    aria-role="button"
+    aria-label="{{ closeIconAriaLabel }}"
     bind:tap="onClickCloseIcon"
   />
 </view>

package/dist/stepper/index.js

@@ -64,6 +64,14 @@ SmartComponent({
         },
         theme: String,
         alwaysEmbed: Boolean,
+        minusAriaLabel: {
+            type: String,
+            value: '',
+        },
+        plusAriaLabel: {
+            type: String,
+            value: '',
+        },
     },
     data: {
         currentValue: '',

package/dist/stepper/index.wxml

@@ -9,6 +9,8 @@
     class="minus-class {{ utils.bem('stepper__minus', { disabled: computed.checkMin({ min, currentValue, disabled, disableMinus }) }) }}"
     hover-class="smart-stepper__minus--hover"
     hover-stay-time="70"
+    aria-role="button"
+    aria-label="{{ minusAriaLabel }}"
     bind:tap="onTap"
     bind:touchstart="onTouchStart"
     bind:touchend="onTouchEnd"
@@ -34,6 +36,8 @@
     class="plus-class {{ utils.bem('stepper__plus', { disabled: computed.checkMax({ max, currentValue, disabled, disablePlus }) }) }}"
     hover-class="smart-stepper__plus--hover"
     hover-stay-time="70"
+    aria-role="button"
+    aria-label="{{ plusAriaLabel }}"
     bind:tap="onTap"
     bind:touchstart="onTouchStart"
     bind:touchend="onTouchEnd"

package/dist/tag/index.js

@@ -16,6 +16,10 @@ SmartComponent({
             value: 'default',
         },
         closeable: Boolean,
+        closeIconAriaLabel: {
+            type: String,
+            value: '',
+        },
     },
     data: {
         crossIcon: Xmark,

package/dist/tag/index.wxml

@@ -10,8 +10,10 @@
     wx:if="{{ closeable }}"
     name="{{crossIcon}}"
     custom-class="smart-tag__close"
+    ariaRole="button"
+    ariaLabel="{{ closeIconAriaLabel }}"
     bind:click="onClose"
     color="{{textColor || closeColor}}"
-/>
+  />
   
 </view>

package/lib/bottom-sheet/index.js

@@ -26,6 +26,11 @@ var idListRef = {
             type: Boolean,
             value: true,
         },
+        /** 关闭图标读屏文案；不传则仅有 button 角色，由业务自行多语言传入 */
+        closeIconAriaLabel: {
+            type: String,
+            value: '',
+        },
         contentHeight: null,
         round: {
             type: Boolean,

package/lib/bottom-sheet/index.wxml

@@ -51,12 +51,14 @@
   <block wx:else>
     <view class="smart-bottom-sheet__header">
       <view wx:if="{{ title }}">{{ title }}</view>
-      <smart-icon 
-        wx:if="{{ title && showClose }}" 
-        name="{{ xmarkIcon }}" 
-        class="smart-bottom-sheet__icon" 
-        size="{{ iconSize }}" 
-        color="{{ xmarkIconColor }}" 
+      <smart-icon
+        wx:if="{{ title && showClose }}"
+        name="{{ xmarkIcon }}"
+        class="smart-bottom-sheet__icon"
+        size="{{ iconSize }}"
+        color="{{ xmarkIconColor }}"
+        ariaRole="button"
+        ariaLabel="{{ closeIconAriaLabel }}"
         bind:click="onClose"
       />
       <slot name="title" />

package/lib/cascader/index.js

@@ -56,6 +56,10 @@ var Xmark_1 = __importDefault(require("@tuya-miniapp/icons/dist/svg/Xmark"));
             type: String,
             value: Xmark_1.default,
         },
+        closeIconAriaLabel: {
+            type: String,
+            value: '',
+        },
         useTitleSlot: Boolean,
     },
     data: {

package/lib/cascader/index.wxml

@@ -6,7 +6,9 @@
   <smart-icon
     wx:if="{{ closeable }}"
     name="{{ closeIcon }}"
+    aria-role="button"
     class="smart-cascader__close-icon"
+    aria-label="{{ closeIconAriaLabel }}"
     bind:tap="onClose"
   />
 </view>

package/lib/field/cell-input.wxml

@@ -36,9 +36,16 @@
         wx:if="{{ showClear }}"
         name="{{ clearIcon }}"
         class="smart-field__clear-root smart-field__icon-root"
+        aria-label="{{ clearIconAriaLabel }}"
+        aria-role="button"
         catch:touchstart="onClear"
       />
-      <view class="smart-field__icon-container" bind:tap="onClickIcon">
+      <view
+        class="smart-field__icon-container"
+        bind:tap="onClickIcon"
+        aria-role="button"
+        aria-label="{{ rightIconButtonAriaLabel }}"
+      >
         <smart-icon
           wx:if="{{ rightIcon || icon }}"
           name="{{ rightIcon || icon }}"

package/lib/field/index.js

@@ -52,6 +52,12 @@ var numberFormat_1 = require("./numberFormat");
         }, locale: {
             type: String,
             value: '',
+        }, clearIconAriaLabel: {
+            type: String,
+            value: '',
+        }, rightIconButtonAriaLabel: {
+            type: String,
+            value: '',
         } }),
     data: {
         focused: false,

package/lib/grid-item/index.js

@@ -19,6 +19,10 @@ var link_1 = require("../mixins/link");
         badge: null,
         text: String,
         useSlot: Boolean,
+        ariaLabel: {
+            type: String,
+            value: '',
+        },
     },
     data: {
         viewStyle: '',

package/lib/grid-item/index.wxml

@@ -4,6 +4,8 @@
 <view
   class="custom-class {{ utils.bem('grid-item', { square }) }}"
   style="{{ computed.wrapperStyle({ square, gutter, columnNum, index }) }}"
+  aria-role="button"
+  aria-label="{{ ariaLabel }}"
   bindtap="onClick"
 >
   <view

package/lib/icon/index.js

@@ -14,6 +14,14 @@ var component_1 = require("../common/component");
             value: 'smart-icon',
         },
         name: String,
+        ariaLabel: {
+            type: String,
+            value: '',
+        },
+        ariaRole: {
+            type: String,
+            value: '',
+        },
     },
     methods: {
         onClick: function (event) {

package/lib/icon/index.wxml

@@ -4,6 +4,8 @@
   class="{{ computed.rootClass({ classPrefix, name }) }}"
   style="{{ computed.rootStyle({ customStyle, color, size }) }}"
   bindtap="onClick"
+  aria-role="{{ ariaRole }}"
+  aria-label="{{ ariaLabel }}"
 >
   <smart-info
     wx:if="{{ info !== null || dot }}"

package/lib/nav-bar/index.js

@@ -59,6 +59,18 @@ var component_1 = require("../common/component");
             type: Boolean,
             value: true,
         },
+        leftArrowAriaLabel: {
+            type: String,
+            value: '',
+        },
+        leftIconAriaLabel: {
+            type: String,
+            value: '',
+        },
+        rightIconAriaLabel: {
+            type: String,
+            value: '',
+        },
     },
     data: {
         leftArrowIcon: Left_1.default,

package/lib/nav-bar/index.wxml

@@ -19,6 +19,8 @@
         hover-stay-time="70"
         name="{{ leftArrowIcon }}"
         data-type="leftArrow"
+        aria-role="button"
+        aria-label="{{ leftArrowAriaLabel }}"
         custom-class="smart-nav-bar__arrow"
       />
       <view
@@ -28,6 +30,8 @@
         hover-stay-time="70"
         class="smart-nav-bar__icon-wrap"
         catch:tap="onClickLeftIcon"
+        aria-role="button"
+        aria-label="{{ leftIconAriaLabel }}"
       >
         <smart-icon 
          class="left-icon-class" 
@@ -60,6 +64,8 @@
         hover-stay-time="70"
         class="smart-nav-bar__icon-wrap"
         bind:tap="onClickRightIcon"
+        aria-role="button"
+        aria-label="{{ rightIconAriaLabel }}"
       >
         <smart-icon class="right-icon-class" custom-class="smart-nav-bar__icon" size="{{ rightIconSize }}" name="{{ rightIcon }}" color="{{ rightIconColor }}" />
       </view>

package/lib/notice-bar/index.js

@@ -52,6 +52,10 @@ var Right_1 = __importDefault(require("@tuya-miniapp/icons/dist/svg/Right"));
             type: Number,
             value: 1,
         },
+        closeIconAriaLabel: {
+            type: String,
+            value: '',
+        },
         customStyle: {
             type: String,
             value: '',

package/lib/notice-bar/index.wxml

@@ -39,6 +39,8 @@
     name="{{ Xmark }}"
     style="{{ computed.rootStyle(rightIconStyle) }}"
     color=" {{ rightIconColor }} "
+    aria-role="button"
+    aria-label="{{ closeIconAriaLabel }}"
     catch:tap="onClickIcon"
   />
   <smart-icon 

package/lib/popup/index.js

@@ -39,6 +39,10 @@ var utils_1 = require("../common/utils");
             type: String,
             value: Xmark_1.default,
         },
+        closeIconAriaLabel: {
+            type: String,
+            value: '',
+        },
         closeIconPosition: {
             type: String,
             value: 'top-right',

package/lib/popup/popup.wxml

@@ -11,6 +11,8 @@
     wx:if="{{ closeable }}"
     name="{{ closeIcon }}"
     class="close-icon-class smart-popup__close-icon smart-popup__close-icon--{{ closeIconPosition }}"
+    aria-role="button"
+    aria-label="{{ closeIconAriaLabel }}"
     bind:tap="onClickCloseIcon"
   />
 </view>

package/lib/stepper/index.js

@@ -80,6 +80,14 @@ function equal(value1, value2) {
         },
         theme: String,
         alwaysEmbed: Boolean,
+        minusAriaLabel: {
+            type: String,
+            value: '',
+        },
+        plusAriaLabel: {
+            type: String,
+            value: '',
+        },
     },
     data: {
         currentValue: '',

package/lib/stepper/index.wxml

@@ -9,6 +9,8 @@
     class="minus-class {{ utils.bem('stepper__minus', { disabled: computed.checkMin({ min, currentValue, disabled, disableMinus }) }) }}"
     hover-class="smart-stepper__minus--hover"
     hover-stay-time="70"
+    aria-role="button"
+    aria-label="{{ minusAriaLabel }}"
     bind:tap="onTap"
     bind:touchstart="onTouchStart"
     bind:touchend="onTouchEnd"
@@ -34,6 +36,8 @@
     class="plus-class {{ utils.bem('stepper__plus', { disabled: computed.checkMax({ max, currentValue, disabled, disablePlus }) }) }}"
     hover-class="smart-stepper__plus--hover"
     hover-stay-time="70"
+    aria-role="button"
+    aria-label="{{ plusAriaLabel }}"
     bind:tap="onTap"
     bind:touchstart="onTouchStart"
     bind:touchend="onTouchEnd"

package/lib/tag/index.js

@@ -21,6 +21,10 @@ var component_1 = require("../common/component");
             value: 'default',
         },
         closeable: Boolean,
+        closeIconAriaLabel: {
+            type: String,
+            value: '',
+        },
     },
     data: {
         crossIcon: Xmark_1.default,

package/lib/tag/index.wxml

@@ -10,8 +10,10 @@
     wx:if="{{ closeable }}"
     name="{{crossIcon}}"
     custom-class="smart-tag__close"
+    ariaRole="button"
+    ariaLabel="{{ closeIconAriaLabel }}"
     bind:click="onClose"
     color="{{textColor || closeColor}}"
-/>
+  />
   
 </view>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tuya-miniapp/smart-ui",
-  "version": "2.12.1-beta-5",
+  "version": "2.12.1-beta-6",
   "author": "MiniApp Team",
   "license": "MIT",
   "miniprogram": "lib",