From 0f67f901189190b8eb87a6a2843bb21194c155ea Mon Sep 17 00:00:00 2001
From: Valentyna <vkozlova@microsoft.com>
Date: Fri, 27 Oct 2023 11:32:29 +0200
Subject: [PATCH 1/7] Removed page with href attributes. Added link
 functionality by default

---
 .../components/Breadcrumb/Breadcrumb.test.tsx |  3 -
 .../BreadcrumbButton.test.tsx                 |  2 -
 .../BreadcrumbButton/useBreadcrumbButton.ts   | 18 +++--
 .../useBreadcrumbButtonStyles.styles.ts       | 23 +++++-
 ...adcrumbButtonWithHrefAttribute.stories.tsx | 80 -------------------
 .../Breadcrumb/BreadcrumbDefault.stories.tsx  | 22 ++++-
 .../Breadcrumb/BreadcrumbSize.stories.tsx     |  4 +-
 .../stories/Breadcrumb/index.stories.tsx      |  1 -
 8 files changed, 52 insertions(+), 101 deletions(-)
 delete mode 100644 packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbButtonWithHrefAttribute.stories.tsx

diff --git a/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/Breadcrumb.test.tsx b/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/Breadcrumb.test.tsx
index 6b338fed0c7ba9..5a648a3842a9d9 100644
--- a/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/Breadcrumb.test.tsx
+++ b/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/Breadcrumb.test.tsx
@@ -34,7 +34,6 @@ describe('Breadcrumb', () => {
             >
               <button
                 class="fui-Button fui-BreadcrumbButton"
-                type="button"
               >
                 Item 1
               </button>
@@ -68,9 +67,7 @@ describe('Breadcrumb', () => {
             >
               <a
                 class="fui-Button fui-BreadcrumbButton"
-                role="button"
                 tabindex="0"
-                type="button"
               >
                 Link 1
               </a>
diff --git a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbButton/BreadcrumbButton.test.tsx b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbButton/BreadcrumbButton.test.tsx
index 1e0da8c7fbdb57..214368e3368ca4 100644
--- a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbButton/BreadcrumbButton.test.tsx
+++ b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbButton/BreadcrumbButton.test.tsx
@@ -28,7 +28,6 @@ describe('BreadcrumbButton', () => {
       <div>
         <button
           class="fui-Button fui-BreadcrumbButton"
-          type="button"
         >
           Default BreadcrumbButton
         </button>
@@ -44,7 +43,6 @@ describe('BreadcrumbButton', () => {
       <div>
         <button
           class="fui-Button fui-BreadcrumbButton"
-          type="button"
         >
           <span
             class="fui-Button__icon"
diff --git a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbButton/useBreadcrumbButton.ts b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbButton/useBreadcrumbButton.ts
index 96fa711090851f..a6eef40f444915 100644
--- a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbButton/useBreadcrumbButton.ts
+++ b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbButton/useBreadcrumbButton.ts
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { useButton_unstable } from '@fluentui/react-button';
+import { getIntrinsicElementProps } from '@fluentui/react-utilities';
 import { useBreadcrumbContext_unstable } from '../Breadcrumb/BreadcrumbContext';
 import type { BreadcrumbButtonProps, BreadcrumbButtonState } from './BreadcrumbButton.types';
 
@@ -22,12 +23,17 @@ export const useBreadcrumbButton_unstable = (
   return {
     ...useButton_unstable(
       {
-        appearance: 'subtle',
-        ...rest,
-        iconPosition: 'before',
-        icon,
-        'aria-current': current ? props['aria-current'] ?? 'page' : undefined,
-        'aria-disabled': current ? props['aria-disabled'] ?? true : undefined,
+        ...getIntrinsicElementProps('a', {}),
+        ...{
+          appearance: 'subtle',
+          role: undefined,
+          type: undefined,
+          ...rest,
+          iconPosition: 'before',
+          icon,
+          'aria-current': current ? props['aria-current'] ?? 'page' : undefined,
+          'aria-disabled': current ? props['aria-disabled'] ?? true : undefined,
+        },
       },
       ref,
     ),
diff --git a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbButton/useBreadcrumbButtonStyles.styles.ts b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbButton/useBreadcrumbButtonStyles.styles.ts
index d7ea77b33ba75c..788e1e4ac4af59 100644
--- a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbButton/useBreadcrumbButtonStyles.styles.ts
+++ b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbButton/useBreadcrumbButtonStyles.styles.ts
@@ -1,8 +1,9 @@
 import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
 import type { BreadcrumbButtonSlots, BreadcrumbButtonState } from './BreadcrumbButton.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
-import { useButtonStyles_unstable } from '@fluentui/react-button';
+import { useButtonStyles_unstable, buttonClassNames } from '@fluentui/react-button';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
+import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
 
 /**
  * Static CSS class names used internally for the component slots.
@@ -47,6 +48,20 @@ const defaultButtonStyles = {
   color: tokens.colorNeutralForeground2,
   cursor: 'auto',
 };
+
+const currentIconStyles = {
+  ...defaultButtonStyles,
+  [`& .${buttonClassNames.icon}`]: {
+    color: 'unset',
+  },
+  [`& .${iconFilledClassName}`]: {
+    display: 'none',
+  },
+  [`& .${iconRegularClassName}`]: {
+    display: 'inline',
+  },
+};
+
 const useStyles = makeStyles({
   root: {
     minWidth: 'unset',
@@ -70,13 +85,13 @@ const useStyles = makeStyles({
   },
   current: {
     ':hover': {
-      ...defaultButtonStyles,
+      ...currentIconStyles,
     },
     ':hover:active': {
-      ...defaultButtonStyles,
+      ...currentIconStyles,
     },
     ':disabled': {
-      ...defaultButtonStyles,
+      ...currentIconStyles,
     },
   },
   currentSmall: {
diff --git a/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbButtonWithHrefAttribute.stories.tsx b/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbButtonWithHrefAttribute.stories.tsx
deleted file mode 100644
index 462ad5e0c21a69..00000000000000
--- a/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbButtonWithHrefAttribute.stories.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import * as React from 'react';
-import { Breadcrumb, BreadcrumbItem, BreadcrumbButton, BreadcrumbDivider } from '@fluentui/react-breadcrumb-preview';
-import { bundleIcon, CalendarMonth20Filled, CalendarMonth20Regular, GridDots20Regular } from '@fluentui/react-icons';
-import { ButtonProps } from '@fluentui/react-components';
-
-const CalendarMonth = bundleIcon(CalendarMonth20Filled, CalendarMonth20Regular);
-
-type Item = {
-  key: number;
-  item?: string;
-  linkProps?: {
-    'aria-label'?: string;
-    href?: string;
-    icon?: ButtonProps['icon'];
-    disabled?: boolean;
-  };
-};
-
-const linkItems: Item[] = [
-  {
-    key: 0,
-    item: 'Default',
-    linkProps: {
-      href: 'https://react.fluentui.dev/?path=/docs/preview-components-breadcrumb--default',
-    },
-  },
-  {
-    key: 1,
-    item: 'Size',
-    linkProps: {
-      icon: <CalendarMonth />,
-      'aria-label': 'Item 1',
-      href: 'https://react.fluentui.dev/?path=/docs/preview-components-breadcrumb--breadcrumb-size',
-      disabled: true,
-    },
-  },
-  {
-    key: 2,
-    item: 'Overflow',
-    linkProps: {
-      icon: <GridDots20Regular />,
-      href: 'https://react.fluentui.dev/?path=/docs/preview-components-breadcrumb--breadcrumb-with-overflow',
-    },
-  },
-  {
-    key: 3,
-    item: 'Breadcrumb with Tooltip',
-    linkProps: {
-      disabled: true,
-      href: 'https://react.fluentui.dev/?path=/docs/preview-components-breadcrumb--breadcrumb-with-tooltip',
-    },
-  },
-  {
-    key: 4,
-    item: 'Breadcrumb focus mode',
-    linkProps: {
-      href: 'https://react.fluentui.dev/?path=/docs/preview-components-breadcrumb--breadcrumb-focus-mode',
-    },
-  },
-];
-
-function renderLink(el: Item, isLastItem: boolean = false) {
-  return (
-    <React.Fragment key={`${el.key}-link`}>
-      <BreadcrumbItem>
-        <BreadcrumbButton {...el.linkProps} as="a" current={isLastItem}>
-          {el.item}
-        </BreadcrumbButton>
-      </BreadcrumbItem>
-      {!isLastItem && <BreadcrumbDivider />}
-    </React.Fragment>
-  );
-}
-export const BreadcrumbButtonWithHrefAttribute = () => {
-  return (
-    <Breadcrumb aria-label="BreadcrumbButton with href attribute">
-      {linkItems.map((el, index) => renderLink(el, index === linkItems.length - 1))}
-    </Breadcrumb>
-  );
-};
diff --git a/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbDefault.stories.tsx b/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbDefault.stories.tsx
index 39af6d4af9ad81..58b8598ec8dccb 100644
--- a/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbDefault.stories.tsx
+++ b/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbDefault.stories.tsx
@@ -9,19 +9,33 @@ export const Default = () => {
     <>
       <Breadcrumb aria-label="Breadcrumb default example">
         <BreadcrumbItem>
-          <BreadcrumbButton>Item 1</BreadcrumbButton>
+          <BreadcrumbButton href="https://react.fluentui.dev/?path=/docs/preview-components-breadcrumb--default">
+            Item 1
+          </BreadcrumbButton>
         </BreadcrumbItem>
         <BreadcrumbDivider />
         <BreadcrumbItem>
-          <BreadcrumbButton icon={<CalendarMonth />}>Item 2</BreadcrumbButton>
+          <BreadcrumbButton
+            href="https://react.fluentui.dev/?path=/docs/preview-components-breadcrumb--breadcrumb-size"
+            icon={<CalendarMonth />}
+          >
+            Item 2
+          </BreadcrumbButton>
         </BreadcrumbItem>
         <BreadcrumbDivider />
         <BreadcrumbItem>
-          <BreadcrumbButton>Item 3</BreadcrumbButton>
+          <BreadcrumbButton href="https://react.fluentui.dev/?path=/docs/preview-components-breadcrumb--breadcrumb-with-overflow">
+            Item 3
+          </BreadcrumbButton>
         </BreadcrumbItem>
         <BreadcrumbDivider />
         <BreadcrumbItem>
-          <BreadcrumbButton current>Item 4</BreadcrumbButton>
+          <BreadcrumbButton
+            href="https://react.fluentui.dev/?path=/docs/preview-components-breadcrumb--breadcrumb-with-tooltip"
+            current
+          >
+            Item 4
+          </BreadcrumbButton>
         </BreadcrumbItem>
       </Breadcrumb>
     </>
diff --git a/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbSize.stories.tsx b/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbSize.stories.tsx
index 91867407fb9682..a622a3823ce325 100644
--- a/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbSize.stories.tsx
+++ b/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbSize.stories.tsx
@@ -54,7 +54,9 @@ export const BreadcrumbSize = () => {
         </BreadcrumbItem>
         <BreadcrumbDivider />
         <BreadcrumbItem>
-          <BreadcrumbButton current>Item 4</BreadcrumbButton>
+          <BreadcrumbButton icon={<CalendarMonth />} current>
+            Item 4
+          </BreadcrumbButton>
         </BreadcrumbItem>
       </Breadcrumb>
     </>
diff --git a/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/index.stories.tsx b/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/index.stories.tsx
index 44608200e1cd1b..35d99714ef5a3e 100644
--- a/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/index.stories.tsx
+++ b/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/index.stories.tsx
@@ -3,7 +3,6 @@ import { Breadcrumb, BreadcrumbButton, BreadcrumbItem, BreadcrumbDivider } from
 import descriptionMd from './BreadcrumbDescription.md';
 import bestPracticesMd from './BreadcrumbBestPractices.md';
 export { Default } from './BreadcrumbDefault.stories';
-export { BreadcrumbButtonWithHrefAttribute } from './BreadcrumbButtonWithHrefAttribute.stories';
 export { BreadcrumbSize } from './BreadcrumbSize.stories';
 export { FocusModeArrow } from './BreadcrumbFocusMode.stories';
 export { BreadcrumbWithOverflow } from './BreadcrumbWithOverflow.stories';

From eb9ef0d61cfc5ba342c16ef2ec69e3d49c115b57 Mon Sep 17 00:00:00 2001
From: Valentyna <vkozlova@microsoft.com>
Date: Mon, 30 Oct 2023 16:52:47 +0100
Subject: [PATCH 2/7] change files

---
 ...crumb-preview-e423e7a3-3b7e-424d-847c-2c4f85699fde.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@fluentui-react-breadcrumb-preview-e423e7a3-3b7e-424d-847c-2c4f85699fde.json

diff --git a/change/@fluentui-react-breadcrumb-preview-e423e7a3-3b7e-424d-847c-2c4f85699fde.json b/change/@fluentui-react-breadcrumb-preview-e423e7a3-3b7e-424d-847c-2c4f85699fde.json
new file mode 100644
index 00000000000000..237d9626f3d45e
--- /dev/null
+++ b/change/@fluentui-react-breadcrumb-preview-e423e7a3-3b7e-424d-847c-2c4f85699fde.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: made BreadcrumbButton semantically as a link",
+  "packageName": "@fluentui/react-breadcrumb-preview",
+  "email": "vkozlova@microsoft.com",
+  "dependentChangeType": "patch"
+}

From 1d8a1af5d9e6332cf63413a53b263ff348a097cf Mon Sep 17 00:00:00 2001
From: Valentyna <vkozlova@microsoft.com>
Date: Tue, 31 Oct 2023 17:35:31 +0100
Subject: [PATCH 3/7] fixed button as link, but still get type errors

---
 .../BreadcrumbButton/useBreadcrumbButton.ts   | 21 ++++++++-----------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbButton/useBreadcrumbButton.ts b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbButton/useBreadcrumbButton.ts
index a6eef40f444915..a76e5125ddd24b 100644
--- a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbButton/useBreadcrumbButton.ts
+++ b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbButton/useBreadcrumbButton.ts
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { useButton_unstable } from '@fluentui/react-button';
-import { getIntrinsicElementProps } from '@fluentui/react-utilities';
 import { useBreadcrumbContext_unstable } from '../Breadcrumb/BreadcrumbContext';
 import type { BreadcrumbButtonProps, BreadcrumbButtonState } from './BreadcrumbButton.types';
 
@@ -23,17 +22,15 @@ export const useBreadcrumbButton_unstable = (
   return {
     ...useButton_unstable(
       {
-        ...getIntrinsicElementProps('a', {}),
-        ...{
-          appearance: 'subtle',
-          role: undefined,
-          type: undefined,
-          ...rest,
-          iconPosition: 'before',
-          icon,
-          'aria-current': current ? props['aria-current'] ?? 'page' : undefined,
-          'aria-disabled': current ? props['aria-disabled'] ?? true : undefined,
-        },
+        appearance: 'subtle',
+        role: undefined,
+        type: undefined,
+        as: 'a' as const,
+        iconPosition: 'before',
+        icon,
+        'aria-current': current ? props['aria-current'] ?? 'page' : undefined,
+        'aria-disabled': current ? props['aria-disabled'] ?? true : undefined,
+        ...rest,
       },
       ref,
     ),

From fd5b6eb99271b57bf2b3e75b989bc3b18e82a915 Mon Sep 17 00:00:00 2001
From: Valentyna <vkozlova@microsoft.com>
Date: Tue, 31 Oct 2023 17:35:31 +0100
Subject: [PATCH 4/7] fixed button as link, but still get type errors

---
 .../BreadcrumbButton/useBreadcrumbButton.ts   | 22 ++++++++-----------
 1 file changed, 9 insertions(+), 13 deletions(-)

diff --git a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbButton/useBreadcrumbButton.ts b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbButton/useBreadcrumbButton.ts
index a6eef40f444915..bfc8cb5181941b 100644
--- a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbButton/useBreadcrumbButton.ts
+++ b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbButton/useBreadcrumbButton.ts
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { useButton_unstable } from '@fluentui/react-button';
-import { getIntrinsicElementProps } from '@fluentui/react-utilities';
 import { useBreadcrumbContext_unstable } from '../Breadcrumb/BreadcrumbContext';
 import type { BreadcrumbButtonProps, BreadcrumbButtonState } from './BreadcrumbButton.types';
 
@@ -18,22 +17,19 @@ export const useBreadcrumbButton_unstable = (
   ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,
 ): BreadcrumbButtonState => {
   const { size } = useBreadcrumbContext_unstable();
-  const { current = false, icon, ...rest } = props;
+  const { current = false, ...rest } = props;
+  rest.as = 'a';
 
   return {
     ...useButton_unstable(
       {
-        ...getIntrinsicElementProps('a', {}),
-        ...{
-          appearance: 'subtle',
-          role: undefined,
-          type: undefined,
-          ...rest,
-          iconPosition: 'before',
-          icon,
-          'aria-current': current ? props['aria-current'] ?? 'page' : undefined,
-          'aria-disabled': current ? props['aria-disabled'] ?? true : undefined,
-        },
+        appearance: 'subtle',
+        role: undefined,
+        type: undefined,
+        iconPosition: 'before',
+        'aria-current': current ? props['aria-current'] ?? 'page' : undefined,
+        'aria-disabled': current ? props['aria-disabled'] ?? true : undefined,
+        ...rest,
       },
       ref,
     ),

From 0116af7bb3c754c0250867c513badcf7ad108893 Mon Sep 17 00:00:00 2001
From: Valentyna <vkozlova@microsoft.com>
Date: Tue, 31 Oct 2023 23:11:37 +0100
Subject: [PATCH 5/7] Updated tests

---
 .../src/components/Breadcrumb/Breadcrumb.test.tsx      |  5 +++--
 .../BreadcrumbButton/BreadcrumbButton.test.tsx         | 10 ++++++----
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/Breadcrumb.test.tsx b/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/Breadcrumb.test.tsx
index 5a648a3842a9d9..972e104880e0bd 100644
--- a/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/Breadcrumb.test.tsx
+++ b/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/Breadcrumb.test.tsx
@@ -32,11 +32,12 @@ describe('Breadcrumb', () => {
             <li
               class="fui-BreadcrumbItem"
             >
-              <button
+              <a
                 class="fui-Button fui-BreadcrumbButton"
+                tabindex="0"
               >
                 Item 1
-              </button>
+              </a>
             </li>
           </ol>
         </nav>
diff --git a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbButton/BreadcrumbButton.test.tsx b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbButton/BreadcrumbButton.test.tsx
index 214368e3368ca4..a35254dea79414 100644
--- a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbButton/BreadcrumbButton.test.tsx
+++ b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbButton/BreadcrumbButton.test.tsx
@@ -26,11 +26,12 @@ describe('BreadcrumbButton', () => {
     const result = render(<BreadcrumbButton>Default BreadcrumbButton</BreadcrumbButton>);
     expect(result.container).toMatchInlineSnapshot(`
       <div>
-        <button
+        <a
           class="fui-Button fui-BreadcrumbButton"
+          tabindex="0"
         >
           Default BreadcrumbButton
-        </button>
+        </a>
       </div>
     `);
   });
@@ -41,8 +42,9 @@ describe('BreadcrumbButton', () => {
     );
     expect(result.container).toMatchInlineSnapshot(`
       <div>
-        <button
+        <a
           class="fui-Button fui-BreadcrumbButton"
+          tabindex="0"
         >
           <span
             class="fui-Button__icon"
@@ -63,7 +65,7 @@ describe('BreadcrumbButton', () => {
             </svg>
           </span>
           BreadcrumbButton with icon
-        </button>
+        </a>
       </div>
     `);
   });

From 5f7139641fc104016b8bbe1458fdb094ec9d162b Mon Sep 17 00:00:00 2001
From: Humberto Makoto Morimoto Burgos <makotom@microsoft.com>
Date: Tue, 31 Oct 2023 15:33:54 -0700
Subject: [PATCH 6/7] Fixing build issue.

---
 .../src/components/BreadcrumbButton/useBreadcrumbButton.ts     | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbButton/useBreadcrumbButton.ts b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbButton/useBreadcrumbButton.ts
index a76e5125ddd24b..0d8dbc55adcf95 100644
--- a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbButton/useBreadcrumbButton.ts
+++ b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbButton/useBreadcrumbButton.ts
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { useButton_unstable } from '@fluentui/react-button';
+import type { ButtonProps } from '@fluentui/react-button';
 import { useBreadcrumbContext_unstable } from '../Breadcrumb/BreadcrumbContext';
 import type { BreadcrumbButtonProps, BreadcrumbButtonState } from './BreadcrumbButton.types';
 
@@ -31,7 +32,7 @@ export const useBreadcrumbButton_unstable = (
         'aria-current': current ? props['aria-current'] ?? 'page' : undefined,
         'aria-disabled': current ? props['aria-disabled'] ?? true : undefined,
         ...rest,
-      },
+      } as ButtonProps,
       ref,
     ),
     current,

From 3d323d619a0f701aab19c5f792929748ef4fcd15 Mon Sep 17 00:00:00 2001
From: Valentyna <vkozlova@microsoft.com>
Date: Wed, 1 Nov 2023 12:41:18 +0100
Subject: [PATCH 7/7] removed quick fix

---
 .../src/components/BreadcrumbButton/useBreadcrumbButton.ts       | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbButton/useBreadcrumbButton.ts b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbButton/useBreadcrumbButton.ts
index f1fb789ed2d7ee..07125e03b7548e 100644
--- a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbButton/useBreadcrumbButton.ts
+++ b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbButton/useBreadcrumbButton.ts
@@ -19,7 +19,6 @@ export const useBreadcrumbButton_unstable = (
 ): BreadcrumbButtonState => {
   const { size } = useBreadcrumbContext_unstable();
   const { current = false, ...rest } = props;
-  rest.as = 'a';
 
   return {
     ...useButton_unstable(