diff --git a/src/Collapse.tsx b/src/Collapse.tsx index 8d58f4c..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; @@ -81,6 +82,7 @@ const Collapse = React.forwardRef((props, ref) => className={collapseClassName} style={style} role={accordion ? 'tablist' : undefined} + {...pickAttrs(props, { aria: true, data: true })} > {mergedChildren} 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 = ( - - + + first ); - 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( @@ -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( + , + ); + + expect(container.querySelector('.rc-collapse')?.getAttribute('data-testid')).toBe('1234'); + expect(container.querySelector('.rc-collapse')?.getAttribute('aria-label')).toBe('test'); + }); }); });