Looked real quick with @khuynh92 (@mikewheaton FYI) and backtracked it to this PR. The issue comes from having getFocusStyle() on itemLink style area of the Breadcrumb:
https://github.com/OfficeDev/office-ui-fabric-react/blob/0cacff12208fb85c55cfd23148e03797a151304d/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.styles.ts#L138
... which gets passed to Link as a className. Link's root area which takes in that class sets the focus rectangle without getFocusStyle helper but instead sets an outline with it's default 0px inset. Because getFocusStyle by default has inset equal to 1px we get a doubled outline when we focus on it.
@khuynh92 will submit a PR for a one of the fixes we found and hoping the designer can decide which one is better.
:tada:This issue was addressed in #7716, which has now been successfully released as [email protected].:tada:
Handy links:
Most helpful comment
Looked real quick with @khuynh92 (@mikewheaton FYI) and backtracked it to this PR. The issue comes from having
getFocusStyle()onitemLinkstyle area of theBreadcrumb:https://github.com/OfficeDev/office-ui-fabric-react/blob/0cacff12208fb85c55cfd23148e03797a151304d/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.styles.ts#L138
... which gets passed to Link as a className.
Link'srootarea which takes in that class sets the focus rectangle withoutgetFocusStylehelper but instead sets an outline with it's default 0pxinset. BecausegetFocusStyleby default hasinsetequal to 1px we get a doubled outline when we focus on it.@khuynh92 will submit a PR for a one of the fixes we found and hoping the designer can decide which one is better.