fix(react): fix BreadcrumbLink type interface to correctly allow for …

…polymorphic anchor components (#1441)

docs/mdx-components.tsx

@@ -39,7 +39,10 @@ function Heading({ level, children, ...props }: HeadingProps) {
   );
 }
 
-function Link({ href, ...props }: React.LinkHTMLAttributes<HTMLLinkElement>) {
+function Link({
+  href,
+  ...props
+}: React.AnchorHTMLAttributes<HTMLAnchorElement>) {
   const external = href.indexOf('://') > 0 || href.indexOf('//') === 0;
   return external ? (
     <CauldronLink href={href} {...props} />

docs/pages/components/Breadcrumb.mdx

@@ -58,7 +58,7 @@ import {
 
 <ComponentProps
   children={true}
-  refType="HTMLLinkElement"
+  refType="HTMLAnchorElement"
 />
 
 ### BreadcrumbItem

packages/react/src/components/Breadcrumb/BreadcrumbLink.test.tsx

@@ -0,0 +1,55 @@
+import React, { createRef } from 'react';
+import { render, screen } from '@testing-library/react';
+import { BreadcrumbLink } from './';
+import axe from '../../axe';
+
+const CustomLinkComponent = (
+  props: React.AnchorHTMLAttributes<HTMLAnchorElement>
+): JSX.Element => (
+  // eslint-disable-next-line jsx-a11y/anchor-has-content
+  <a data-testid="custom" {...props} />
+);
+
+test('should render breadcrumb link', () => {
+  render(<BreadcrumbLink href="#">link</BreadcrumbLink>);
+  expect(screen.getByRole('link', { name: 'link' })).toBeInTheDocument();
+});
+
+test('should support className prop', () => {
+  render(
+    <BreadcrumbLink className="banana" href="#">
+      link
+    </BreadcrumbLink>
+  );
+  expect(screen.getByRole('link')).toHaveClass(
+    'Link',
+    'Breadcrumb__Link',
+    'banana'
+  );
+});
+
+test('should support as prop', () => {
+  render(
+    <BreadcrumbLink href="#" as={CustomLinkComponent}>
+      link
+    </BreadcrumbLink>
+  );
+  expect(screen.getByTestId('custom')).toBeInTheDocument();
+});
+
+test('should support ref prop', () => {
+  const anchorRef = createRef<HTMLAnchorElement>();
+  render(
+    <BreadcrumbLink href="#" ref={anchorRef}>
+      link
+    </BreadcrumbLink>
+  );
+  expect(anchorRef.current).toBeTruthy();
+  expect(anchorRef.current).toEqual(screen.getByRole('link'));
+});
+
+test('should return no axe violations', async () => {
+  render(<BreadcrumbLink href="#">link</BreadcrumbLink>);
+  const results = await axe(screen.getByRole('link', { name: 'link' }));
+  expect(results).toHaveNoViolations();
+});

packages/react/src/components/Breadcrumb/BreadcrumbLink.tsx

@@ -6,7 +6,7 @@ import type {
 } from '../../utils/polymorphicComponent';
 
 type BreadcrumbLinkProps = PolymorphicProps<
-  React.LinkHTMLAttributes<HTMLLinkElement>
+  React.AnchorHTMLAttributes<HTMLAnchorElement>
 >;
 
 const BreadcrumbLink = forwardRef<HTMLElement, BreadcrumbLinkProps>(