feat(a11y): banner a11y (#492)

content/feedback/banner/index-en-US.md

@@ -184,5 +184,12 @@ import { Banner } from '@douyinfe/semi-ui';
 | title | Title | ReactNode | - | 1.0 |
 | type | Type of banner, one of `info`, `success`, `danger`, `warning` | string | `info` | - |
 
+## Accessibility
+
+### ARIA
+
+- The component has a `role` of 'alert'.
+- The close icon has a `aria-label` of 'Close'.
+
 ## Design Tokens
 <DesignToken/>

content/feedback/banner/index.md

@@ -183,5 +183,12 @@ import { Banner } from '@douyinfe/semi-ui';
 | title | 标题 | ReactNode | - | 1.0 |
 | type | 类型，支持 `info`, `success`, `danger`, `warning` | string | `info` | - |
 
+## Accessibility
+
+### ARIA
+
+- 组件的 `role` 为 'alert'
+- 关闭按钮的 `aria-label` 为 'Close'
+
 ## 设计变量
 <DesignToken/>

packages/semi-ui/banner/index.tsx

@@ -112,6 +112,7 @@ export default class Banner extends BaseComponent<BannerProps, BannerState> {
                 theme="borderless"
                 size="small"
                 type="tertiary"
+                aria-label='Close'
             />
         );
         return closer;
@@ -153,7 +154,7 @@ export default class Banner extends BaseComponent<BannerProps, BannerState> {
             [`${prefixCls}-bordered`]: !fullMode && bordered,
         });
         const banner = visible ? (
-            <div className={wrapper} style={style}>
+            <div className={wrapper} style={style} role="alert">
                 <div className={`${prefixCls}-content-wrapper`}>
                     <div className={`${prefixCls}-content`}>
                         {this.renderIcon()}