Skip to content

Commit 559ebef

Browse files
committed
Fixed a11y issue
1 parent 61416a4 commit 559ebef

File tree

1 file changed

+105
-109
lines changed

1 file changed

+105
-109
lines changed

src/Files.App.Controls/BreadcrumbBar/BreadcrumbBar.xaml

Lines changed: 105 additions & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -115,119 +115,115 @@
115115
x:Name="PART_LayoutRoot"
116116
TabFocusNavigation="Once"
117117
XYFocusKeyboardNavigation="Enabled">
118-
<Grid.ColumnDefinitions>
119-
<ColumnDefinition x:Name="PART_ContentColumn" Width="Auto" />
120-
<ColumnDefinition x:Name="PART_ChevronColumn" Width="Auto" />
121-
</Grid.ColumnDefinitions>
122-
123-
<!-- Clickable Area -->
124-
<Button
125-
x:Name="PART_ItemContentButton"
126-
Padding="{TemplateBinding Padding}"
127-
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
128-
AutomationProperties.AccessibilityView="Raw"
129-
AutomationProperties.Name="{TemplateBinding Content}"
130-
Background="{TemplateBinding Background}"
131-
BorderBrush="{TemplateBinding BorderBrush}"
132-
BorderThickness="{TemplateBinding BorderThickness}"
133-
Control.IsTemplateFocusTarget="True"
134-
CornerRadius="{TemplateBinding CornerRadius}"
135-
UseSystemFocusVisuals="True">
136-
<Button.Resources>
137-
<SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="{ThemeResource SubtleFillColorSecondary}" />
138-
<SolidColorBrush x:Key="ButtonBackgroundPressed" Color="{ThemeResource SubtleFillColorTertiary}" />
139-
</Button.Resources>
140-
141-
<FlyoutBase.AttachedFlyout>
142-
<MenuFlyout
143-
x:Name="PART_ItemEllipsisDropDownMenuFlyout"
144-
Placement="Bottom"
145-
ScrollViewer.VerticalScrollBarVisibility="Auto"
146-
ScrollViewer.VerticalScrollMode="Auto">
147-
<MenuFlyout.MenuFlyoutPresenterStyle>
148-
<Style TargetType="MenuFlyoutPresenter">
149-
<Setter Property="MaxHeight" Value="400" />
150-
<!-- Workaround for https://github.com/files-community/Files/issues/13078 -->
151-
<Setter Target="HighContrastAdjustment" Value="None" />
152-
</Style>
153-
</MenuFlyout.MenuFlyoutPresenterStyle>
154-
</MenuFlyout>
155-
</FlyoutBase.AttachedFlyout>
156-
157-
<ContentPresenter
158-
x:Name="PART_ItemContentPresenter"
159-
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
118+
<StackPanel AutomationProperties.Name="{TemplateBinding ItemToolTip}" Orientation="Horizontal">
119+
<!-- Clickable Area -->
120+
<Button
121+
x:Name="PART_ItemContentButton"
122+
Padding="{TemplateBinding Padding}"
160123
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
161124
AutomationProperties.AccessibilityView="Raw"
162-
Content="{TemplateBinding Content}"
163-
ContentTemplate="{TemplateBinding ContentTemplate}"
164-
ContentTransitions="{TemplateBinding ContentTransitions}"
165-
FontFamily="{TemplateBinding FontFamily}"
166-
FontSize="{TemplateBinding FontSize}"
167-
FontWeight="{TemplateBinding FontWeight}"
168-
Foreground="{ThemeResource BreadcrumbBarForegroundBrush}"
169-
TextLineBounds="Tight" />
170-
171-
</Button>
172-
173-
<!-- Chevron -->
174-
<Button
175-
x:Name="PART_ItemChevronButton"
176-
Grid.Column="1"
177-
Margin="{StaticResource BreadcrumbBarItemMargin}"
178-
Padding="{StaticResource BreadcrumbBarChevronPadding}"
179-
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
180-
AutomationProperties.AccessibilityView="Raw"
181-
AutomationProperties.Name="Chevron"
182-
Background="{TemplateBinding Background}"
183-
BorderBrush="{TemplateBinding BorderBrush}"
184-
BorderThickness="{TemplateBinding BorderThickness}"
185-
CornerRadius="{StaticResource BreadcrumbBarChevronCornerRaduis}"
186-
Style="{StaticResource BreadcrumbBarItemChevronButtonStyle}"
187-
ToolTipService.ToolTip="{TemplateBinding ChevronToolTip}"
188-
UseSystemFocusVisuals="True">
189-
<Button.Resources>
190-
<SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="{ThemeResource SubtleFillColorSecondary}" />
191-
<SolidColorBrush x:Key="ButtonBackgroundPressed" Color="{ThemeResource SubtleFillColorTertiary}" />
192-
</Button.Resources>
193-
194-
<FlyoutBase.AttachedFlyout>
195-
<MenuFlyout
196-
x:Name="PART_ItemChevronDropDownMenuFlyout"
197-
Placement="BottomEdgeAlignedLeft"
198-
ScrollViewer.VerticalScrollBarVisibility="Auto"
199-
ScrollViewer.VerticalScrollMode="Auto">
200-
<MenuFlyout.MenuFlyoutPresenterStyle>
201-
<Style TargetType="MenuFlyoutPresenter">
202-
<Setter Property="MaxHeight" Value="400" />
203-
<!-- Workaround for https://github.com/files-community/Files/issues/13078 -->
204-
<Setter Target="HighContrastAdjustment" Value="None" />
205-
</Style>
206-
</MenuFlyout.MenuFlyoutPresenterStyle>
207-
</MenuFlyout>
208-
</FlyoutBase.AttachedFlyout>
209-
210-
<AnimatedIcon
211-
x:Name="PART_ItemChevronIcon"
212-
Width="{StaticResource BreadcrumbBarChevronFontSize}"
213-
Height="{StaticResource BreadcrumbBarChevronFontSize}"
214-
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
125+
AutomationProperties.Name="{TemplateBinding Content}"
126+
Background="{TemplateBinding Background}"
127+
BorderBrush="{TemplateBinding BorderBrush}"
128+
BorderThickness="{TemplateBinding BorderThickness}"
129+
Control.IsTemplateFocusTarget="True"
130+
CornerRadius="{TemplateBinding CornerRadius}"
131+
UseSystemFocusVisuals="True">
132+
<Button.Resources>
133+
<SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="{ThemeResource SubtleFillColorSecondary}" />
134+
<SolidColorBrush x:Key="ButtonBackgroundPressed" Color="{ThemeResource SubtleFillColorTertiary}" />
135+
</Button.Resources>
136+
137+
<FlyoutBase.AttachedFlyout>
138+
<MenuFlyout
139+
x:Name="PART_ItemEllipsisDropDownMenuFlyout"
140+
Placement="Bottom"
141+
ScrollViewer.VerticalScrollBarVisibility="Auto"
142+
ScrollViewer.VerticalScrollMode="Auto">
143+
<MenuFlyout.MenuFlyoutPresenterStyle>
144+
<Style TargetType="MenuFlyoutPresenter">
145+
<Setter Property="MaxHeight" Value="400" />
146+
<!-- Workaround for https://github.com/files-community/Files/issues/13078 -->
147+
<Setter Target="HighContrastAdjustment" Value="None" />
148+
</Style>
149+
</MenuFlyout.MenuFlyoutPresenterStyle>
150+
</MenuFlyout>
151+
</FlyoutBase.AttachedFlyout>
152+
153+
<ContentPresenter
154+
x:Name="PART_ItemContentPresenter"
155+
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
156+
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
157+
AutomationProperties.AccessibilityView="Raw"
158+
Content="{TemplateBinding Content}"
159+
ContentTemplate="{TemplateBinding ContentTemplate}"
160+
ContentTransitions="{TemplateBinding ContentTransitions}"
161+
FontFamily="{TemplateBinding FontFamily}"
162+
FontSize="{TemplateBinding FontSize}"
163+
FontWeight="{TemplateBinding FontWeight}"
164+
Foreground="{ThemeResource BreadcrumbBarForegroundBrush}"
165+
TextLineBounds="Tight" />
166+
167+
</Button>
168+
169+
<!-- Chevron -->
170+
<Button
171+
x:Name="PART_ItemChevronButton"
172+
Margin="{StaticResource BreadcrumbBarItemMargin}"
173+
Padding="{StaticResource BreadcrumbBarChevronPadding}"
215174
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
216-
AnimatedIcon.State="NormalOff"
217175
AutomationProperties.AccessibilityView="Raw"
218-
Foreground="{ThemeResource BreadcrumbBarForegroundBrush}"
219-
MirroredWhenRightToLeft="True"
220-
RenderTransformOrigin="0.5, 0.5">
221-
<AnimatedIcon.FallbackIconSource>
222-
<FontIconSource
223-
FontSize="{StaticResource BreadcrumbBarChevronFontSize}"
224-
Glyph="&#xE76C;"
225-
IsTextScaleFactorEnabled="False" />
226-
</AnimatedIcon.FallbackIconSource>
227-
<animatedvisuals:AnimatedChevronRightDownSmallVisualSource />
228-
</AnimatedIcon>
229-
230-
</Button>
176+
AutomationProperties.Name="Chevron"
177+
Background="{TemplateBinding Background}"
178+
BorderBrush="{TemplateBinding BorderBrush}"
179+
BorderThickness="{TemplateBinding BorderThickness}"
180+
CornerRadius="{StaticResource BreadcrumbBarChevronCornerRaduis}"
181+
Style="{StaticResource BreadcrumbBarItemChevronButtonStyle}"
182+
ToolTipService.ToolTip="{TemplateBinding ChevronToolTip}"
183+
UseSystemFocusVisuals="True">
184+
<Button.Resources>
185+
<SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="{ThemeResource SubtleFillColorSecondary}" />
186+
<SolidColorBrush x:Key="ButtonBackgroundPressed" Color="{ThemeResource SubtleFillColorTertiary}" />
187+
</Button.Resources>
188+
189+
<FlyoutBase.AttachedFlyout>
190+
<MenuFlyout
191+
x:Name="PART_ItemChevronDropDownMenuFlyout"
192+
Placement="BottomEdgeAlignedLeft"
193+
ScrollViewer.VerticalScrollBarVisibility="Auto"
194+
ScrollViewer.VerticalScrollMode="Auto">
195+
<MenuFlyout.MenuFlyoutPresenterStyle>
196+
<Style TargetType="MenuFlyoutPresenter">
197+
<Setter Property="MaxHeight" Value="400" />
198+
<!-- Workaround for https://github.com/files-community/Files/issues/13078 -->
199+
<Setter Target="HighContrastAdjustment" Value="None" />
200+
</Style>
201+
</MenuFlyout.MenuFlyoutPresenterStyle>
202+
</MenuFlyout>
203+
</FlyoutBase.AttachedFlyout>
204+
205+
<AnimatedIcon
206+
x:Name="PART_ItemChevronIcon"
207+
Width="{StaticResource BreadcrumbBarChevronFontSize}"
208+
Height="{StaticResource BreadcrumbBarChevronFontSize}"
209+
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
210+
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
211+
AnimatedIcon.State="NormalOff"
212+
AutomationProperties.AccessibilityView="Raw"
213+
Foreground="{ThemeResource BreadcrumbBarForegroundBrush}"
214+
MirroredWhenRightToLeft="True"
215+
RenderTransformOrigin="0.5, 0.5">
216+
<AnimatedIcon.FallbackIconSource>
217+
<FontIconSource
218+
FontSize="{StaticResource BreadcrumbBarChevronFontSize}"
219+
Glyph="&#xE76C;"
220+
IsTextScaleFactorEnabled="False" />
221+
</AnimatedIcon.FallbackIconSource>
222+
<animatedvisuals:AnimatedChevronRightDownSmallVisualSource />
223+
</AnimatedIcon>
224+
225+
</Button>
226+
</StackPanel>
231227

232228
<VisualStateManager.VisualStateGroups>
233229

0 commit comments

Comments
 (0)