a11y:collapse (#417)

* a11y:collapse

* chore:change

* chore:change

* Update index.tsx

* Update item.tsx

* fix: collapse a11y

* feat: a11y collapse docs & fix

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

@@ -319,4 +319,4 @@ Hook Notification ( >= 1.2.0 )
 When you need access Context, you could use ``Notification.useNotification` to create a `contextHolder` and insert to corresponding DOM tree. Notification created by hooks will be able to access the context where `contextHolder` is inserted. Hook Notification has following methods: `info`, `success`, `warning`, `error`, `open`, `close`. For more usage demo, refer to [useToast](/en-US/components/toast#useToast_Hooks)
 
 ## Design Tokens
-<DesignToken/>
+<DesignToken/>

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

@@ -149,6 +149,20 @@ import { IconCopy } from '@douyinfe/semi-icons';
 | reCalcKey | When reCalcKey changes, the height of children will be reset. Used for optimize dynamic content rendering. | string \| number |-| 1.5.0 |
 | style | inline CSS style | CSSProperties | - ||
 
+
+## Accessibility
+
+### ARIA
+
+- The `aria-label` of the component is'Collapse'
+- The button on the right side of the panel header is set to `aria-hidden=true`
+- The extra section `aria-label` of the panel header is set to'Extra of collapse header'
+- Panel header `aria-label` is'Collapse panel'
+- The interactive part of the panel header is set to the `aria-owns` value corresponding to the panel content
+- Panel content `aria-label` is set to'Collapse content'
+- The content of the panel is set with `aria-hidden`, and its value is automatically switched between true and false with the display of the panel content
+
+
 ## Design Tokens
 
 <DesignToken/>

content/show/collapse/index.md

@@ -149,6 +149,22 @@ import { IconCopy } from '@douyinfe/semi-icons';
 | reCalcKey | 当 reCalcKey 改变时，将重新计算子节点的高度，用于优化动态渲染时的计算 | string \| number |无| 1.5.0  |
 | style     | 内联 CSS 样式                                                         | CSSProperties                 |  无  |    |
 
+
+## Accessibility
+
+### ARIA
+
+- 组件的 `aria-label` 为 'Collapse'
+- 面板 header 右侧按钮 设置了 `aria-hidden=true`
+- 面板 header 的 extra 部分  `aria-label` 设置为 'Extra of collapse header'
+- 面板 header `aria-label` 为 'Collapse panel'
+- 面版 header 可交互部分 设置了 `aria-owns` 值为对应面板内容
+- 面板内容 `aria-label`设置为 'Collapse content'
+- 面版内容 设置了 `aria-hidden` 随面板内容展现隐藏其值在 true 和 false 之间自动切换
+
+
+
+
 ## 设计变量
 
 <DesignToken/>

packages/semi-ui/collapse/index.tsx

@@ -97,7 +97,7 @@ class Collapse extends BaseComponent<CollapseReactProps, CollapseState> {
         const clsPrefix = cls(cssClasses.PREFIX, className);
         const { activeSet } = this.state;
         return (
-            <div className={clsPrefix} style={style}>
+            <div className={clsPrefix} style={style} aria-label={`Collapse`}>
                 <CollapseContext.Provider
                     value={{
                         activeSet,
@@ -116,4 +116,4 @@ class Collapse extends BaseComponent<CollapseReactProps, CollapseState> {
     }
 }
 
-export default Collapse;
+export default Collapse;

packages/semi-ui/collapse/item.tsx

@@ -1,12 +1,13 @@
-import React, { PureComponent, ReactNode, CSSProperties } from 'react';
+import React, { CSSProperties, PureComponent, ReactNode } from 'react';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
 import { cssClasses } from '@douyinfe/semi-foundation/collapse/constants';
 import Collapsible from '../collapsible';
 import CollapseContext, { CollapseContextType } from './collapse-context';
 import { IconChevronDown, IconChevronUp } from '@douyinfe/semi-icons';
+import { getUuidShort } from '@douyinfe/semi-foundation/utils/uuid';
 
-export interface CollapsePanelProps{
+export interface CollapsePanelProps {
     itemKey: string;
     extra?: ReactNode;
     header?: ReactNode;
@@ -32,6 +33,8 @@ export default class CollapsePanel extends PureComponent<CollapsePanelProps> {
         ]),
     };
 
+    private ariaID = getUuidShort({});
+
     renderHeader(active: boolean, expandIconEnable = true) {
         const {
             header,
@@ -43,13 +46,13 @@ export default class CollapsePanel extends PureComponent<CollapsePanelProps> {
         } = this.context;
         const { expandIconPosition } = this.context;
         if (typeof expandIcon === 'undefined') {
-            expandIcon = (<IconChevronDown />);
+            expandIcon = (<IconChevronDown/>);
         }
         if (typeof collapseIcon === 'undefined') {
-            collapseIcon = (<IconChevronUp />);
+            collapseIcon = (<IconChevronUp/>);
         }
         const icon = (
-            <span className={cls([`${cssClasses.PREFIX}-header-icon`,
+            <span aria-hidden='true' className={cls([`${cssClasses.PREFIX}-header-icon`,
                 { [`${cssClasses.PREFIX}-header-iconDisabled`]: !expandIconEnable }])}>
                 {/* eslint-disable-next-line no-nested-ternary */}
                 {expandIconEnable ? (active ? collapseIcon : expandIcon) : expandIcon}
@@ -62,7 +65,7 @@ export default class CollapsePanel extends PureComponent<CollapsePanelProps> {
                     {iconPosLeft ? icon : null}
                     <span>{header}</span>
                     <span className={`${cssClasses.PREFIX}-header-right`}>
-                        <span>{extra}</span>
+                        <span aria-label={'Extra of collapse header'}>{extra}</span>
                         {iconPosLeft ? null : icon}
                     </span>
                 </>
@@ -105,7 +108,7 @@ export default class CollapsePanel extends PureComponent<CollapsePanelProps> {
         });
         return (
             <div
-                role="Collapse-panel"
+                aria-label={'Collapse panel'}
                 className={itemCls}
                 {...restProps}
             >
@@ -114,6 +117,7 @@ export default class CollapsePanel extends PureComponent<CollapsePanelProps> {
                     tabIndex={0}
                     className={headerCls}
                     aria-expanded={active ? 'true' : 'false'}
+                    aria-owns={this.ariaID}
                     onClick={e => onClick(itemKey, e)}
                 >
                     {this.renderHeader(active, children !== undefined)}
@@ -125,6 +129,9 @@ export default class CollapsePanel extends PureComponent<CollapsePanelProps> {
                             reCalcKey={reCalcKey}>
                             <div
                                 className={contentCls}
+                                aria-label={'Collapse content'}
+                                aria-hidden={!active}
+                                id={this.ariaID}
                             >
                                 <div className={`${cssClasses.PREFIX}-content-wrapper`}>
                                     {children}
@@ -136,4 +143,4 @@ export default class CollapsePanel extends PureComponent<CollapsePanelProps> {
             </div>
         );
     }
-}
+}