From f4a281238088038ddfb7eef8b56d624b060f386f Mon Sep 17 00:00:00 2001
From: almedina-ms <35784165+almedina-ms@users.noreply.github.com>
Date: Fri, 9 Apr 2021 15:10:34 -0700
Subject: [PATCH] [BreadcrumbBar] Add theme resource keys for customizing
 Chevron padding and font weight (#4727)

* Add styles for dropdown flyout

* Fix ellipsis flyout widht

* Fix margins for breadcrumb items

* Remove flyout style retrieval and set it directly in xaml file

* First version of margin modification

* Fix margin bottom

* Fix focus margin height and fix padding for last item

* Stretch border for inline items and compress for dropdown items

* Fix PR comments

* Readd corner radius

* Add modifiable padding between chevrons

* Fix missing resource key

* Fix margin and padding

* Remove padding resource key for a different PR

* Move resources to theme resources

* Add test to verify current item doesnt raise invoke pattern and fix tests

* Remove extra keys

* Move margins to be rendered close to the buttons

* Add resource keys for font weight and chevron padding

* Clean xaml a little bit

* Remove other unused keys

* Hide element from Accessibility tree

* Remove hard coded breadcrumb names

* Fix accessibility control type and name

* Removed unused properties

* Remove extra code lines and set button to non focusable

* Remove hard coded naming for drop down items

* Fix comments from PR

* Remove unnecesary automation strings

* Fix tests

* small refactor to DropDown item retrieval method

* Fix DropDown item margin

* Remove extra theme resources keys

* Fix comments from design review

* Last fixes from focus rect
---
 dev/Breadcrumb/BreadcrumbBar.cpp              |   5 -
 dev/Breadcrumb/BreadcrumbBar.h                |   3 -
 dev/Breadcrumb/BreadcrumbBar.xaml             | 162 +++++++++++-------
 dev/Breadcrumb/BreadcrumbBarItem.cpp          |   3 -
 dev/Breadcrumb/BreadcrumbBarItem.h            |   1 -
 .../BreadcrumbBarItemAutomationPeer.cpp       |   6 +
 .../BreadcrumbBarItemAutomationPeer.h         |   1 +
 .../BreadcrumbBar_themeresources.xaml         |  36 ++--
 .../InteractionTests/BreadcrumbBarTests.cs    | 113 ++++++++----
 dev/Breadcrumb/Strings/en-us/Resources.resw   |   4 +
 dev/ResourceHelper/ResourceAccessor.h         |   1 +
 11 files changed, 218 insertions(+), 117 deletions(-)

diff --git a/dev/Breadcrumb/BreadcrumbBar.cpp b/dev/Breadcrumb/BreadcrumbBar.cpp
index 31a2a9a9ad..02463e2910 100644
--- a/dev/Breadcrumb/BreadcrumbBar.cpp
+++ b/dev/Breadcrumb/BreadcrumbBar.cpp
@@ -257,8 +257,6 @@ void BreadcrumbBar::OnElementPreparedEvent(const winrt::ItemsRepeater&, const wi
                         // Any other element just resets the visual properties
                         itemImpl->ResetVisualProperties();
                     }
-
-                    winrt::AutomationProperties::SetName(item, s_breadcrumbItemAutomationName + winrt::to_hstring(itemIndex));
                 }
             }
         }
@@ -280,7 +278,6 @@ void BreadcrumbBar::OnElementIndexChangedEvent(const winrt::ItemsRepeater& sende
         }
 
         FocusElementAt(newIndex);
-        winrt::AutomationProperties::SetName(args.Element(), s_breadcrumbItemAutomationName + winrt::to_hstring(newIndex));
     }
 }
 
@@ -290,8 +287,6 @@ void BreadcrumbBar::OnElementClearingEvent(const winrt::ItemsRepeater&, const wi
     {
         const auto& itemImpl = winrt::get_self<BreadcrumbBarItem>(item);
         itemImpl->ResetVisualProperties();
-
-        winrt::AutomationProperties::SetName(item, winrt::hstring());
     }
 }
 
diff --git a/dev/Breadcrumb/BreadcrumbBar.h b/dev/Breadcrumb/BreadcrumbBar.h
index fcce99b5a8..561809d26a 100644
--- a/dev/Breadcrumb/BreadcrumbBar.h
+++ b/dev/Breadcrumb/BreadcrumbBar.h
@@ -96,7 +96,4 @@ class BreadcrumbBar :
 
     // Template Parts
     static constexpr std::wstring_view s_itemsRepeaterPartName{ L"PART_ItemsRepeater"sv };
-
-    // Automation Names
-    static constexpr std::wstring_view s_breadcrumbItemAutomationName{ L"BreadcrumbBarItem"sv };
 };
diff --git a/dev/Breadcrumb/BreadcrumbBar.xaml b/dev/Breadcrumb/BreadcrumbBar.xaml
index 6f00cf33a0..3b87367f27 100644
--- a/dev/Breadcrumb/BreadcrumbBar.xaml
+++ b/dev/Breadcrumb/BreadcrumbBar.xaml
@@ -7,27 +7,26 @@
     xmlns:contract7NotPresent="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractNotPresent(Windows.Foundation.UniversalApiContract,7)">
 
     <Style x:Key="DefaultBreadcrumbBarItemStyle" TargetType="local:BreadcrumbBarItem">
