From 506c225d88c8d1452cf64dffad3d7243ad161d11 Mon Sep 17 00:00:00 2001
From: Sarah Higley <smhigley@users.noreply.github.com>
Date: Thu, 9 Nov 2023 11:06:26 -0800
Subject: [PATCH] fix: Breadcrumb uses button when no href is present, tooltip
 labels button (#29803)

---
 ...b-preview-99feac5c-b9dd-4c16-b451-3c2cc099992c.json |  7 +++++++
 .../react-breadcrumb-preview/package.json              |  1 +
 .../src/components/Breadcrumb/Breadcrumb.test.tsx      |  5 ++---
 .../BreadcrumbButton/BreadcrumbButton.test.tsx         | 10 ++++------
 .../components/BreadcrumbButton/useBreadcrumbButton.ts |  7 +++++--
 .../Breadcrumb/BreadcrumbWithTooltip.stories.tsx       |  8 ++++----
 6 files changed, 23 insertions(+), 15 deletions(-)
 create mode 100644 change/@fluentui-react-breadcrumb-preview-99feac5c-b9dd-4c16-b451-3c2cc099992c.json

diff --git a/change/@fluentui-react-breadcrumb-preview-99feac5c-b9dd-4c16-b451-3c2cc099992c.json b/change/@fluentui-react-breadcrumb-preview-99feac5c-b9dd-4c16-b451-3c2cc099992c.json
new file mode 100644
index 00000000000000..92487c2d5ad432
--- /dev/null
+++ b/change/@fluentui-react-breadcrumb-preview-99feac5c-b9dd-4c16-b451-3c2cc099992c.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: use button when no href is defined",
+  "packageName": "@fluentui/react-breadcrumb-preview",
+  "email": "sarah.higley@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-breadcrumb-preview/package.json b/packages/react-components/react-breadcrumb-preview/package.json
index 20c74510ba9cab..90deb80bdd32f1 100644
--- a/packages/react-components/react-breadcrumb-preview/package.json
+++ b/packages/react-components/react-breadcrumb-preview/package.json
@@ -35,6 +35,7 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
+    "@fluentui/react-aria": "^9.3.44",
     "@fluentui/react-button": "^9.3.54",
     "@fluentui/react-icons": "^2.0.217",
     "@fluentui/react-link": "^9.1.33",
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 972e104880e0bd..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
@@ -32,12 +32,11 @@ describe('Breadcrumb', () => {
             <li
               class="fui-BreadcrumbItem"
             >
-              <a
+              <button
                 class="fui-Button fui-BreadcrumbButton"
-                tabindex="0"
               >
                 Item 1
-              </a>
+              </button>
             </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 a35254dea79414..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
@@ -26,12 +26,11 @@ describe('BreadcrumbButton', () => {
     const result = render(<BreadcrumbButton>Default BreadcrumbButton</BreadcrumbButton>);
     expect(result.container).toMatchInlineSnapshot(`
       <div>
-        <a
+        <button
           class="fui-Button fui-BreadcrumbButton"
-          tabindex="0"
         >
           Default BreadcrumbButton
-        </a>
+        </button>
       </div>
     `);
   });
@@ -42,9 +41,8 @@ describe('BreadcrumbButton', () => {
     );
     expect(result.container).toMatchInlineSnapshot(`
       <div>
-        <a
+        <button
           class="fui-Button fui-BreadcrumbButton"
-          tabindex="0"
         >
           <span
             class="fui-Button__icon"
@@ -65,7 +63,7 @@ describe('BreadcrumbButton', () => {
             </svg>
           </span>
           BreadcrumbButton with icon
-        </a>
+        </button>
       </div>
     `);
   });
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 07125e03b7548e..e85558896e4035 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,4 +1,5 @@
 import * as React from 'react';
+import type { ARIAButtonProps } from '@fluentui/react-aria';
 import { useButton_unstable } from '@fluentui/react-button';
 import type { ButtonProps } from '@fluentui/react-button';
 import { useBreadcrumbContext_unstable } from '../Breadcrumb/BreadcrumbContext';
@@ -18,7 +19,9 @@ export const useBreadcrumbButton_unstable = (
   ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,
 ): BreadcrumbButtonState => {
   const { size } = useBreadcrumbContext_unstable();
-  const { current = false, ...rest } = props;
+  const { current = false, as, ...rest } = props;
+
+  const controlType = as ?? (props as ARIAButtonProps<'a'>).href ? 'a' : 'button';
 
   return {
     ...useButton_unstable(
@@ -26,7 +29,7 @@ export const useBreadcrumbButton_unstable = (
         appearance: 'subtle',
         role: undefined,
         type: undefined,
-        as: 'a' as const,
+        as: controlType,
         iconPosition: 'before',
         'aria-current': current ? props['aria-current'] ?? 'page' : undefined,
         'aria-disabled': current ? props['aria-disabled'] ?? true : undefined,
diff --git a/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbWithTooltip.stories.tsx b/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbWithTooltip.stories.tsx
index 7d7c4847759253..f6037cb3665af3 100644
--- a/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbWithTooltip.stories.tsx
+++ b/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbWithTooltip.stories.tsx
@@ -102,11 +102,11 @@ function renderItem(entry: Item, isLastItem: boolean) {
   return (
     <React.Fragment key={`item-${entry.key}`}>
       {isTruncatableBreadcrumbContent(entry.item, 30) ? (
-        <Tooltip withArrow content={truncateBreadcrumLongTooltip(entry.item)} relationship="label">
-          <BreadcrumbItem>
+        <BreadcrumbItem>
+          <Tooltip withArrow content={truncateBreadcrumLongTooltip(entry.item)} relationship="label">
             <BreadcrumbButton current={isLastItem}>{truncateBreadcrumbLongName(entry.item)}</BreadcrumbButton>
-          </BreadcrumbItem>
-        </Tooltip>
+          </Tooltip>
+        </BreadcrumbItem>
       ) : (
         <BreadcrumbItem>
           <BreadcrumbButton current={isLastItem}>{entry.item}</BreadcrumbButton>