Browse Source

feat(empty): a11y #205

走鹃 3 years ago
parent
commit
f3c4478641

+ 1 - 1
packages/semi-ui/button/buttonGroup.tsx

@@ -41,6 +41,6 @@ export default class ButtonGroup extends BaseComponent<ButtonGroupProps> {
                 React.cloneElement(itm, { disabled, size, type, ...itm.props, ...rest, key: index })
                 React.cloneElement(itm, { disabled, size, type, ...itm.props, ...rest, key: index })
             );
             );
         }
         }
-        return <div className={`${prefixCls}-group`} aria-label="button group">{inner}</div>;
+        return <div className={`${prefixCls}-group`} role="group" aria-label="button group">{inner}</div>;
     }
     }
 }
 }

+ 1 - 1
packages/semi-ui/button/splitButtonGroup.tsx

@@ -19,7 +19,7 @@ export default class SplitButtonGroup extends BaseComponent<SplitButtonGroupProp
         const { children, style, className } = this.props;
         const { children, style, className } = this.props;
         const cls = classNames(`${prefixCls}-split`, className);
         const cls = classNames(`${prefixCls}-split`, className);
         return (
         return (
-            <div className={cls} style={style}>
+            <div className={cls} style={style} role="group" aria-label="split style button group">
                 {children}
                 {children}
             </div>
             </div>
         );
         );

+ 5 - 5
packages/semi-ui/empty/index.tsx

@@ -108,17 +108,17 @@ export default class Empty extends BaseComponent<EmptyProps, EmptyState> {
                 style: { fontWeight: 400 },
                 style: { fontWeight: 400 },
             };
             };
         return (
         return (
-            <div className={wrapperCls} style={style}>
-                <div className={`${prefixCls}-image`} style={imageStyle}>
+            <div className={wrapperCls} style={style} aria-label="empty placeholder image">
+                <div className={`${prefixCls}-image`} style={imageStyle} >
                     {imageNode}
                     {imageNode}
                 </div>
                 </div>
-                <div className={`${prefixCls}-content`}>
+                <div className={`${prefixCls}-content`} >
                     {title ? (
                     {title ? (
-                        <Typography.Title {...(titleProps as any)} className={`${prefixCls}-title`}>
+                        <Typography.Title {...(titleProps as any)} className={`${prefixCls}-title`} >
                             {title}
                             {title}
                         </Typography.Title>
                         </Typography.Title>
                     ) : null}
                     ) : null}
-                    {description ? <div className={`${prefixCls}-description`}>{description}</div> : null}
+                    {description ? <div className={`${prefixCls}-description`} >{description}</div> : null}
                     {children ? <div className={`${prefixCls}-footer`}>{children}</div> : null}
                     {children ? <div className={`${prefixCls}-footer`}>{children}</div> : null}
                 </div>
                 </div>
             </div>
             </div>