-        <Setter Property="Foreground" Value="{ThemeResource BreadcrumbBarForegroundBrush}" />
         <Setter Property="Background" Value="{ThemeResource BreadcrumbBarBackgroundBrush}" />
         <Setter Property="BorderBrush" Value="{ThemeResource BreadcrumbBarBorderBrush}" />
-        <Setter Property="HorizontalAlignment" Value="Stretch" />
-        <Setter Property="VerticalAlignment" Value="Center" />
-        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
-        <Setter Property="VerticalContentAlignment" Value="Center" />
+        <Setter Property="FocusVisualMargin" Value="1" />
         <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
-        <Setter Property="FontWeight" Value="Normal" />
         <Setter Property="FontSize" Value="{ThemeResource BreadcrumbBarItemThemeFontSize}"/>
-        <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
-        <Setter Property="FocusVisualMargin" Value="1" />
+        <Setter Property="FontWeight" Value="{ThemeResource BreadcrumbBarItemFontWeight}" />
+        <Setter Property="Foreground" Value="{ThemeResource BreadcrumbBarForegroundBrush}" />
+        <Setter Property="HorizontalAlignment" Value="Stretch" />
+        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
         <Setter Property="IsTabStop" Value="True"/>
+        <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
+        <Setter Property="VerticalAlignment" Value="Center" />
+        <Setter Property="VerticalContentAlignment" Value="Center" />
         <contract7Present:Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="local:BreadcrumbBarItem">
                     <Grid x:Name="PART_LayoutRoot"
-                          Margin="{StaticResource BreadcrumbBarItemDefaultMargin}"
-                          Padding="{StaticResource BreadcrumbBarItemDefaultPadding}"
-                          contract7Present:CornerRadius="{TemplateBinding CornerRadius}">
+                          contract7Present:CornerRadius="{TemplateBinding CornerRadius}"
+                          contract7NotPresent:CornerRadius="{ThemeResource ControlCornerRadius}">
 
                         <VisualStateManager.VisualStateGroups>
                             <VisualStateGroup x:Name="ItemTypeStates">
@@ -36,9 +35,14 @@
                                 <VisualState x:Name="EllipsisDropDown">
                                     <VisualState.Setters>
                                         <Setter Target="PART_ItemButton.Visibility" Value="Collapsed"/>
+                                        <Setter Target="PART_ChevronTextBlock.Visibility" Value="Collapsed"/>
+                                        <Setter Target="PART_ContentColumn.Width" Value="*"/>
                                         <Setter Target="PART_EllipsisDropDownItemContentPresenter.Visibility" Value="Visible"/>
-                                        <Setter Target="PART_LayoutRoot.Padding" Value="{StaticResource BreadcrumbBarEllipsisDropDownItemPadding}"/>
-                                        <Setter Target="PART_LayoutRoot.Margin" Value="{StaticResource BreadcrumbBarEllipsisDropDownItemMargin}"/>
+                                        <Setter Target="PART_LayoutRoot.Padding" Value="11,7,11,9"/>
+                                        <Setter Target="PART_LayoutRoot.Margin" Value="5,3"/>
+                                        <Setter Target="PART_LayoutRoot.FocusVisualMargin" Value="-3" />
+                                        <Setter Target="PART_ItemButton.(Control.IsTemplateFocusTarget)" Value="False" />
+                                        <Setter Target="PART_LayoutRoot.(Control.IsTemplateFocusTarget)" Value="True" />
                                     </VisualState.Setters>
                                 </VisualState>
                             </VisualStateGroup>
@@ -96,10 +100,11 @@
 
                                 <VisualState x:Name="LastItem">
                                     <VisualState.Setters>
-                                        <Setter Target="PART_ChevronTextBlock.Visibility" Value="Collapsed"/>
-                                        <Setter Target="PART_SeparatorColumnDefinition.Width" Value="0px"/>
-                                        <Setter Target="PART_ChevronColumnDefinition.Width" Value="0px" />
-                                        <Setter Target="PART_LayoutRoot.Margin" Value="{StaticResource BreadcrumbBarItemLastItemMargin}"/>
+                                        <Setter Target="PART_ItemButton.Visibility" Value="Collapsed"/>
+                                        <Setter Target="PART_ChevronTextBlock.Visibility" Value="Collapsed" />
+                                        <Setter Target="PART_LastItemContentPresenter.Visibility" Value="Visible"/>
+                                        <Setter Target="PART_ItemButton.(Control.IsTemplateFocusTarget)" Value="False" />
+                                        <Setter Target="PART_LastItemContentPresenter.(Control.IsTemplateFocusTarget)" Value="True" />
                                     </VisualState.Setters>
                                 </VisualState>
 
@@ -128,7 +133,7 @@
                                         <Setter Property="Background" Value="{ThemeResource BreadcrumbBarEllipsisFlyoutPresenterBackground}" />
                                         <Setter Property="BorderBrush" Value="{ThemeResource BreadcrumbBarEllipsisFlyoutPresenterBorderBrush}" />
                                         <Setter Property="BorderThickness" Value="{ThemeResource BreadcrumbBarEllipsisFlyoutPresenterBorderThemeThickness}" />
-                                        <Setter Property="Padding" Value="{StaticResource BreadcrumbBarEllipsisFlyoutPresenterThemePadding}" />
+                                        <Setter Property="Padding" Value="0,2" />
                                         <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled" />
                                         <Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto" />
                                         <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
@@ -136,7 +141,7 @@
                                         <Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="False" />
                                         <Setter Property="ScrollViewer.ZoomMode" Value="Disabled" />
                                         <Setter Property="MaxWidth" Value="{ThemeResource FlyoutThemeMaxWidth}" />
