fix(breadcrumbs): fix aria-label and onCrumbClick handler

Co-Authored-By: tjiang@box.com <tjiang@box.com>

Author: devin-ai-integration[bot]

src/elements/common/breadcrumbs/BreadcrumbDropdown.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { DropdownMenu, IconButton } from '@box/blueprint-web';
 import { Ellipsis } from '@box/blueprint-web-assets/icons/Fill';
 import type { Crumb } from '../../../common/types/core';
-import messages from '../messages';
 
 export interface BreadcrumbDropdownProps {
     crumbs: Crumb[];
@@ -12,7 +11,7 @@ export interface BreadcrumbDropdownProps {
 const BreadcrumbDropdown = ({ crumbs, onCrumbClick }: BreadcrumbDropdownProps) => (
     <DropdownMenu.Root>
         <DropdownMenu.Trigger>
-            <IconButton aria-label={messages.breadcrumbLabel.defaultMessage} icon={Ellipsis} />
+            <IconButton aria-label="More breadcrumb items" icon={Ellipsis} />
         </DropdownMenu.Trigger>
         <DropdownMenu.Content>
             {crumbs.map(({ id, name }) => (

src/elements/common/breadcrumbs/Breadcrumbs.tsx

@@ -21,16 +21,14 @@ function filterCrumbs(rootId: string, crumbs: Crumb[]): Crumb[] {
 function getBreadcrumb(
     crumbs: Crumb | Crumb[],
     isLast: boolean,
-    onCrumbClick: (id: string) => void,
+    onCrumbClick: (crumb: Crumb) => void,
     delimiter: Delimiter,
 ) {
     if (Array.isArray(crumbs)) {
-        return <BreadcrumbDropdown crumbs={crumbs} onCrumbClick={onCrumbClick} />;
+        return <BreadcrumbDropdown crumbs={crumbs} onCrumbClick={id => onCrumbClick(crumbs.find(c => c.id === id)!)} />;
     }
 
-    return (
-        <Breadcrumb delimiter={delimiter} isLast={isLast} name={crumbs.name} onClick={() => onCrumbClick(crumbs.id)} />
-    );
+    return <Breadcrumb delimiter={delimiter} isLast={isLast} name={crumbs.name} onClick={() => onCrumbClick(crumbs)} />;
 }
 
 const Breadcrumbs = ({