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',