-                                        <Setter Property="MinHeight" Value="{StaticResource BreadcrumbBarEllipsisFlyoutThemeMinHeight}" />
+                                        <Setter Property="MinHeight" Value="40" />
                                         <contract7Present:Setter Property="CornerRadius" Value="{ThemeResource OverlayCornerRadius}" />
 
                                         <Setter Property="Template">
@@ -172,14 +177,24 @@
                             </Flyout>
                         </Grid.Resources>
 
+                        <Grid.ColumnDefinitions>
+                            <ColumnDefinition Width="Auto" x:Name="PART_ContentColumn" />
+                            <ColumnDefinition Width="Auto" x:Name="PART_ChevronColumn" />
+                        </Grid.ColumnDefinitions>
+                        
                         <Button x:Name="PART_ItemButton"
                             x:DeferLoadStrategy="Lazy"
+                            Grid.Column="0"
                             AutomationProperties.Name="BreadcrumbBarItemButton"
                             Background="{TemplateBinding Background}"
                             BorderBrush="{TemplateBinding BorderBrush}"
                             BorderThickness="{TemplateBinding BorderThickness}"
-                            Padding="{TemplateBinding Padding}"
-                            IsTabStop="False">
+                            Control.IsTemplateFocusTarget="True"
+                            IsTabStop="False"
+                            FocusVisualMargin="-3"
+                            Padding="1,3"
+                            contract7Present:CornerRadius="{TemplateBinding CornerRadius}"
+                            AutomationProperties.AccessibilityView="Raw">
                             <Button.Style>
                                 <Style TargetType="Button">
                                     <Setter Property="Foreground" Value="{ThemeResource BreadcrumbBarNormalForegroundBrush}" />
@@ -191,7 +206,6 @@
                                     <Setter Property="FontWeight" Value="Normal" />
                                     <Setter Property="FontSize" Value="{ThemeResource BreadcrumbBarItemThemeFontSize}" />
                                     <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
-                                    <Setter Property="FocusVisualMargin" Value="-3" />
                                     <Setter Property="Padding" Value="0,0,0,0" />
                                     <Setter Property="Template">
                                         <Setter.Value>
@@ -290,61 +304,83 @@
                             <!-- This is the Button Content -->
                             <Grid AutomationProperties.Name="BreadcrumbBarItemGrid"
                                   AutomationProperties.AccessibilityView="Raw">
-                                <Grid.ColumnDefinitions>
-                                    <ColumnDefinition Width="Auto" />
-                                    <ColumnDefinition x:Name="PART_SeparatorColumnDefinition" Width="0px" />
-                                    <ColumnDefinition x:Name="PART_ChevronColumnDefinition" Width="Auto" />
-                                </Grid.ColumnDefinitions>
 
                                 <ContentPresenter x:Name="PART_ItemContentPresenter"
-                                        AutomationProperties.Name="BreadcrumbBarItemContentPresenter"
-                                        Grid.Column="0"
-                                        Content="{TemplateBinding Content}"
-                                        ContentTransitions="{TemplateBinding ContentTransitions}"
-                                        ContentTemplate="{TemplateBinding ContentTemplate}"
-                                        FontFamily="{TemplateBinding FontFamily}"
-                                        FontSize="{TemplateBinding FontSize}"
-                                        FontWeight="{TemplateBinding FontWeight}"
-                                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
-                                        LineHeight="20"
-                                        AutomationProperties.AccessibilityView="Raw"/>
+                                    AutomationProperties.Name="BreadcrumbBarItemContentPresenter"
+                                    Grid.Column="0"
+                                    Content="{TemplateBinding Content}"
+                                    ContentTransitions="{TemplateBinding ContentTransitions}"
+                                    ContentTemplate="{TemplateBinding ContentTemplate}"
+                                    FontFamily="{TemplateBinding FontFamily}"
+                                    FontSize="{TemplateBinding FontSize}"
+                                    FontWeight="{TemplateBinding FontWeight}"
+                                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                                    LineHeight="20"
+                                    AutomationProperties.AccessibilityView="Raw"/>
 
                                 <TextBlock x:Name="PART_EllipsisTextBlock"
-                                        AutomationProperties.Name="BreadcrumbBarEllipsisTextBlock"
-                                        FontFamily="{ThemeResource SymbolThemeFontFamily}"
-                                        Text="&#xE712;"
-                                        Visibility="Collapsed"
-                                        VerticalAlignment="Stretch"
-                                        IsTextScaleFactorEnabled="False"
-                                        FontSize="{TemplateBinding FontSize}"
-                                        AutomationProperties.AccessibilityView="Raw"
-                                        Grid.Column="0"/>
-
-                                <TextBlock x:Name="PART_ChevronTextBlock"
-                                        AutomationProperties.Name="ChevronTextBlock"
-                                        FontFamily="{ThemeResource SymbolThemeFontFamily}"
-                                        Foreground="{ThemeResource BreadcrumbBarNormalForegroundBrush}"
-                                        Text="&#xE76C;"
-                                        VerticalAlignment="Center"
-                                        HorizontalAlignment="Center"
-                                        IsTextScaleFactorEnabled="False"
-                                        FontSize="12"
-                                        AutomationProperties.AccessibilityView="Raw"
-                                        Padding="2,0,0,0"
-                                        Grid.Column="2"/>
+                                    AutomationProperties.Name="BreadcrumbBarEllipsisTextBlock"
+                                    Grid.Column="0"
+                                    FontFamily="{ThemeResource SymbolThemeFontFamily}"
+                                    FontSize="{TemplateBinding FontSize}"
+                                    Padding="3"
+                                    Text="&#xE712;"                                       
+                                    Visibility="Collapsed"
+                                    VerticalAlignment="Stretch"
+                                    IsTextScaleFactorEnabled="False"
+                                    AutomationProperties.AccessibilityView="Raw" />
                             </Grid>
                             
                         </Button>
