feat(Breadcrumb): expose slot

packages/fluentui/accessibility/src/behaviors/Breadcrumb/breadcrumbBehavior.ts

@@ -0,0 +1,15 @@
+import { Accessibility } from '../../types';
+
+/**
+ * @specification
+ * Adds role 'list' to 'list' slot.
+ */
+export const breadcrumbBehavior: Accessibility<BreadcrumbBehaviorProps> = props => ({
+  attributes: {
+    list: {
+      role: 'list',
+    },
+  },
+});
+
+export type BreadcrumbBehaviorProps = never;

packages/fluentui/accessibility/src/behaviors/index.ts

@@ -8,6 +8,8 @@ export * from './Button/buttonGroupBehavior';
 export * from './Button/buttonGroupBehavior';
 export * from './Button/toggleButtonBehavior';
 
+export * from './Breadcrumb/breadcrumbBehavior';
+
 export * from './Dropdown/dropdownSelectedItemBehavior';
 export * from './Dropdown/dropdownSelectedItemBehavior';
 

packages/fluentui/accessibility/test/behaviors/behavior-test.tsx

@@ -92,6 +92,7 @@ import {
   datepickerCalendarGridBehavior,
   datepickerCalendarCellBehavior,
   skeletonBehavior,
+  breadcrumbBehavior,
 } from '@fluentui/accessibility';
 import { TestHelper } from './testHelper';
 import { definitions } from './testDefinitions';
@@ -188,5 +189,6 @@ testHelper.addBehavior('datepickerCalendarHeaderBehavior', datepickerCalendarHea
 testHelper.addBehavior('datepickerCalendarGridBehavior', datepickerCalendarGridBehavior);
 testHelper.addBehavior('datepickerCalendarCellBehavior', datepickerCalendarCellBehavior);
 testHelper.addBehavior('skeletonBehavior', skeletonBehavior);
+testHelper.addBehavior('breadcrumbBehavior', breadcrumbBehavior);
 
 testHelper.run(behaviorMenuItems);

packages/fluentui/react-northstar/src/components/Breadcrumb/Breadcrumb.tsx

@@ -7,17 +7,23 @@ import {
   useStyles,
   useUnhandledProps,
   getElementType,
-  childrenExist,
 } from '@fluentui/react-bindings';
-import { commonPropTypes, UIComponentProps, ContentComponentProps, ChildrenComponentProps } from '../../utils';
-import { Accessibility } from '@fluentui/accessibility';
+import {
+  commonPropTypes,
+  UIComponentProps,
+  ContentComponentProps,
+  ChildrenComponentProps,
+  createShorthand,
+} from '../../utils';
+import { Accessibility, breadcrumbBehavior, BreadcrumbBehaviorProps } from '@fluentui/accessibility';
+import { Box } from '../Box/Box';
 
 export interface BreadcrumbProps
   extends UIComponentProps<BreadcrumbProps>,
     ContentComponentProps,
     ChildrenComponentProps {
   /** Accessibility behavior if overridden by the user. */
-  accessibility?: Accessibility<never>;
+  accessibility?: Accessibility<BreadcrumbBehaviorProps>;
 }
 
 export type BreadcrumbStylesProps = never;
@@ -64,7 +70,17 @@ export const Breadcrumb = compose<'nav', BreadcrumbProps, BreadcrumbStylesProps,
           ...unhandledProps,
         })}
       >
-        <div role="list">{childrenExist(children) ? children : content}</div>
+        {createShorthand(
+          composeOptions.slots.list,
+          {},
+          {
+            defaultProps: () =>
+              getA11yProps('list', {
+                children,
+                content,
+              }),
+          },
+        )}
       </ElementType>,
     );
 
@@ -74,13 +90,17 @@ export const Breadcrumb = compose<'nav', BreadcrumbProps, BreadcrumbStylesProps,
   },
   {
     className: breadcrumbClassName,
+    slots: {
+      list: Box,
+    },
     displayName: 'Breadcrumb',
     handledProps: ['accessibility', 'as', 'children', 'className', 'content', 'design', 'styles', 'variables'],
   },
 );
 
 Breadcrumb.defaultProps = {
   as: 'nav',
+  accessibility: breadcrumbBehavior,
 };
 
 Breadcrumb.propTypes = commonPropTypes.createCommon();