feat(card): wai-aria

CHANGELOG.en-US.md

@@ -5,6 +5,7 @@
 ### Feats
 
 - `n-button` supports wai-aria.
+- `n-card` supports wai-aria.
 
 ### Fixes
 

CHANGELOG.zh-CN.md

@@ -5,6 +5,7 @@
 ### Feats
 
 - `n-button` 支持 wai-aria
+- `n-card` 支持 wai-aria
 
 ### Fixes
 

src/_internal/close/src/Close.tsx

@@ -13,7 +13,7 @@ export default defineComponent({
     },
     disabled: {
       type: Boolean,
-      default: false
+      default: undefined
     },
     onClick: Function as PropType<(e: MouseEvent) => void>
   },
@@ -23,6 +23,9 @@ export default defineComponent({
       const { clsPrefix, disabled } = props
       return (
         <NBaseIcon
+          role="button"
+          ariaDisabled={disabled}
+          ariaLabel="close"
           clsPrefix={clsPrefix}
           class={[
             `${clsPrefix}-base-close`,

src/_internal/icon/src/Icon.tsx

@@ -5,6 +5,16 @@ import style from './styles/index.cssr'
 export default defineComponent({
   name: 'BaseIcon',
   props: {
+    role: String,
+    ariaLabel: String,
+    ariaDisabled: {
+      type: Boolean,
+      default: undefined
+    },
+    ariaHidden: {
+      type: Boolean,
+      default: undefined
+    },
     clsPrefix: {
       type: String,
       required: true
@@ -21,6 +31,10 @@ export default defineComponent({
         class={`${this.clsPrefix}-base-icon`}
         onClick={this.onClick}
         onMousedown={this.onMousedown}
+        role={this.role}
+        aria-label={this.ariaLabel}
+        aria-hidden={this.ariaHidden}
+        aria-disabled={this.ariaDisabled}
       >
         {this.$slots}
       </i>

src/card/src/Card.tsx

@@ -162,7 +162,7 @@ export default defineComponent({
         style={this.cssVars as CSSProperties}
       >
         {$slots.cover ? (
-          <div class={`${mergedClsPrefix}-card-cover`}>
+          <div class={`${mergedClsPrefix}-card-cover`} role="none">
             {renderSlot($slots, 'cover')}
           </div>
         ) : null}
@@ -171,6 +171,7 @@ export default defineComponent({
             <div
               class={`${mergedClsPrefix}-card-header__main`}
               style={this.headerStyle}
+              role="heading"
             >
               {renderSlot($slots, 'header', {}, () => [this.title])}
             </div>
@@ -191,6 +192,7 @@ export default defineComponent({
         <div
           class={`${mergedClsPrefix}-card__content`}
           style={this.contentStyle}
+          role="none"
         >
           {$slots}
         </div>
@@ -198,12 +200,13 @@ export default defineComponent({
           <div
             class={`${mergedClsPrefix}-card__footer`}
             style={this.footerStyle}
+            role="none"
           >
             {renderSlot($slots, 'footer')}
           </div>
         ) : null}
         {$slots.action ? (
-          <div class={`${mergedClsPrefix}-card__action`}>
+          <div class={`${mergedClsPrefix}-card__action`} role="none">
             {renderSlot($slots, 'action')}
           </div>
         ) : null}