+
+                        <!-- ContentPresenter to be shown only when the rendered item is the Current Item -->
+                        <ContentPresenter x:Name="PART_LastItemContentPresenter"
+                            Grid.Column="0"
+                            Visibility="Collapsed"
+                            Content="{TemplateBinding Content}"
+                            ContentTransitions="{TemplateBinding ContentTransitions}"
+                            ContentTemplate="{TemplateBinding ContentTemplate}"
+                            FocusVisualMargin="-3"
+                            FontFamily="{TemplateBinding FontFamily}"
+                            FontSize="{TemplateBinding FontSize}"
+                            FontWeight="{TemplateBinding FontWeight}"
+                            Foreground="{ThemeResource BreadcrumbBarCurrentNormalForegroundBrush}"
+                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                            LineHeight="20"
+                            Padding="1,3"
+                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                            contract7Present:CornerRadius="{TemplateBinding CornerRadius}"
+                            contract7NotPresent:CornerRadius="{ThemeResource ControlCornerRadius}"
+                            AutomationProperties.AccessibilityView="Raw"/>
+
+                        <!-- ContentPresenter to be shown only when the rendered item is a drop down Item -->
                         <ContentPresenter x:Name="PART_EllipsisDropDownItemContentPresenter"
                             x:DeferLoadStrategy="Lazy"
+                            Grid.Column="0"
                             Visibility="Collapsed"
                             Content="{TemplateBinding Content}"
                             ContentTemplate="{TemplateBinding ContentTemplate}"
                             ContentTransitions="{TemplateBinding ContentTransitions}"
-                            HorizontalAlignment="Stretch"
+                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                             HorizontalContentAlignment="Stretch"
-                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
+                            FontWeight="Normal"
+                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                            AutomationProperties.AccessibilityView="Raw"/>
+
+                        <!-- TextBlock that contains the chevron icon -->
+                        <TextBlock x:Name="PART_ChevronTextBlock"
+                            AutomationProperties.Name="ChevronTextBlock"
+                            Grid.Column="1"
+                            HorizontalAlignment="Center"
+                            IsTextScaleFactorEnabled="False"       
+                            FontFamily="{ThemeResource SymbolThemeFontFamily}"
+                            FontSize="{ThemeResource BreadcrumbBarChevronFontSize}"
+                            Foreground="{ThemeResource BreadcrumbBarNormalForegroundBrush}"
+                            Text="&#xE76C;"
+                            Padding="{ThemeResource BreadcrumbBarChevronPadding}"
+                            VerticalAlignment="Center"
+                            AutomationProperties.AccessibilityView="Raw"/>
                     </Grid>
                 </ControlTemplate>
             </Setter.Value>
diff --git a/dev/Breadcrumb/BreadcrumbBarItem.cpp b/dev/Breadcrumb/BreadcrumbBarItem.cpp
index 53f1d82fe6..99b6224991 100644
--- a/dev/Breadcrumb/BreadcrumbBarItem.cpp
+++ b/dev/Breadcrumb/BreadcrumbBarItem.cpp
@@ -298,9 +298,6 @@ void BreadcrumbBarItem::UpdateFlyoutIndex(const winrt::UIElement& element, const
                 ellipsisDropDownItemImpl->SetIndex(itemCount - index);
             }
 
-            hstring name = s_ellipsisItemAutomationName + winrt::to_hstring(index + 1);
-            winrt::AutomationProperties::SetName(element, name);
-
             element.SetValue(winrt::AutomationProperties::PositionInSetProperty(), box_value(index + 1));
             element.SetValue(winrt::AutomationProperties::SizeOfSetProperty(), box_value(itemCount));
         }
diff --git a/dev/Breadcrumb/BreadcrumbBarItem.h b/dev/Breadcrumb/BreadcrumbBarItem.h
index 74a9991ecd..1657fb24c7 100644
--- a/dev/Breadcrumb/BreadcrumbBarItem.h
+++ b/dev/Breadcrumb/BreadcrumbBarItem.h
@@ -160,6 +160,5 @@ class BreadcrumbBarItem :
 
     // Automation Names
     static constexpr std::wstring_view s_ellipsisFlyoutAutomationName{ L"EllipsisFlyout"sv };
-    static constexpr std::wstring_view s_ellipsisItemAutomationName{ L"EllipsisItem"sv };
     static constexpr std::wstring_view s_ellipsisItemsRepeaterAutomationName{ L"EllipsisItemsRepeater"sv };
 };
diff --git a/dev/Breadcrumb/BreadcrumbBarItemAutomationPeer.cpp b/dev/Breadcrumb/BreadcrumbBarItemAutomationPeer.cpp
index 6c7865d522..10e9f14396 100644
--- a/dev/Breadcrumb/BreadcrumbBarItemAutomationPeer.cpp
+++ b/dev/Breadcrumb/BreadcrumbBarItemAutomationPeer.cpp
@@ -3,6 +3,7 @@
 
 #include "pch.h"
 #include "common.h"
