fix(Token): Render <a/> tag as interactive element (#6429)

Author: devinmcinnis

.changeset/wet-crews-drum.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Anchor elements render as interactive elements in TokenBase

packages/react/src/Token/TokenBase.tsx

@@ -79,7 +79,7 @@ const TokenBase = React.forwardRef<HTMLButtonElement | HTMLAnchorElement | HTMLS
           }
         }}
         className={clsx(classes.TokenBase, className)}
-        data-cursor-is-interactive={isTokenInteractive(rest)}
+        data-cursor-is-interactive={isTokenInteractive({as, ...rest})}
         data-size={size}
         id={id?.toString()}
         {...rest}

packages/react/src/Token/__tests__/Token.test.tsx

@@ -67,6 +67,35 @@ const testTokenComponent = (Component: React.ComponentType<React.PropsWithChildr
 
     expect(domNode.parentElement).toHaveClass('testing-class')
   })
+
+  it('renders with correct data-cursor-is-interactive attribute for button element', () => {
+    const {getByText} = HTMLRender(<Component as="button" text="token" />)
+    const domNode = getByText('token')
+
+    expect(domNode.parentElement).toHaveAttribute('data-cursor-is-interactive', 'true')
+  })
+
+  it('renders with correct data-cursor-is-interactive attribute for anchor element', () => {
+    const {getByText} = HTMLRender(<Component as="a" text="token" />)
+    const domNode = getByText('token')
+
+    expect(domNode.parentElement).toHaveAttribute('data-cursor-is-interactive', 'true')
+  })
+
+  it('renders with correct data-cursor-is-interactive attribute for span with onClick', () => {
+    const onClick = vi.fn()
+    const {getByText} = HTMLRender(<Component text="token" onClick={onClick} />)
+    const domNode = getByText('token')
+
+    expect(domNode.parentElement).toHaveAttribute('data-cursor-is-interactive', 'true')
+  })
+
+  it('renders with correct data-cursor-is-interactive attribute for non-interactive span', () => {
+    const {getByText} = HTMLRender(<Component text="token" />)
+    const domNode = getByText('token')
+
+    expect(domNode.parentElement).toHaveAttribute('data-cursor-is-interactive', 'false')
+  })
 }
 
 describe('Token components', () => {