diff --git a/packages/react-components/react-tags/src/components/Tag/Tag.test.tsx b/packages/react-components/react-tags/src/components/Tag/Tag.test.tsx index ed002889a23df..3d3a0d34c2de4 100644 --- a/packages/react-components/react-tags/src/components/Tag/Tag.test.tsx +++ b/packages/react-components/react-tags/src/components/Tag/Tag.test.tsx @@ -3,7 +3,6 @@ import { Tag } from './Tag'; import { isConformant } from '../../testing/isConformant'; import { TagProps } from './Tag.types'; import { render } from '@testing-library/react'; -import { tagClassNames } from './useTagStyles.styles'; const requiredProps: TagProps = { dismissible: true, @@ -20,8 +19,13 @@ describe('Tag', () => { requiredProps, }); - it('should render root as a button', () => { - const { getByRole } = render(Tag); - expect(getByRole('button').className.includes(tagClassNames.root)).toBe(true); + it('should render root as a span', () => { + const { getByTestId } = render(Tag); + expect(getByTestId('testid').tagName).toBe('SPAN'); + }); + + it('should render root as a button for dismissible tag', () => { + const { queryByRole } = render(Tag); + expect(queryByRole('button')).not.toBe(null); }); }); diff --git a/packages/react-components/react-tags/src/components/Tag/useTag.tsx b/packages/react-components/react-tags/src/components/Tag/useTag.tsx index 57d7727b5b24c..006216ac2bf2a 100644 --- a/packages/react-components/react-tags/src/components/Tag/useTag.tsx +++ b/packages/react-components/react-tags/src/components/Tag/useTag.tsx @@ -65,7 +65,7 @@ export const useTag_unstable = (props: TagProps, ref: React.Ref): T size, components: { - root: 'button', + root: dismissible ? 'button' : 'span', media: 'span', icon: 'span', primaryText: 'span',