+#include "ResourceAccessor.h"
 #include "BreadcrumbBarItem.h"
 #include "BreadcrumbBarItemAutomationPeer.h"
 #include "BreadcrumbBarItemAutomationPeer.properties.cpp"
@@ -13,6 +14,11 @@ BreadcrumbBarItemAutomationPeer::BreadcrumbBarItemAutomationPeer(winrt::Breadcru
 }
 
 // IAutomationPeerOverrides
+hstring BreadcrumbBarItemAutomationPeer::GetLocalizedControlTypeCore()
+{
+    return ResourceAccessor::GetLocalizedStringResource(SR_BreadcrumbBarItemLocalizedControlType);
+}
+
 winrt::IInspectable BreadcrumbBarItemAutomationPeer::GetPatternCore(winrt::PatternInterface const& patternInterface)
 {
     if (patternInterface == winrt::PatternInterface::Invoke)
diff --git a/dev/Breadcrumb/BreadcrumbBarItemAutomationPeer.h b/dev/Breadcrumb/BreadcrumbBarItemAutomationPeer.h
index c0e1049a79..7f7da7cc21 100644
--- a/dev/Breadcrumb/BreadcrumbBarItemAutomationPeer.h
+++ b/dev/Breadcrumb/BreadcrumbBarItemAutomationPeer.h
@@ -14,6 +14,7 @@ class BreadcrumbBarItemAutomationPeer :
     BreadcrumbBarItemAutomationPeer(winrt::BreadcrumbBarItem const& owner);
 
     // IAutomationPeerOverrides
+    hstring GetLocalizedControlTypeCore();
     winrt::IInspectable GetPatternCore(winrt::PatternInterface const& patternInterface);
     hstring GetClassNameCore();
     winrt::AutomationControlType GetAutomationControlTypeCore();
diff --git a/dev/Breadcrumb/BreadcrumbBar_themeresources.xaml b/dev/Breadcrumb/BreadcrumbBar_themeresources.xaml
index 609f30a913..15cd995962 100644
--- a/dev/Breadcrumb/BreadcrumbBar_themeresources.xaml
+++ b/dev/Breadcrumb/BreadcrumbBar_themeresources.xaml
@@ -3,21 +3,16 @@
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 
-    <x:String x:Key="BreadcrumbBarChevronLeftToRight">&#xE76C;</x:String>
-    <x:String x:Key="BreadcrumbBarChevronRightToLeft">&#xE76B;</x:String>
-
-    <x:Double x:Key="BreadcrumbBarEllipsisFlyoutThemeMinHeight">40</x:Double>
-    <Thickness x:Key="BreadcrumbBarEllipsisDropDownItemMargin">5,3,5,3</Thickness>
-    <Thickness x:Key="BreadcrumbBarEllipsisDropDownItemPadding">11,7,11,9</Thickness>
-    <Thickness x:Key="BreadcrumbBarEllipsisFlyoutPresenterThemePadding">0,2,0,2</Thickness>
-
-    <Thickness x:Key="BreadcrumbBarItemDefaultPadding">4,0,3,0</Thickness>
-    <Thickness x:Key="BreadcrumbBarItemDefaultMargin">0,3,0,4</Thickness>
-    <Thickness x:Key="BreadcrumbBarItemLastItemMargin">0,3,1,4</Thickness>
-
     <ResourceDictionary.ThemeDictionaries>
 
         <ResourceDictionary x:Key="Default">
+            <x:String x:Key="BreadcrumbBarChevronLeftToRight">&#xE974;</x:String>
+            <x:String x:Key="BreadcrumbBarChevronRightToLeft">&#xE973;</x:String>
+
+            <Thickness x:Key="BreadcrumbBarChevronPadding">2,0</Thickness>
+
+            <FontWeight x:Key="BreadcrumbBarItemFontWeight">Normal</FontWeight>
+            
             <StaticResource x:Key="BreadcrumbBarNormalForegroundBrush" ResourceKey="TextFillColorPrimaryBrush" />
             <StaticResource x:Key="BreadcrumbBarHoverForegroundBrush" ResourceKey="TextFillColorSecondaryBrush" />
             <StaticResource x:Key="BreadcrumbBarPressedForegroundBrush" ResourceKey="TextFillColorTertiaryBrush" />
@@ -47,9 +42,17 @@
             <Thickness x:Key="BreadcrumbBarEllipsisFlyoutPresenterBorderThemeThickness">1</Thickness>
 
             <StaticResource x:Key="BreadcrumbBarItemThemeFontSize" ResourceKey="ControlContentThemeFontSize" />
+            <x:Double x:Key="BreadcrumbBarChevronFontSize">12</x:Double>
         </ResourceDictionary>
 
         <ResourceDictionary x:Key="Light">
+            <x:String x:Key="BreadcrumbBarChevronLeftToRight">&#xE974;</x:String>
+            <x:String x:Key="BreadcrumbBarChevronRightToLeft">&#xE973;</x:String>
+
+            <Thickness x:Key="BreadcrumbBarChevronPadding">2,0</Thickness>
+
+            <FontWeight x:Key="BreadcrumbBarItemFontWeight">Normal</FontWeight>
+
             <StaticResource x:Key="BreadcrumbBarNormalForegroundBrush" ResourceKey="TextFillColorPrimaryBrush" />
             <StaticResource x:Key="BreadcrumbBarHoverForegroundBrush" ResourceKey="TextFillColorSecondaryBrush" />
             <StaticResource x:Key="BreadcrumbBarPressedForegroundBrush" ResourceKey="TextFillColorTertiaryBrush" />
@@ -80,9 +83,17 @@
             <Thickness x:Key="BreadcrumbBarEllipsisFlyoutPresenterBorderThemeThickness">1</Thickness>
 
             <StaticResource x:Key="BreadcrumbBarItemThemeFontSize" ResourceKey="ControlContentThemeFontSize" />
+            <x:Double x:Key="BreadcrumbBarChevronFontSize">12</x:Double>
         </ResourceDictionary>
 
         <ResourceDictionary x:Key="HighContrast">
+            <x:String x:Key="BreadcrumbBarChevronLeftToRight">&#xE974;</x:String>
+            <x:String x:Key="BreadcrumbBarChevronRightToLeft">&#xE973;</x:String>
+
+            <Thickness x:Key="BreadcrumbBarChevronPadding">2,0</Thickness>
+
+            <FontWeight x:Key="BreadcrumbBarItemFontWeight">Normal</FontWeight>
+
             <StaticResource x:Key="BreadcrumbBarNormalForegroundBrush" ResourceKey="SystemColorHighlightColor" />
             <StaticResource x:Key="BreadcrumbBarHoverForegroundBrush" ResourceKey="SystemColorButtonTextColor" />
             <StaticResource x:Key="BreadcrumbBarPressedForegroundBrush" ResourceKey="SystemColorHighlightColor" />
@@ -112,6 +123,7 @@
             <Thickness x:Key="BreadcrumbBarEllipsisFlyoutPresenterBorderThemeThickness">2</Thickness>
 
             <StaticResource x:Key="BreadcrumbBarItemThemeFontSize" ResourceKey="ControlContentThemeFontSize" />
+            <x:Double x:Key="BreadcrumbBarChevronFontSize">12</x:Double>
         </ResourceDictionary>
     </ResourceDictionary.ThemeDictionaries>
 </ResourceDictionary>
diff --git a/dev/Breadcrumb/InteractionTests/BreadcrumbBarTests.cs b/dev/Breadcrumb/InteractionTests/BreadcrumbBarTests.cs
index 811118ed69..413b3ae871 100644
--- a/dev/Breadcrumb/InteractionTests/BreadcrumbBarTests.cs
+++ b/dev/Breadcrumb/InteractionTests/BreadcrumbBarTests.cs
@@ -23,6 +23,10 @@
 using System.Runtime.CompilerServices;
 using System.Threading;
 using System.Collections.ObjectModel;
+using Microsoft.Windows.Apps.Test.Automation.Text;
+using System.Drawing;
+using Windows.UI.Xaml.Controls.Primitives;
+using System.Runtime.InteropServices;
 
 namespace Windows.UI.Xaml.Tests.MUXControls.InteractionTests
 {
@@ -123,6 +127,30 @@ public void NoInteractionTest()
             }
         }
 
