From 6af214cfb5529317ccbbac0b780b0e907851550a Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Mon, 28 Oct 2024 16:16:41 +0800
Subject: [PATCH 1/2] feat: improve a11y behavior

---
 package.json  |  1 +
 src/Panel.tsx | 64 +++++++++++++++++++++++----------------------------
 2 files changed, 30 insertions(+), 35 deletions(-)

diff --git a/package.json b/package.json
index cef3584..6f3479e 100644
--- a/package.json
+++ b/package.json
@@ -54,6 +54,7 @@
     "@rc-component/father-plugin": "^1.0.1",
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.2",
     "@types/classnames": "^2.2.9",
     "@types/jest": "^29.4.0",
     "@types/react": "^18.0.0",
diff --git a/src/Panel.tsx b/src/Panel.tsx
index 379202b..b2f738a 100644
--- a/src/Panel.tsx
+++ b/src/Panel.tsx
@@ -29,37 +29,39 @@ const CollapsePanel = React.forwardRef<HTMLDivElement, CollapsePanelProps>((prop
   } = props;
 
   const disabled = collapsible === 'disabled';
-  const collapsibleHeader = collapsible === 'header';
-  const collapsibleIcon = collapsible === 'icon';
 
   const ifExtraExist = extra !== null && extra !== undefined && typeof extra !== 'boolean';
 
-  const handleItemClick = () => {
-    onItemClick?.(panelKey!);
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter' || e.keyCode === KeyCode.ENTER || e.which === KeyCode.ENTER) {
-      handleItemClick();
-    }
+  const collapsibleProps = {
+    onClick: () => {
+      onItemClick?.(panelKey);
+    },
+    onKeyDown: (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter' || e.keyCode === KeyCode.ENTER || e.which === KeyCode.ENTER) {
+        onItemClick?.(panelKey);
+      }
+    },
+    role: accordion ? 'tab' : 'button',
+    ['aria-expanded']: isActive,
+    ['aria-disabled']: disabled,
+    tabIndex: disabled ? -1 : 0,
   };
 
   // ======================== Icon ========================
-  let iconNode = typeof expandIcon === 'function' ? expandIcon(props) : <i className="arrow" />;
-  if (iconNode) {
-    iconNode = (
-      <div
-        className={`${prefixCls}-expand-icon`}
-        onClick={['header', 'icon'].includes(collapsible as string) ? handleItemClick : undefined}
-      >
-        {iconNode}
-      </div>
-    );
-  }
+  const iconNodeInner =
+    typeof expandIcon === 'function' ? expandIcon(props) : <i className="arrow" />;
+  const iconNode = iconNodeInner && (
+    <div
+      className={`${prefixCls}-expand-icon`}
+      {...(['header', 'icon'].includes(collapsible) ? collapsibleProps : {})}
+    >
+      {iconNodeInner}
+    </div>
+  );
 
   const collapsePanelClassNames = classNames(
+    `${prefixCls}-item`,
     {
-      [`${prefixCls}-item`]: true,
       [`${prefixCls}-item-active`]: isActive,
       [`${prefixCls}-item-disabled`]: disabled,
     },
@@ -68,10 +70,10 @@ const CollapsePanel = React.forwardRef<HTMLDivElement, CollapsePanelProps>((prop
 
   const headerClassName = classNames(
     headerClass,
+    `${prefixCls}-header`,
     {
-      [`${prefixCls}-header`]: true,
-      [`${prefixCls}-header-collapsible-only`]: collapsibleHeader,
-      [`${prefixCls}-icon-collapsible-only`]: collapsibleIcon,
+      [`${prefixCls}-header-collapsible-only`]: collapsible === 'header',
+      [`${prefixCls}-icon-collapsible-only`]: collapsible === 'icon',
     },
     customizeClassNames.header,
   );
@@ -79,18 +81,10 @@ const CollapsePanel = React.forwardRef<HTMLDivElement, CollapsePanelProps>((prop
   // ======================== HeaderProps ========================
   const headerProps: React.HTMLAttributes<HTMLDivElement> = {
     className: headerClassName,
-    'aria-expanded': isActive,
-    'aria-disabled': disabled,
-    onKeyDown: handleKeyDown,
     style: styles.header,
-    role: accordion ? 'tab' : 'button',
+    ...(['header', 'icon'].includes(collapsible) ? {} : collapsibleProps),
   };
 
-  if (!collapsibleHeader && !collapsibleIcon) {
-    headerProps.onClick = handleItemClick;
-    headerProps.tabIndex = disabled ? -1 : 0;
-  }
-
   // ======================== Render ========================
   return (
     <div {...resetProps} ref={ref} className={collapsePanelClassNames}>
@@ -98,7 +92,7 @@ const CollapsePanel = React.forwardRef<HTMLDivElement, CollapsePanelProps>((prop
         {showArrow && iconNode}
         <span
           className={`${prefixCls}-header-text`}
-          onClick={collapsible === 'header' ? handleItemClick : undefined}
+          {...(collapsible === 'header' ? collapsibleProps : {})}
         >
           {header}
         </span>

From 9387e53e616d8375c1b5f4e2cc9c124fd7402c0a Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Mon, 28 Oct 2024 16:24:17 +0800
Subject: [PATCH 2/2] feat: improve a11y behavior

---
 assets/index.less                       | 4 ++--
 src/Panel.tsx                           | 3 +--
 tests/__snapshots__/index.spec.tsx.snap | 2 +-
 3 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/assets/index.less b/assets/index.less
index 69f97a8..097e655 100644
--- a/assets/index.less
+++ b/assets/index.less
@@ -59,7 +59,7 @@
         margin: 0 16px 0 auto;
       }
     }
-    .@{prefixCls}-header-collapsible-only {
+    .@{prefixCls}-collapsible-header {
       cursor: default;
       .@{prefixCls}-header-text {
         cursor: pointer;
@@ -68,7 +68,7 @@
         cursor: pointer;
       }
     }
-    .@{prefixCls}-icon-collapsible-only {
+    .@{prefixCls}-collapsible-icon {
       cursor: default;
       .@{prefixCls}-expand-icon {
         cursor: pointer;
diff --git a/src/Panel.tsx b/src/Panel.tsx
index b2f738a..4f21792 100644
--- a/src/Panel.tsx
+++ b/src/Panel.tsx
@@ -72,8 +72,7 @@ const CollapsePanel = React.forwardRef<HTMLDivElement, CollapsePanelProps>((prop
     headerClass,
     `${prefixCls}-header`,
     {
-      [`${prefixCls}-header-collapsible-only`]: collapsible === 'header',
-      [`${prefixCls}-icon-collapsible-only`]: collapsible === 'icon',
+      [`${prefixCls}-collapsible-${collapsible}`]: !!collapsible,
     },
     customizeClassNames.header,
   );
diff --git a/tests/__snapshots__/index.spec.tsx.snap b/tests/__snapshots__/index.spec.tsx.snap
index ddbe32a..34c8c4a 100644
--- a/tests/__snapshots__/index.spec.tsx.snap
+++ b/tests/__snapshots__/index.spec.tsx.snap
@@ -10,7 +10,7 @@ exports[`collapse props items should work with nested 1`] = `
     <div
       aria-disabled="true"
       aria-expanded="false"
-      class="rc-collapse-header"
+      class="rc-collapse-header rc-collapse-collapsible-disabled"
       role="button"
       tabindex="-1"
     >