chore: [Card] support a11y aria-* (#473)

chore: [Card] support a11y aria

Co-authored-by: chenyuling <[email protected]>

content/show/card/index-en-US.md

@@ -73,6 +73,7 @@ function Demo() {
                     title="Semi Doc" 
                     avatar={
                         <Avatar 
+                            alt='Card meta img'
                             size="default"
                             src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'
                         />
@@ -183,6 +184,7 @@ function Demo() {
                     title="Semi Doc" 
                     avatar={
                         <Avatar 
+                            alt='Card meta img'
                             size="default"
                             src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'
                         />
@@ -214,6 +216,7 @@ function Demo() {
                     title="Semi Doc" 
                     avatar={
                         <Avatar 
+                            alt='Card meta img'
                             size="default"
                             src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'
                         />
@@ -258,6 +261,7 @@ function Demo() {
                     description="Easily manage your project icons and easily upload, update and share a series of project icons." 
                     avatar={
                         <Avatar 
+                            alt='Card meta img'
                             size="default"
                             src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'
                         />
@@ -462,6 +466,7 @@ function Demo() {
                         avatar={
                             <Skeleton placeholder={<Skeleton.Avatar />} loading={loading}>
                                 <Avatar 
+                                    alt='Card meta img'
                                     size="default"
                                     src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'
                                 />
@@ -691,6 +696,12 @@ function Demo() {
 |style      |Meta style            |CSSProperties|-       |1.21.0 |
 |title      |title                 |ReactNode    |-       |1.21.0 |
 
+## Accessibility
+
+- Card supports the input of `aria-label` to indicate the function of the Card;
+- When Card loading, `aria-busy` will be turned on;
+- Card is a container-type component, and any elements inside the card need to follow their respective accessibility guidelines.
+
 ## Design Tokens
 <DesignToken/>
 

content/show/card/index.md

@@ -73,6 +73,7 @@ function Demo() {
                     title="Semi Doc" 
                     avatar={
                         <Avatar 
+                            alt='Card meta img'
                             size="default"
                             src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'
                         />
@@ -183,6 +184,7 @@ function Demo() {
                     title="Semi Doc" 
                     avatar={
                         <Avatar 
+                            alt='Card meta img'
                             size="default"
                             src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'
                         />
@@ -214,6 +216,7 @@ function Demo() {
                     title="Semi Doc" 
                     avatar={
                         <Avatar 
+                            alt='Card meta img'
                             size="default"
                             src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'
                         />
@@ -258,6 +261,7 @@ function Demo() {
                     description="全面、易用、优质" 
                     avatar={
                         <Avatar 
+                            alt='Card meta img'
                             size="default"
                             src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'
                         />
@@ -462,6 +466,7 @@ function Demo() {
                         avatar={
                             <Skeleton placeholder={<Skeleton.Avatar />} loading={loading}>
                                 <Avatar 
+                                    alt='Card meta img'
                                     size="default"
                                     src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'
                                 />
@@ -691,6 +696,12 @@ function Demo() {
 |style      |内联样式|CSSProperties|-     |1.21.0|
 |title      |标题   |ReactNode    |-     |1.21.0|
 
+## Accessibility
+
+- Card 支持传入 `aria-label` 来表示该 Card 作用；
+- Card loading 时，将开启 `aria-busy`；
+- Card 为容器型组件，卡片内部的任何元素需要遵循各自的可访问性指南。
+
 ## 设计变量
 <DesignToken/>
 

packages/semi-ui/card/_story/card.stories.js

@@ -36,6 +36,7 @@ export const Default = () => (
       style={{
         width: 360,
       }}
+      aria-label='basic card'
       headerExtraContent={<Text link={{}}>更多</Text>}
     >
       Semi Design 是由互娱社区前端团队与 UED
@@ -129,6 +130,7 @@ export function Simple() {
           avatar={
             <Avatar
               size="default"
+              alt="Card meta avatar"
               src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg"
             />
           }
@@ -233,6 +235,7 @@ export const MetaDemo = () => (
         description="全面、易用、优质"
         avatar={
           <Avatar
+            alt="Card meta avatar"
             size="default"
             src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg"
           />
@@ -335,12 +338,13 @@ export function Loading() {
   const { Title, Paragraph, Image } = Skeleton;
   return (
     <Space vertical align="start" spacing="medium">
-      <Switch onChange={v => setLoading(!v)} />
+      <Switch onChange={v => setLoading(!v)} aria-label='switch card loading status'/>
       <Card
         style={{
           width: 360,
         }}
         loading={loading}
+        aria-busy={loading}
       >
         <Meta title="Semi Doc" description="全面、易用、优质" />
       </Card>
@@ -451,6 +455,7 @@ export const Actions = () => (
           avatar={
             <Avatar
               size="default"
+              alt="Card meta avatar"
               src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg"
             />
           }
@@ -485,6 +490,7 @@ export const Actions = () => (
           description="全面、易用、优质"
           avatar={
             <Avatar
+              alt="Card meta avatar"
               size="default"
               src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg"
             />
@@ -515,6 +521,7 @@ export const CardGroupDemo = () => (
             description="全面、易用、优质"
             avatar={
               <Avatar
+                alt="Card meta avatar"
                 size="default"
                 src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg"
               />

packages/semi-ui/card/_story/card.stories.tsx

@@ -21,6 +21,7 @@ stories.add('default', () => (
             avatar={
               <Avatar 
                 size="default"
+                alt="example"
                 src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'
               />
             }
@@ -48,6 +49,7 @@ stories.add('default', () => (
             description="全面、易用、优质" 
             avatar={
               <Avatar 
+                alt="example"
                 size="default"
                 src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'
               />
@@ -76,6 +78,7 @@ stories.add('default', () => (
             description="全面、易用、优质" 
             avatar={
               <Avatar 
+                alt='example'
                 size="default"
                 src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'
               />

packages/semi-ui/card/index.tsx

@@ -50,6 +50,8 @@ export interface CardProps {
     style?: CSSProperties;
     /** Title */
     title?: ReactNode;
+    /** aria label */
+    'aria-label'?: string;
 }
 
 
@@ -73,7 +75,8 @@ class Card extends PureComponent<CardProps> {
         loading: PropTypes.bool,
         shadows: PropTypes.oneOf(strings.SHADOWS),
         style: PropTypes.object,
-        title: PropTypes.node
+        title: PropTypes.node,
+        'aria-label': PropTypes.string,
     };
 
     static defaultProps = {
@@ -230,7 +233,7 @@ class Card extends PureComponent<CardProps> {
         });
 
         return (
-            <div {...others} className={cardCls} style={style}>
+            <div {...others} aria-busy={this.props.loading} className={cardCls} style={style}>
                 {this.renderHeader()}
                 {this.renderCover()}
                 {this.renderBody()}