+        [TestMethod]
+        [TestProperty("TestSuite", "A")]
+        public void CheckCurrentItemDoesNotRaiseInvokeEvent()
+        {
+            // This is a sanity test that verifies that the BreadcrumbBar control exists and the basic setup for a test is correct
+            using (var setup = new TestSetupHelper("BreadcrumbBar Tests"))
+            {
+                UIObject breadcrumb = RetrieveBreadcrumbControl();
+                var breadcrumbItems = breadcrumb.Children;
+
+                Verify.AreEqual(2, breadcrumbItems.Count, "The breadcrumb should contain 2 items: 1 item and an ellipsis");
+
+                var currentItem = breadcrumbItems[1];
+
+                var currentBreadcrumbBarItem = ConvertTo<BreadcrumbBarItem>(currentItem);
+                Verify.IsNotNull(currentBreadcrumbBarItem, "UIElement should be a BreadcrumbBarItem");
+
+                currentBreadcrumbBarItem.Click();
+
+                VerifyLastClickedItemIs("");
+                Verify.AreEqual("Root", GetCurrentItemText(currentBreadcrumbBarItem));
+            }
+        }
+
         [TestMethod]
         [TestProperty("TestSuite", "A")]
         public void AddItemsAndCompressBreadcrumbTest()
@@ -134,7 +162,7 @@ public void AddItemsAndCompressBreadcrumbTest()
             {
                 var breadcrumb = SetUpTest();
                 
-                VerifyBreadcrumbBarItemsContain(breadcrumb.Children, new string[] { "Root", "Node A", "Node A_2", "Node A_2_3", "Node A_2_3_1" });
+                VerifyBreadcrumbBarItemsContain(breadcrumb.Children, new string[] { "Root", "Node A", "Node A_2", "Node A_2_3", "Node A_2_3_1" }, true);
                 
                 Verify.AreEqual(2, breadcrumb.Children.Count, "The breadcrumb should contain 2 items: the root and an ellipsis");
             }
@@ -178,9 +206,9 @@ public void InvokeEllipsisItemTest()
                 // Click on the Ellipsis BreadcrumbBarItem
                 InvokeEllipsisItem(breadcrumb);
 
-                VerifyDropDownItemContainsText("EllipsisItem1", "Node A_2");
-                VerifyDropDownItemContainsText("EllipsisItem2", "Node A");
-                VerifyDropDownItemContainsText("EllipsisItem3", "Root");
+                VerifyDropDownItemContainsText("Node A_2");
+                VerifyDropDownItemContainsText("Node A");
+                VerifyDropDownItemContainsText("Root");
 
                 Log.Comment("Verify only 3 ellipsis items exist");
                 var ellipsisItem4 = FindElement.ByName("EllipsisItem4");
