Move responsibilities from item to link

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

@@ -6,13 +6,16 @@ import '@testing-library/jest-dom'
 describe('Breadcrumb link', () => {
   it('renders', () => {
     render(<BreadcrumbLink href="/" />)
+
     const component = screen.getByRole('listitem')
+
     expect(component).toBeInTheDocument()
     expect(component).toBeVisible()
   })
 
   it('renders a design system BEM class name', () => {
     render(<BreadcrumbLink href="/" />)
+
     const item = screen.getByRole('listitem')
     expect(item).toHaveClass('ams-breadcrumb__item')
 
@@ -22,8 +25,10 @@ describe('Breadcrumb link', () => {
 
   it('renders an additional class name', () => {
     render(<BreadcrumbLink href="/" className="extra" />)
-    const component = screen.getByRole('listitem')
-    expect(component).toHaveClass('ams-breadcrumb__item extra')
+
+    const component = screen.getByRole('link')
+
+    expect(component).toHaveClass('ams-breadcrumb__link extra')
   })
 
   it('renders the href attribute', () => {
@@ -33,9 +38,11 @@ describe('Breadcrumb link', () => {
   })
 
   it('supports ForwardRef in React', () => {
-    const ref = createRef<HTMLLIElement>()
+    const ref = createRef<HTMLAnchorElement>()
     render(<BreadcrumbLink href="/" ref={ref} />)
-    const component = screen.getByRole('listitem')
+
+    const component = screen.getByRole('link')
+
     expect(ref.current).toBe(component)
   })
 })

packages/react/src/Breadcrumb/BreadcrumbLink.tsx

@@ -5,16 +5,14 @@
 
 import { clsx } from 'clsx'
 import { forwardRef } from 'react'
-import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
+import type { AnchorHTMLAttributes, ForwardedRef } from 'react'
 
-export type BreadcrumbLinkProps = {
-  href: string
-} & PropsWithChildren<HTMLAttributes<HTMLLIElement>>
+export type BreadcrumbLinkProps = AnchorHTMLAttributes<HTMLAnchorElement>
 
 export const BreadcrumbLink = forwardRef(
-  ({ children, className, href, ...restProps }: BreadcrumbLinkProps, ref: ForwardedRef<HTMLLIElement>) => (
-    <li {...restProps} className={clsx('ams-breadcrumb__item', className)} ref={ref}>
-      <a className="ams-breadcrumb__link" href={href}>
+  ({ children, className, href, ...restProps }: BreadcrumbLinkProps, ref: ForwardedRef<HTMLAnchorElement>) => (
+    <li className="ams-breadcrumb__item">
+      <a {...restProps} className={clsx('ams-breadcrumb__link', className)} href={href} ref={ref}>
         {children}
       </a>
     </li>