fix(Accessibility): interactive controls must not be nested

Author: MellyGray

packages/design-system/src/lib/components/breadcrumb/BreadcrumbItem.tsx

@@ -1,13 +1,21 @@
 import { BreadcrumbItem as BreadcrumbItemBS } from 'react-bootstrap'
-import { PropsWithChildren } from 'react'
+import { ElementType, PropsWithChildren } from 'react'
 
 interface BreadcrumbItemProps {
   href?: string
   active?: boolean
+  linkAs?: ElementType
+  linkProps?: Record<string, unknown>
 }
-export function BreadcrumbItem({ href, active, children }: PropsWithChildren<BreadcrumbItemProps>) {
+export function BreadcrumbItem({
+  href,
+  active,
+  linkAs,
+  linkProps,
+  children
+}: PropsWithChildren<BreadcrumbItemProps>) {
   return (
-    <BreadcrumbItemBS href={href} active={active}>
+    <BreadcrumbItemBS href={href} active={active} linkAs={linkAs} linkProps={linkProps}>
       {children}
     </BreadcrumbItemBS>
   )

src/sections/shared/hierarchy/BreadcrumbsGenerator.tsx

@@ -28,15 +28,21 @@ export function BreadcrumbsGenerator({ hierarchy }: BreadcrumbGeneratorProps) {
 
         if (isFirst) {
           return (
-            <Breadcrumb.Item key={index}>
-              <LinkToPage page={Route.HOME}>{item.name}</LinkToPage>
+            <Breadcrumb.Item
+              key={index}
+              linkAs={LinkToPage}
+              linkProps={{ page: Route.HOME, children: <>{item.name}</> }}>
+              {item.name}
             </Breadcrumb.Item>
           )
         }
 
         return (
-          <Breadcrumb.Item key={index}>
-            <LinkToDvObject name={item.name} type={item.type} id={item.id} version={item.version} />
+          <Breadcrumb.Item
+            key={index}
+            linkAs={LinkToDvObject}
+            linkProps={{ name: item.name, type: item.type, id: item.id, version: item.version }}>
+            {item.name}
           </Breadcrumb.Item>
         )
       })}