From d15fd5a87de0f766b0062487dac330bd3d776629 Mon Sep 17 00:00:00 2001
From: Dmytro Cherendieiev <dmytro_cherendieiev@epam.com>
Date: Fri, 15 Mar 2024 13:47:52 +0200
Subject: [PATCH 1/2] fix: allow data-* and aria-* attributes

---
 src/Collapse.tsx     |  2 ++
 tests/index.spec.tsx | 28 ++++++++++++++++++++++------
 2 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/Collapse.tsx b/src/Collapse.tsx
index 8d58f4c..6f3d2d0 100644
--- a/src/Collapse.tsx
+++ b/src/Collapse.tsx
@@ -31,6 +31,7 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) =>
     defaultActiveKey,
     onChange,
     items,
+    ...restProps
   } = props;
 
   const collapseClassName = classNames(prefixCls, className);
@@ -81,6 +82,7 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) =>
       className={collapseClassName}
       style={style}
       role={accordion ? 'tablist' : undefined}
+      {...restProps}
     >
       {mergedChildren}
     </div>
diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx
index 2ce7fcd..5ae23e5 100644
--- a/tests/index.spec.tsx
+++ b/tests/index.spec.tsx
@@ -55,7 +55,7 @@ describe('collapse', () => {
       expect(collapse.container.querySelectorAll('.rc-collapse-content')).toHaveLength(0);
     });
 
-    it('should render custom arrow icon corrctly', () => {
+    it('should render custom arrow icon correctly', () => {
       expect(collapse.container.querySelector('.rc-collapse-header')?.textContent).toContain(
         'test>',
       );
@@ -190,23 +190,22 @@ describe('collapse', () => {
 
   describe('prop: headerClass', () => {
     it('applies the passed headerClass to the header', () => {
-
       const element = (
-        <Collapse onChange={onChange} >
-          <Panel header="collapse 1" key="1" headerClass='custom-class'>
+        <Collapse onChange={onChange}>
+          <Panel header="collapse 1" key="1" headerClass="custom-class">
             first
           </Panel>
         </Collapse>
       );
 
-      const {container} = render(element)
+      const { container } = render(element);
       const header = container.querySelector('.rc-collapse-header');
 
       expect(header.classList.contains('custom-class')).toBeTruthy();
     });
   });
 
-  it('shoule support extra whit number 0', () => {
+  it('should support extra whit number 0', () => {
     const { container } = render(
       <Collapse onChange={onChange} activeKey={0}>
         <Panel header="collapse 0" key={0} extra={0}>
@@ -843,5 +842,22 @@ describe('collapse', () => {
       expect(container.querySelectorAll('.custom-icon')).toHaveLength(1);
       expect(container.querySelector('.custom-icon')?.innerHTML).toBe('p');
     });
+
+    it('should support data- and aria- attributes', () => {
+      const { container } = render(
+        <Collapse
+          data-testid="1234"
+          aria-label="test"
+          items={[
+            {
+              label: 'title',
+            } as any,
+          ]}
+        />,
+      );
+
+      expect(container.querySelector('.rc-collapse')?.getAttribute('data-testid')).toBe('1234');
+      expect(container.querySelector('.rc-collapse')?.getAttribute('aria-label')).toBe('test');
+    });
   });
 });

From 9c18301fd639891c2612d483aa24a5a4c73aac3d Mon Sep 17 00:00:00 2001
From: Dmytro Cherendieiev <dmytro_cherendieiev@epam.com>
Date: Fri, 15 Mar 2024 22:14:03 +0200
Subject: [PATCH 2/2] fix: pick only data and aria attributes

---
 src/Collapse.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Collapse.tsx b/src/Collapse.tsx
index 6f3d2d0..146f954 100644
--- a/src/Collapse.tsx
+++ b/src/Collapse.tsx
@@ -5,6 +5,7 @@ import React from 'react';
 import useItems from './hooks/useItems';
 import type { CollapseProps } from './interface';
 import CollapsePanel from './Panel';
+import pickAttrs from 'rc-util/lib/pickAttrs';
 
 function getActiveKeysArray(activeKey: React.Key | React.Key[]) {
   let currentActiveKey = activeKey;
@@ -31,7 +32,6 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) =>
     defaultActiveKey,
     onChange,
     items,
-    ...restProps
   } = props;
 
   const collapseClassName = classNames(prefixCls, className);
@@ -82,7 +82,7 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) =>
       className={collapseClassName}
       style={style}
       role={accordion ? 'tablist' : undefined}
-      {...restProps}
+      {...pickAttrs(props, { aria: true, data: true })}
     >
       {mergedChildren}
     </div>