feat(a11y): layout (#419)

content/basic/layout/index-en-US.md

@@ -480,6 +480,8 @@ import { IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, IconHistogram, I
 | className  | Class name                                                                                                                                 | string  | -       |
 | hasSider   | Indicates that there is a Sider in the child element, which is generally not specified. It can be used to avoid style flashing during SSR. | boolean | -       |
 | style      | Style                                                                                                                                      | CSSProperties  | -       |
+| aria-label | [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute) attribute, used to label the current element Description, improve accessibility | string | | 2.2.0 |
+| role | [role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) attribute to improve accessibility | string | | 2.2.0 |
 
 ### Layout.Sider
 
@@ -489,6 +491,8 @@ import { IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, IconHistogram, I
 | className    | Class name                                                                             | string                               | -       |
 | style        | Style                                                                                  | CSSProperties                               | -       |
 | onBreakpoint | Callback function when triggering a responsive layout breakpoint                       | (screen: string, broken: bool) => void | -       |
+| aria-label | [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute) attribute, used to label the current element Description, improve accessibility | string | | 2.2.0 |
+| role | [role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) attribute to improve accessibility | string | | 2.2.0 |
 
 ### responsive map
 
@@ -503,7 +507,15 @@ import { IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, IconHistogram, I
 }
 ```
 
+## Accessibility
+
+### Aria
+
+- Sider can pass in aria-label props to describe the function of this Sider.
+- Header Content Main Footer can pass in role aria-label to describe the function of the corresponding element.
+
+
 <!-- ## Related Material
 ```material
 2, 43
-``` -->
+``` -->

content/basic/layout/index.md

@@ -494,6 +494,8 @@ import { IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, IconHistogram, I
 | className | 类名                                                               | string  | -      |
 | hasSider  | 表示子元素里有 Sider，一般不用指定。可用于服务端渲染时避免样式闪动 | boolean | -      |
 | style     | 样式                                                               | CSSProperties  | -      |
+| aria-label | [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute) 属性，用来给当前元素加上的标签描述, 提升可访问性 | string | | 2.2.0 |
+| role | [role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) 属性, 提升可访问性 | string | | 2.2.0 |
 
 ### Layout.Sider
 
@@ -503,6 +505,8 @@ import { IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, IconHistogram, I
 | className | 类名 | string | - |
 | style | 样式 | CSSProperties | - |
 | onBreakpoint | 触发响应式布局断点时的回调 | (screen: string, broken: bool) => void | - |
+| aria-label | [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute)属性，用来给当前元素加上的标签描述, 提升可访问性 | string | | 2.2.0 |
+| role | [role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles)属性, 提升可访问性 | string | | 2.2.0 |
 
 ### responsive map
 
@@ -517,6 +521,13 @@ import { IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, IconHistogram, I
 };
 ```
 
+## Accessibility
+
+### Aria
+
+- Sider 可传入 aria-label props，描述该 Sider 作用。
+- Header Content Main Footer 可传入 role aria-label 描述对应元素作用。
+
 <!-- ## 相关物料
 
 ```material

packages/semi-ui/layout/Sider.tsx

@@ -1,4 +1,4 @@
-import React, { CSSProperties } from 'react';
+import React, { AriaRole, CSSProperties } from 'react';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/layout/constants';
@@ -40,6 +40,8 @@ export interface SiderProps {
     className?: string;
     breakpoint?: Array<keyof ResponsiveMap>;
     onBreakpoint?: (screen: keyof ResponsiveMap, match: boolean) => void;
+    'aria-label'?: React.AriaAttributes['aria-label'];
+    'role'?:React.AriaRole
 }
 
 class Sider extends React.PureComponent<SiderProps> {
@@ -49,6 +51,8 @@ class Sider extends React.PureComponent<SiderProps> {
         className: PropTypes.string,
         breakpoint: PropTypes.arrayOf(PropTypes.oneOf(bpt)),
         onBreakpoint: PropTypes.func,
+        'aria-label': PropTypes.string,
+        role: PropTypes.string,
     };
 
     static defaultProps = {
@@ -104,7 +108,7 @@ class Sider extends React.PureComponent<SiderProps> {
             [`${prefixCls}-sider`]: true,
         });
         return (
-            <aside className={classString} style={style} {...getDataAttr(others)}>
+            <aside className={classString} aria-label={this.props['aria-label']} style={style} {...getDataAttr(others)}>
                 <div className={`${prefixCls}-sider-children`}>
                     {children}
                 </div>

packages/semi-ui/layout/index.tsx

@@ -1,4 +1,4 @@
-import React, { CSSProperties, ComponentClass } from 'react';
+import React, { AriaRole, ComponentClass, CSSProperties } from 'react';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
 import { cssClasses } from '@douyinfe/semi-foundation/layout/constants';
@@ -15,12 +15,13 @@ const htmlTag = {
     Layout: 'section'
 };
 
-function generator<P extends { type?: string; tagName?: string }>(type: string): (ComponentType: ComponentClass<{ type?: string; tagName?: string } & P>) => ComponentClass<P> {
+function generator<P extends { type?: string; tagName?: string; role?: AriaRole; 'aria-label'?: string }>(type: string): (ComponentType: ComponentClass<{ type?: string; tagName?: string } & P>) => ComponentClass<P> {
     const tagName = htmlTag[type];
     const typeName = type.toLowerCase();
     return (BasicComponent): ComponentClass<P> => class Adapter extends React.PureComponent<P> {
         render() {
-            return <BasicComponent type={typeName} tagName={tagName} {...this.props} />;
+            return <BasicComponent role={this.props.role} aria-label={this.props['aria-label']} type={typeName}
+                tagName={tagName} {...this.props} />;
         }
     };
 }