fix: Breadcrumb uses button when no href is present, tooltip labels b…

…utton (#29803)
microsoft · Nov 9, 2023 · 506c225 · 506c225
1 parent f500d2b
commit 506c225
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 15 deletions.
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
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: use button when no href is defined",
+  "packageName": "@fluentui/react-breadcrumb-preview",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git 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/...s/react-components/react-breadcrumb-preview/src/components/Breadcrumb/Breadcrumb.test.tsx b/...s/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/...onents/react-breadcrumb-preview/src/components/BreadcrumbButton/BreadcrumbButton.test.tsx b/...onents/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/...omponents/react-breadcrumb-preview/src/components/BreadcrumbButton/useBreadcrumbButton.ts b/...omponents/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,15 +19,17 @@ 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(
       {
         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/...-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbWithTooltip.stories.tsx b/...-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>