diff --git a/common/changes/office-ui-fabric-react/breadcrumbFocus_2018-04-12-22-52.json b/common/changes/office-ui-fabric-react/breadcrumbFocus_2018-04-12-22-52.json new file mode 100644 index 00000000000000..d13446f5d7708b --- /dev/null +++ b/common/changes/office-ui-fabric-react/breadcrumbFocus_2018-04-12-22-52.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Add focus method to Breadcrumb", + "type": "patch" + } + ], + "packageName": "office-ui-fabric-react", + "email": "v-hudole@microsoft.com" +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.base.tsx b/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.base.tsx index 64344b43f417ca..fb8784f6f68e5f 100644 --- a/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.base.tsx +++ b/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.base.tsx @@ -2,7 +2,8 @@ import * as React from 'react'; import { BaseComponent, css, - getRTL + getRTL, + createRef } from '../../Utilities'; import { FocusZone, FocusZoneDirection } from '../../FocusZone'; import { Link } from '../../Link'; @@ -31,10 +32,21 @@ export class Breadcrumb extends BaseComponent { maxDisplayedItems: 999 }; + protected focusZone = createRef(); + constructor(props: IBreadcrumbProps) { super(props); } + /** + * Sets focus to the first breadcrumb link. + */ + public focus(): void { + if (this.focusZone.value) { + this.focusZone.value.focus(); + } + } + public render() { const { onReduceData = this._onReduceData, maxDisplayedItems, items } = this.props; const breadCrumbData: IBreadCrumbData = { @@ -93,7 +105,7 @@ export class Breadcrumb extends BaseComponent { role='navigation' aria-label={ ariaLabel } > - +
    { renderedOverflowItems && renderedOverflowItems.length !== 0 && (
  1. diff --git a/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.types.ts b/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.types.ts index 0b8db646e06628..05c0cb7225cd14 100644 --- a/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.types.ts +++ b/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.types.ts @@ -6,7 +6,10 @@ import { IIconProps } from '../Icon'; import { IRenderFunction, IComponentAs } from '../../Utilities'; export interface IBreadcrumb { - + /** + * Sets focus to the first breadcrumb link. + */ + focus(): void; } export interface IBreadcrumbProps extends React.Props {