feat(react-tags): make non-dismissible tag not focusable (#28350)

* make default tag not focusable * UT * simplify test
microsoft · Jun 29, 2023 · 104c81e · 104c81e
1 parent 53e6485
commit 104c81e
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
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
@@ -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>Tag</Tag>);
-    expect(getByRole('button').className.includes(tagClassNames.root)).toBe(true);
+  it('should render root as a span', () => {
+    const { getByTestId } = render(<Tag data-testid="testid">Tag</Tag>);
+    expect(getByTestId('testid').tagName).toBe('SPAN');
+  });
+
+  it('should render root as a button for dismissible tag', () => {
+    const { queryByRole } = render(<Tag dismissible>Tag</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
@@ -65,7 +65,7 @@ export const useTag_unstable = (props: TagProps, ref: React.Ref<HTMLElement>): T
     size,
 
     components: {
-      root: 'button',
+      root: dismissible ? 'button' : 'span',
       media: 'span',
       icon: 'span',
       primaryText: 'span',