feat(Badge): support Badge aria (#1196)

* feat(badge): badge support aria fix #1019 * feat(badge): fix code * test(badge): update snap * fix(badge): fix code * fix: fix code * fix: fix code * fix: fix code * fix: fix: fix code * fix: update snap * fix: fix code
Tencent · Dec 28, 2022 · 959b02a · 959b02a
1 parent 5ce0bd9
commit 959b02a
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 14 deletions.
diff --git a/src/badge/__test__/__snapshots__/index.test.js.snap b/src/badge/__test__/__snapshots__/index.test.js.snap
@@ -6,11 +6,16 @@ exports[`badge :base 1`] = `
     class="badge"
   >
     <wx-view
+      ariaDescribedby="describedbyId_t-id-1"
+      ariaLabelledby="labelledbyId_t-id-0"
+      ariaRole="option"
       class="t-badge  t-class"
       style=""
     >
       <wx-view
+        ariaHidden="true"
         class="t-badge__content t-class-content"
+        id="labelledbyId_t-id-0"
       >
         <wx-text
           class="t-badge__content-text"
@@ -19,7 +24,10 @@ exports[`badge :base 1`] = `
         </wx-text>
       </wx-view>
       <wx-view
+        ariaHidden="true"
+        ariaLabel="有新的消息"
         class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle  t-has-count t-class-count"
+        id="describedbyId_t-id-1"
         style=""
       >
         

diff --git a/src/badge/badge.wxml b/src/badge/badge.wxml
@@ -1,11 +1,20 @@
 <wxs src="./badge.wxs" module="this" />
 
-<view style="{{ customStyle }}" class="{{this.getBadgeOuterClass({shape})}} {{prefix}}-class">
-  <view class="{{classPrefix}}__content {{prefix}}-class-content">
+<view
+  style="{{ customStyle }}"
+  class="{{this.getBadgeOuterClass({shape})}} {{prefix}}-class"
+  aria-labelledby="{{labelledbyId}}"
+  aria-describedby="{{describedbyId}}"
+  aria-role="{{ ariaRole || 'option'}}"
+>
+  <view id="{{labelledbyId}}" class="{{classPrefix}}__content {{prefix}}-class-content" aria-hidden="true">
     <slot wx:if="{{!content}}" class="{{classPrefix}}__content-slot" />
     <text wx:else class="{{classPrefix}}__content-text">{{content}}</text>
   </view>
   <view
+    aria-hidden="true"
+    aria-label="{{ ariaLabel || this.getBadgeAriaLabel({dot, count, maxCount}) }}"
+    id="{{describedbyId}}"
     wx:if="{{count !== 'slot' && this.isShowBadge({dot,count,showZero})}}"
     class="{{this.getBadgeInnerClass({dot, size, shape, count})}} {{prefix}}-has-count {{prefix}}-class-count"
     style="{{this.getBadgeStyles({color, offset})}}"

diff --git a/src/badge/badge.wxs b/src/badge/badge.wxs
@@ -63,8 +63,22 @@ var isShowBadge = function (props) {
   return true;
 };
 
+var getBadgeAriaLabel = function (props) {
+  if (props.dot) {
+    return '有新的消息';
+  }
+  if (isNaN(props.count) || isNaN(props.maxCount)) {
+    var str = '有' + props.count + '通知';
+    return str;
+  }
+  var str1 = '有' + props.maxCount + '+条消息';
+  var str2 = '有' + props.count + '条消息';
+  return parseInt(props.count) > props.maxCount ? str1 : str2;
+};
+
 module.exports.getBadgeValue = getBadgeValue;
 module.exports.getBadgeStyles = getBadgeStyles;
 module.exports.getBadgeOuterClass = getBadgeOuterClass;
 module.exports.getBadgeInnerClass = getBadgeInnerClass;
+module.exports.getBadgeAriaLabel = getBadgeAriaLabel;
 module.exports.isShowBadge = isShowBadge;
diff --git a/src/badge/props.ts b/src/badge/props.ts
@@ -4,7 +4,9 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
+import { useId } from '../common/src/index';
 import { TdBadgeProps } from './type';
+
 const props: TdBadgeProps = {
   /** 颜色 */
   color: {
@@ -59,6 +61,14 @@ const props: TdBadgeProps = {
     type: String,
     value: 'medium',
   },
+  labelledbyId: {
+    type: String,
+    value: `labelledbyId_${useId()}`,
+  },
+  describedbyId: {
+    type: String,
+    value: `describedbyId_${useId()}`,
+  },
 };
 
 export default props;
diff --git a/src/badge/type.ts b/src/badge/type.ts
@@ -91,4 +91,12 @@ export interface TdBadgeProps {
     type: StringConstructor;
     value?: 'small' | 'medium';
   };
+  labelledbyId: {
+    type: StringConstructor;
+    value: string;
+  };
+  describedbyId: {
+    type: StringConstructor;
+    value: string;
+  };
 }
diff --git a/src/grid/__test__/__snapshots__/index.test.js.snap b/src/grid/__test__/__snapshots__/index.test.js.snap
@@ -18,7 +18,7 @@ exports[`grid :base 1`] = `
           bind:click="handleClick"
         >
           <wx-view
-            ariaLabelledby="t-id-0"
+            ariaLabelledby="t-id-2"
             ariaRole="button"
             class="t-grid-item t-class"
             hoverClass=""
@@ -36,15 +36,15 @@ exports[`grid :base 1`] = `
               >
                 <wx-view
                   class="t-grid-item__words t-grid-item__words--vertical"
-                  id="t-id-0"
+                  id="t-id-2"
                 />
               </wx-view>
             </wx-view>
           </wx-view>
         </t-grid-item>
         <t-grid-item>
           <wx-view
-            ariaLabelledby="t-id-1"
+            ariaLabelledby="t-id-3"
             ariaRole="button"
             class="t-grid-item t-class"
             hoverClass=""
@@ -62,7 +62,7 @@ exports[`grid :base 1`] = `
               >
                 <wx-view
                   class="t-grid-item__words t-grid-item__words--vertical"
-                  id="t-id-1"
+                  id="t-id-3"
                 />
               </wx-view>
             </wx-view>

diff --git a/src/tabs/__test__/__snapshots__/index.test.js.snap b/src/tabs/__test__/__snapshots__/index.test.js.snap
@@ -36,7 +36,7 @@ exports[`tabs :base 1`] = `
                 class="t-tabs__nav t-tabs__nav--left"
               >
                 <wx-view
-                  ariaControls="t-id-3-0"
+                  ariaControls="t-id-5-0"
                   ariaDisabled="{{false}}"
                   ariaRole="tab"
                   ariaSelected="{{true}}"
@@ -51,7 +51,7 @@ exports[`tabs :base 1`] = `
                   </wx-view>
                 </wx-view>
                 <wx-view
-                  ariaControls="t-id-3-1"
+                  ariaControls="t-id-5-1"
                   ariaDisabled="{{false}}"
                   ariaRole="tab"
                   ariaSelected="{{false}}"
@@ -66,7 +66,7 @@ exports[`tabs :base 1`] = `
                   </wx-view>
                 </wx-view>
                 <wx-view
-                  ariaControls="t-id-3-2"
+                  ariaControls="t-id-5-2"
                   ariaDisabled="{{false}}"
                   ariaRole="tab"
                   ariaSelected="{{false}}"
@@ -81,7 +81,7 @@ exports[`tabs :base 1`] = `
                   </wx-view>
                 </wx-view>
                 <wx-view
-                  ariaControls="t-id-3-3"
+                  ariaControls="t-id-5-3"
                   ariaDisabled="{{false}}"
                   ariaRole="tab"
                   ariaSelected="{{false}}"
@@ -124,7 +124,7 @@ exports[`tabs :base 1`] = `
           <wx-view
             ariaRole="tabpanel"
             class="t-tab-panel t-is-active"
-            id="t-id-3-0"
+            id="t-id-5-0"
             style="; "
           >
             标签一内容
@@ -134,7 +134,7 @@ exports[`tabs :base 1`] = `
           <wx-view
             ariaRole="tabpanel"
             class="t-tab-panel "
-            id="t-id-3-1"
+            id="t-id-5-1"
             style="; display: none"
           >
             标签1内容
@@ -144,7 +144,7 @@ exports[`tabs :base 1`] = `
           <wx-view
             ariaRole="tabpanel"
             class="t-tab-panel "
-            id="t-id-3-2"
+            id="t-id-5-2"
             style="; display: none"
           >
             标签2内容
@@ -154,7 +154,7 @@ exports[`tabs :base 1`] = `
           <wx-view
             ariaRole="tabpanel"
             class="t-tab-panel "
-            id="t-id-3-3"
+            id="t-id-5-3"
             style="; display: none"
           >
             标签3内容