diff --git a/packages/react-aria-components/src/Separator.tsx b/packages/react-aria-components/src/Separator.tsx index d5d82fdbdb6..4e14b71b47d 100644 --- a/packages/react-aria-components/src/Separator.tsx +++ b/packages/react-aria-components/src/Separator.tsx @@ -23,13 +23,14 @@ export const SeparatorContext = createContext) { [props, ref] = useContextProps(props, ref, SeparatorContext); - let {elementType, orientation, style, className} = props; + let {elementType, orientation, style, className, slot, ...otherProps} = props; let Element = (elementType as ElementType) || 'hr'; if (Element === 'hr' && orientation === 'vertical') { Element = 'div'; } let {separatorProps} = useSeparator({ + ...otherProps, elementType, orientation }); @@ -41,6 +42,6 @@ export const Separator = /*#__PURE__*/ createLeafComponent('separator', function style={style} className={className ?? 'react-aria-Separator'} ref={ref} - slot={props.slot || undefined} /> + slot={slot || undefined} /> ); }); diff --git a/packages/react-aria-components/test/Separator.test.js b/packages/react-aria-components/test/Separator.test.js new file mode 100644 index 00000000000..a5a29fc4baf --- /dev/null +++ b/packages/react-aria-components/test/Separator.test.js @@ -0,0 +1,54 @@ +/* + * Copyright 2025 Adobe. All rights reserved. + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +import React from 'react'; +import {render} from '@react-spectrum/test-utils-internal'; +import {Separator, SeparatorContext} from '../'; + +describe('Separator', () => { + it('should render a separator with default class', () => { + let {getByRole} = render(); + let separator = getByRole('separator'); + expect(separator.tagName).toBe('HR'); + expect(separator).toHaveAttribute('class', 'react-aria-Separator'); + }); + + it('should render a separator with custom class', () => { + let {getByRole} = render(); + let separator = getByRole('separator'); + expect(separator).toHaveAttribute('class', 'test'); + }); + + it('should support DOM props', () => { + let {getByRole} = render(); + let separator = getByRole('separator'); + expect(separator).toHaveAttribute('data-foo', 'bar'); + }); + + it('should support slot', () => { + let {getByRole} = render( + + + + ); + + let separator = getByRole('separator'); + expect(separator).toHaveAttribute('slot', 'test'); + expect(separator).toHaveAttribute('aria-label', 'test'); + }); + + it('should support accessibility props', () => { + let {getByRole} = render(); + let separator = getByRole('separator'); + expect(separator).toHaveAttribute('aria-label', 'label'); + }); +});