a11y:sidesheet (#415)

* a11y:sidesheet

chore:change

chore:change

chore:change

chore:change

chore:change

chore:docs

* Update SideSheetContent.tsx

* Update SideSheetContent.tsx

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

@@ -298,6 +298,15 @@ class Demo extends React.Component {
 }
 ```
 
+## Accessibility
+
+### Aria
+
+- SideSheet has a `dialog` role to indicate that it is a pop-up component, and the internal header has a `heading` role to indicate that it is a header.
+- SideSheet content title body footer has label to indicate the role of the element.
+- SideSheet supports passing in `aria-label` to indicate the role of the SideSheet
+
+
 ## API Reference
 
 | Properties | Instructions | type | Default | Version |

content/show/sidesheet/index.md

@@ -296,6 +296,17 @@ class Demo extends React.Component {
 }
 ```
 
+
+## Accessibility
+
+### Aria
+
+- SideSheet 具有 `dialog` role 来表示它是一个弹窗组件， 内部 header 具有 `heading` role 表明是 header。
+- SideSheet content title body footer 均具有 label 来表明元素作用。
+- SideSheet 支持传入 `aria-label` 来表示该 SideSheet 作用
+
+
+
 ## API 参考
 
 | 属性 | 说明 | 类型 | 默认值 | 版本 |

packages/semi-foundation/sideSheet/sideSheetFoundation.ts

@@ -29,13 +29,14 @@ export interface SideSheetProps {
     width?: number | string;
     zIndex?: number;
     children?: any;
+    'aria-label'?: string;
 }
 
-export interface SideSheetState{
+export interface SideSheetState {
     hidden: boolean;
 }
 
-export interface SideSheetAdapter extends DefaultAdapter<SideSheetProps, SideSheetState>{
+export interface SideSheetAdapter extends DefaultAdapter<SideSheetProps, SideSheetState> {
     disabledBodyScroll: () => void;
     enabledBodyScroll: () => void;
     notifyCancel: (e: any) => void;
@@ -46,9 +47,6 @@ export interface SideSheetAdapter extends DefaultAdapter<SideSheetProps, SideShe
 }
 
 
-
-
-
 export default class SideSheetFoundation extends BaseFoundation<SideSheetAdapter> {
     constructor(adapter: SideSheetAdapter) {
         super({ ...SideSheetFoundation.defaultAdapter, ...adapter });

packages/semi-ui/sideSheet/SideSheetContent.tsx

@@ -10,7 +10,7 @@ let uuid = 0;
 const prefixCls = cssClasses.PREFIX;
 
 
-export interface SideSheetContentProps{
+export interface SideSheetContentProps {
     onClose?: (e: React.MouseEvent) => void;
     mask?: boolean;
     maskStyle?: CSSProperties;
@@ -24,6 +24,7 @@ export interface SideSheetContentProps{
     bodyStyle?: CSSProperties;
     className: string;
     footer?: React.ReactNode;
+    'aria-label'?: string;
 }
 
 export default class SideSheetContent extends React.PureComponent<SideSheetContentProps> {
@@ -66,6 +67,7 @@ export default class SideSheetContent extends React.PureComponent<SideSheetConte
         if (mask) {
             return (
                 <div
+                    aria-hidden={true}
                     key="mask"
                     className={`${prefixCls}-mask`}
                     style={maskStyle}
@@ -85,7 +87,7 @@ export default class SideSheetContent extends React.PureComponent<SideSheetConte
         let header, closer;
         if (title) {
             header = (
-                <div className={`${prefixCls}-title`}>
+                <div className={`${prefixCls}-title`} aria-label={'Sidesheet title'}>
                     {this.props.title}
                 </div>
             );
@@ -97,14 +99,14 @@ export default class SideSheetContent extends React.PureComponent<SideSheetConte
                     key="close-btn"
                     onClick={this.close}
                     type="tertiary"
-                    icon={<IconClose />}
+                    icon={<IconClose/>}
                     theme="borderless"
                     size="small"
                 />
             );
         }
         return (
-            <div className={`${prefixCls}-header`} style={{ ...headerStyle }}>
+            <div className={`${prefixCls}-header`} role={'heading'} style={{ ...headerStyle }}>
                 {header}
                 {closer}
             </div>
@@ -128,20 +130,20 @@ export default class SideSheetContent extends React.PureComponent<SideSheetConte
         const dialogElement = (
             <div
                 key="dialog-element"
-                role="sidesheet"
+                role="dialog"
                 tabIndex={-1}
                 className={`${prefixCls}-inner ${prefixCls}-inner-wrap`}
                 // onMouseDown={this.onDialogMouseDown}
                 style={{ ...props.style, ...style }}
                 // id={this.dialogId}
             >
-                <div className={`${prefixCls}-content`}>
+                <div className={`${prefixCls}-content`} aria-label={`Sidesheet content`}>
                     {header}
-                    <div className={`${prefixCls}-body`} style={props.bodyStyle}>
+                    <div className={`${prefixCls}-body`} aria-label={`Sidesheet body`} style={props.bodyStyle}>
                         {props.children}
                     </div>
                     {props.footer ? (
-                        <div className={`${prefixCls}-footer`}>
+                        <div className={`${prefixCls}-footer`} aria-label={`Sidesheet footer`}>
                             {props.footer}
                         </div>
                     ) : null}
@@ -165,7 +167,9 @@ export default class SideSheetContent extends React.PureComponent<SideSheetConte
             wrapperStyle.width = width;
         }
         return (
-            <div className={wrapperCls} style={wrapperStyle}>
+            <div className={wrapperCls}
+                style={wrapperStyle}
+                aria-label={this.props['aria-label']}>
                 {this.getMaskElement()}
                 {this.getDialogElement()}
             </div>

packages/semi-ui/sideSheet/index.tsx

@@ -23,7 +23,7 @@ const defaultHeight = strings.HEIGHT;
 export { SideSheetContentProps } from './SideSheetContent';
 export { SideSheetTransitionProps } from './SideSheetTransition';
 
-export interface SideSheetReactProps extends SideSheetProps{
+export interface SideSheetReactProps extends SideSheetProps {
     bodyStyle?: CSSProperties;
     headerStyle?: CSSProperties;
     maskStyle?: CSSProperties;
@@ -65,7 +65,8 @@ export default class SideSheet extends BaseComponent<SideSheetReactProps, SideSh
         afterVisibleChange: PropTypes.func,
         closeOnEsc: PropTypes.bool,
         footer: PropTypes.node,
-        keepDOM: PropTypes.bool
+        keepDOM: PropTypes.bool,
+        'aria-label': PropTypes.string,
     };
 
     static defaultProps: SideSheetReactProps = {