feat: support aria property for all component (#1127)

* feat: support aria property for all component * test(icon): update snapshot * test(icon): update snapshot
Tencent · Nov 28, 2022 · a9be36b · a9be36b
1 parent a31529c
commit a9be36b
Show file tree

Hide file tree

Showing 10 changed files with 76 additions and 4 deletions.
diff --git a/src/calendar/__test__/__snapshots__/index.test.js.snap b/src/calendar/__test__/__snapshots__/index.test.js.snap
@@ -36,6 +36,9 @@ exports[`calendar :base 1`] = `
                 bind:tap="handleClose"
               >
                 <wx-view
+                  ariaHidden="{{false}}"
+                  ariaLabel=""
+                  ariaRole=""
                   class="t-icon t-class"
                   style="font-size: 24px"
                   bind:tap="onTap"

diff --git a/src/cell/__test__/__snapshots__/index.test.js.snap b/src/cell/__test__/__snapshots__/index.test.js.snap
@@ -35,6 +35,9 @@ exports[`cell :base 1`] = `
           class="t-cell__right-icon t-class-right-icon"
         >
           <wx-view
+            ariaHidden="{{false}}"
+            ariaLabel=""
+            ariaRole=""
             class="t-icon t-class"
             style=""
             bind:tap="onTap"

diff --git a/src/collapse/__test__/__snapshots__/index.test.js.snap b/src/collapse/__test__/__snapshots__/index.test.js.snap
@@ -58,6 +58,9 @@ exports[`collapse :base 1`] = `
                   class="t-cell__right-icon t-class-right-icon"
                 >
                   <wx-view
+                    ariaHidden="{{false}}"
+                    ariaLabel=""
+                    ariaRole=""
                     class="t-icon t-class"
                     style=""
                     bind:tap="onTap"
@@ -134,6 +137,9 @@ exports[`collapse :base 1`] = `
                   class="t-cell__right-icon t-class-right-icon"
                 >
                   <wx-view
+                    ariaHidden="{{false}}"
+                    ariaLabel=""
+                    ariaRole=""
                     class="t-icon t-class"
                     style=""
                     bind:tap="onTap"
@@ -217,6 +223,9 @@ exports[`collapse :base 1`] = `
                   class="t-cell__right-icon t-class-right-icon"
                 >
                   <wx-view
+                    ariaHidden="{{false}}"
+                    ariaLabel=""
+                    ariaRole=""
                     class="t-icon t-class"
                     style=""
                     bind:tap="onTap"
@@ -291,6 +300,9 @@ exports[`collapse :base 1`] = `
                   class="t-cell__right-icon t-class-right-icon"
                 >
                   <wx-view
+                    ariaHidden="{{false}}"
+                    ariaLabel=""
+                    ariaRole=""
                     class="t-icon t-class"
                     style=""
                     bind:tap="onTap"
@@ -378,6 +390,9 @@ exports[`collapse :defaultExpandAll 1`] = `
                 class="t-cell__right-icon t-class-right-icon"
               >
                 <wx-view
+                  ariaHidden="{{false}}"
+                  ariaLabel=""
+                  ariaRole=""
                   class="t-icon t-class"
                   style=""
                   bind:tap="onTap"
@@ -452,6 +467,9 @@ exports[`collapse :defaultExpandAll 1`] = `
                 class="t-cell__right-icon t-class-right-icon"
               >
                 <wx-view
+                  ariaHidden="{{false}}"
+                  ariaLabel=""
+                  ariaRole=""
                   class="t-icon t-class"
                   style=""
                   bind:tap="onTap"
@@ -541,6 +559,9 @@ exports[`collapse :disabled 1`] = `
                 class="t-cell__right-icon t-class-right-icon"
               >
                 <wx-view
+                  ariaHidden="{{false}}"
+                  ariaLabel=""
+                  ariaRole=""
                   class="t-icon t-class"
                   style=""
                   bind:tap="onTap"
@@ -617,6 +638,9 @@ exports[`collapse :disabled 1`] = `
                 class="t-cell__right-icon t-class-right-icon"
               >
                 <wx-view
+                  ariaHidden="{{false}}"
+                  ariaLabel=""
+                  ariaRole=""
                   class="t-icon t-class"
                   style=""
                   bind:tap="onTap"

diff --git a/src/common/src/instantiationDecorator.ts b/src/common/src/instantiationDecorator.ts
@@ -28,7 +28,6 @@ const ComponentNativeProps = [
  * @param options {}
  */
 export const toComponent = function toComponent(options: Record<string, any>) {
-  // 处理 properties 属性
   if (options.properties) {
     Object.keys(options.properties).forEach((k) => {
       let opt = options.properties[k];
@@ -38,12 +37,21 @@ export const toComponent = function toComponent(options: Record<string, any>) {
       }
       options.properties[k] = opt;
     });
+    // aria
+    const ariaProps = [
+      { key: 'ariaHidden', type: Boolean },
+      { key: 'ariaRole', type: String },
+      { key: 'ariaLabel', type: String },
+    ];
+    ariaProps.forEach(({ key, type }) => {
+      options.properties[key] = {
+        type,
+      };
+    });
   }
 
-  // 处理自定义的方法和生命周期函数
   if (!options.methods) options.methods = {};
 
-  // 使用 lifetimes 处理生命周期函数
   if (!options.lifetimes) options.lifetimes = {};
 
   const inits: { [key: string]: PropertyDescriptor } = {};

diff --git a/src/icon/icon.wxml b/src/icon/icon.wxml
@@ -1,4 +1,11 @@
-<view class="{{ prefix ? prefix : classPrefix}} {{componentPrefix}}-class" style="{{ iconStyle }}" bind:tap="onTap">
+<view
+  class="{{ prefix ? prefix : classPrefix}} {{componentPrefix}}-class"
+  style="{{ iconStyle }}"
+  bind:tap="onTap"
+  aria-hidden="{{ariaHidden}}"
+  aria-label="{{ariaLabel}}"
+  aria-role="{{ariaRole}}"
+>
   <view wx:if="{{ isImage }}" class="{{classPrefix}}--image">
     <image src="{{ name }}" mode="aspectFit" class="{{classPrefix}}__image" />
   </view>

diff --git a/src/image/__test__/__snapshots__/index.test.js.snap b/src/image/__test__/__snapshots__/index.test.js.snap
@@ -13,6 +13,9 @@ exports[`image :base 1`] = `
       >
         <t-icon>
           <wx-view
+            ariaHidden="{{false}}"
+            ariaLabel=""
+            ariaRole=""
             class="t-icon t-class"
             style=""
             bind:tap="onTap"

diff --git a/src/input/__test__/__snapshots__/index.test.js.snap b/src/input/__test__/__snapshots__/index.test.js.snap
@@ -63,6 +63,9 @@ exports[`input props : clearable && label && suffix 1`] = `
             class="t-class-clearable"
           >
             <wx-view
+              ariaHidden="{{false}}"
+              ariaLabel=""
+              ariaRole=""
               class="t-icon t-class"
               style="font-size: 48rpx"
               bind:tap="onTap"
@@ -90,6 +93,9 @@ exports[`input props : clearable && label && suffix 1`] = `
             class="t-class-suffix-icon"
           >
             <wx-view
+              ariaHidden="{{false}}"
+              ariaLabel=""
+              ariaRole=""
               class="t-icon t-class"
               style="font-size: 48rpx"
               bind:tap="onTap"

diff --git a/src/notice-bar/__test__/__snapshots__/index.test.js.snap b/src/notice-bar/__test__/__snapshots__/index.test.js.snap
@@ -15,6 +15,9 @@ exports[`notice-bar props : marquee 1`] = `
       >
         <t-icon>
           <wx-view
+            ariaHidden="{{false}}"
+            ariaLabel=""
+            ariaRole=""
             class="t-icon t-class"
             style=""
             bind:tap="onTap"

diff --git a/src/search/__test__/__snapshots__/index.test.js.snap b/src/search/__test__/__snapshots__/index.test.js.snap
@@ -16,6 +16,9 @@ exports[`search Props :base 1`] = `
           class="t-icon t-class-left"
         >
           <wx-view
+            ariaHidden="{{false}}"
+            ariaLabel=""
+            ariaRole=""
             class="t-icon t-class"
             style="font-size: 24px"
             bind:tap="onTap"

diff --git a/src/stepper/__test__/__snapshots__/index.test.js.snap b/src/stepper/__test__/__snapshots__/index.test.js.snap
@@ -13,6 +13,9 @@ exports[`stepper event : input 1`] = `
       class="t-stepper__minus-icon"
     >
       <wx-view
+        ariaHidden="{{false}}"
+        ariaLabel=""
+        ariaRole=""
         class="t-icon t-class"
         style="color: #444; font-size: 40rpx"
         bind:tap="onTap"
@@ -41,6 +44,9 @@ exports[`stepper event : input 1`] = `
       class="t-stepper__plus-icon"
     >
       <wx-view
+        ariaHidden="{{false}}"
+        ariaLabel=""
+        ariaRole=""
         class="t-icon t-class"
         style="color: #444; font-size: 40rpx"
         bind:tap="onTap"
@@ -67,6 +73,9 @@ exports[`stepper event : input 2`] = `
       class="t-stepper__minus-icon"
     >
       <wx-view
+        ariaHidden="{{false}}"
+        ariaLabel=""
+        ariaRole=""
         class="t-icon t-class"
         style="color: #444; font-size: 40rpx"
         bind:tap="onTap"
@@ -95,6 +104,9 @@ exports[`stepper event : input 2`] = `
       class="t-stepper__plus-icon"
     >
       <wx-view
+        ariaHidden="{{false}}"
+        ariaLabel=""
+        ariaRole=""
         class="t-icon t-class"
         style="color: #444; font-size: 40rpx"
         bind:tap="onTap"