@@ -201,7 +229,7 @@ public void InvokeDropDownItemTest()
                 // Click on the Ellipsis BreadcrumbBarItem
                 InvokeEllipsisItem(breadcrumb);
 
-                var ellipsisItemNodeA = VerifyDropDownItemContainsText("EllipsisItem2", "Node A");
+                var ellipsisItemNodeA = GetDropDownItemByName("Node A");
                 ellipsisItemNodeA.Invoke();
                 Thread.Sleep(500);
 
@@ -373,28 +401,28 @@ public void KeyboardNavigationFlyoutItemsTest()
 
                 // Here we should verify that the first element in the flyout has focus and we can move up/down
 
-                var dropDownItem = GetDropDownItemByName("EllipsisItem1");
-                Verify.IsTrue(dropDownItem.HasKeyboardFocus, "EllipsisItem1 BreadcrumbBarItem should have focus");
+                var dropDownItem = GetDropDownItemByName("Node A_2");
+                Verify.IsTrue(dropDownItem.HasKeyboardFocus, "'Node A_2' BreadcrumbBarItem should have focus");
 
                 KeyboardHelper.PressKey(Key.Down);
 
-                dropDownItem = GetDropDownItemByName("EllipsisItem2");
-                Verify.IsTrue(dropDownItem.HasKeyboardFocus, "EllipsisItem2 BreadcrumbBarItem should have focus");
+                dropDownItem = GetDropDownItemByName("Node A");
+                Verify.IsTrue(dropDownItem.HasKeyboardFocus, "'Node A' BreadcrumbBarItem should have focus");
 
                 KeyboardHelper.PressKey(Key.Down);
 
-                dropDownItem = GetDropDownItemByName("EllipsisItem3");
-                Verify.IsTrue(dropDownItem.HasKeyboardFocus, "EllipsisItem3 BreadcrumbBarItem should have focus");
+                dropDownItem = GetDropDownItemByName("Root");
+                Verify.IsTrue(dropDownItem.HasKeyboardFocus, "'Root' BreadcrumbBarItem should have focus");
 
                 KeyboardHelper.PressKey(Key.Up);
 
-                dropDownItem = GetDropDownItemByName("EllipsisItem2");
-                Verify.IsTrue(dropDownItem.HasKeyboardFocus, "EllipsisItem2 BreadcrumbBarItem should have focus");
+                dropDownItem = GetDropDownItemByName("Node A");
+                Verify.IsTrue(dropDownItem.HasKeyboardFocus, "'Node A' BreadcrumbBarItem should have focus");
 
                 KeyboardHelper.PressKey(Key.Up);
 
-                dropDownItem = GetDropDownItemByName("EllipsisItem1");
-                Verify.IsTrue(dropDownItem.HasKeyboardFocus, "EllipsisItem1 BreadcrumbBarItem should have focus");
+                dropDownItem = GetDropDownItemByName("Node A_2");
+                Verify.IsTrue(dropDownItem.HasKeyboardFocus, "'Node A_2' BreadcrumbBarItem should have focus");
             }
         }
 
@@ -448,13 +476,14 @@ public void KeyboardNavigationDropDownItemInvokationTest()
                 Thread.Sleep(1000);
 
                 // Here we should verify that the first element in the flyout has focus and we can move up/down
-                var dropDownItem = GetDropDownItemByName("EllipsisItem1");
-                Verify.IsTrue(dropDownItem.HasKeyboardFocus, "EllipsisItem1 BreadcrumbBarItem should have focus");
+                // The flyout items should contain: "Node A_2", "Node A" and "Root"
+                var dropDownItem = GetDropDownItemByName("Node A_2");
+                Verify.IsTrue(dropDownItem.HasKeyboardFocus, "'Node A_2' BreadcrumbBarItem should have focus");
 
                 KeyboardHelper.PressKey(Key.Down);
 
-                dropDownItem = GetDropDownItemByName("EllipsisItem2");
-                Verify.IsTrue(dropDownItem.HasKeyboardFocus, "EllipsisItem2 BreadcrumbBarItem should have focus");
+                dropDownItem = GetDropDownItemByName("Node A");
+                Verify.IsTrue(dropDownItem.HasKeyboardFocus, "'Node A' BreadcrumbBarItem should have focus");
 
                 KeyboardHelper.PressKey(Key.Enter);
 
@@ -484,7 +513,7 @@ public void VerifyMulticlickCrash()
 
                 InvokeEllipsisItem(breadcrumb);
 
-                var ellipsisItemNodeA = VerifyDropDownItemContainsText("EllipsisItem2", "Root");
+                var ellipsisItemNodeA = VerifyDropDownItemContainsText("Root");
                 ellipsisItemNodeA.Invoke();
                 Thread.Sleep(500);
 
@@ -511,7 +540,7 @@ public void VerifyFlyoutRecycleCrash()
 
                 InvokeEllipsisItem(breadcrumb);
 
-                var ellipsisItemNodeA_2_3 = VerifyDropDownItemContainsText("EllipsisItem1", "Node A_2_3");
+                var ellipsisItemNodeA_2_3 = GetDropDownItemByName("Node A_2_3");
                 ellipsisItemNodeA_2_3.Invoke();
                 Thread.Sleep(500);
 
@@ -725,7 +754,7 @@ private UIObject RetrieveRTLCheckBox(bool mustClickCheckBox = false)
             return rtlCheckbox;
         }
 
-        private void VerifyBreadcrumbBarItemsContain(UICollection<UIObject> breadcrumbItems, string[] expectedItemValues)
+        private void VerifyBreadcrumbBarItemsContain(UICollection<UIObject> breadcrumbItems, string[] expectedItemValues, bool firstItemIsCurrentItem = false)
         {
             // WARNING: this method clicks on each breadcrumb so once the verification has finished, 
             // only the ellipsis item and 'Root' should exist
@@ -735,8 +764,10 @@ private void VerifyBreadcrumbBarItemsContain(UICollection<UIObject> breadcrumbIt
             Verify.IsTrue(breadcrumbItems.Count > expectedItemValues.Length, 
                 "The expected values count should at least be one less than the BreadcrumbBarItems count");
 
+            bool mustVerifyItemAsLastItem = firstItemIsCurrentItem;
+
             // To verify the existence of the expected nodes we click on each of them and verify agains the strings
-            // in LastClickedItemIndex and LastClickedItem textboxes. 
+            // in LastClickedItemIndex and LastClickedItem textboxes.
             for (int i = expectedItemValues.Length - 1; i >= 0; --i)
             {
                 var currentItem = breadcrumbItems[i + 1];
@@ -747,16 +778,24 @@ private void VerifyBreadcrumbBarItemsContain(UICollection<UIObject> breadcrumbIt
 
                 currentBreadcrumbBarItem.Click();
 
-                VerifyLastClickedItemIndexIs(i);
-                VerifyLastClickedItemIs(expectedItemValues[i]);
+                if (mustVerifyItemAsLastItem)
+                {
+                    Verify.AreEqual(expectedItemValues[i], GetCurrentItemText(currentBreadcrumbBarItem));
+                    mustVerifyItemAsLastItem = false;
+                }
+                else
+                {
+                    VerifyLastClickedItemIndexIs(i);
+                    VerifyLastClickedItemIs(expectedItemValues[i]);
+                }
             }
         }
 
-        private Button VerifyDropDownItemContainsText(string dropDownItemName, string expectedText)
+        private Button VerifyDropDownItemContainsText(string expectedText)
         {
             Log.Comment("Retrieve the ellipsis item: " + expectedText);
-            var dropDownItem = GetDropDownItemByName(dropDownItemName);
 
+            var dropDownItem = GetDropDownItemByName(expectedText);
             VerifyDropDownItemContainsText(dropDownItem, expectedText);
 
             return dropDownItem;
@@ -764,9 +803,18 @@ private Button VerifyDropDownItemContainsText(string dropDownItemName, string ex
 
         private Button GetDropDownItemByName(string dropDownItemName)
         {
-            var dropDownItem = FindElement.ByName<Button>(dropDownItemName);
-            Verify.IsNotNull(dropDownItem, dropDownItemName + " not found");
-            return dropDownItem;
+            var ellipsisFlyout = FindElement.ByName("EllipsisFlyout");
+            
+            foreach (var child in ellipsisFlyout.Children)
+            {
+                if (child.Name == dropDownItemName)
+                {
+                    return ConvertTo<Button>(child);
+                }
+            }
+
+            Verify.Fail(dropDownItemName + " not found");
+            return null;
         }
 
         private void VerifyDropDownItemContainsText(Button dropDownItem, string expectedEllipsisItemText)
@@ -803,5 +851,10 @@ private int GetLastClickedItemIndex()
             var lastItemTextBlock = FindElement.ByName<TextBlock>("LastClickedItemIndex");
             return Int32.Parse(lastItemTextBlock.DocumentText);
         }
+
+        private string GetCurrentItemText(BreadcrumbBarItem currentItem)
+        {
+            return currentItem.Children[0].GetText();
+        }
     }
 }
diff --git a/dev/Breadcrumb/Strings/en-us/Resources.resw b/dev/Breadcrumb/Strings/en-us/Resources.resw
index 82c0ae2ea6..7dee4b0304 100644
--- a/dev/Breadcrumb/Strings/en-us/Resources.resw
+++ b/dev/Breadcrumb/Strings/en-us/Resources.resw
@@ -121,4 +121,8 @@
     <value>More</value>
     <comment>The automation name for the BreadcrumbBar ellipsis button.</comment>
   </data>
+  <data name="BreadcrumbBarItemLocalizedControlType" xml:space="preserve">
+    <value>breadcrumb bar item</value>
+    <comment>A simple description of the control for UIA</comment>
+  </data>
 </root>
\ No newline at end of file
diff --git a/dev/ResourceHelper/ResourceAccessor.h b/dev/ResourceHelper/ResourceAccessor.h
index edd251cd43..e51d0e5d22 100755
--- a/dev/ResourceHelper/ResourceAccessor.h
+++ b/dev/ResourceHelper/ResourceAccessor.h
@@ -131,6 +131,7 @@ class ResourceAccessor sealed
 #define SR_ProgressBarPausedStatus L"ProgressBarPausedStatus"
 #define SR_ProgressBarErrorStatus L"ProgressBarErrorStatus"
 #define SR_RatingLocalizedControlType L"RatingLocalizedControlType"
+#define SR_BreadcrumbBarItemLocalizedControlType L"BreadcrumbBarItemLocalizedControlType"
 #define SR_SplitButtonSecondaryButtonName L"SplitButtonSecondaryButtonName"
 #define SR_ProofingMenuItemLabel L"ProofingMenuItemLabel"
 #define SR_TextCommandLabelCut L"TextCommandLabelCut"