[FZ Editor] Accessibility fixes (#12651)

* Added Name to unicodes and fixed labels in dialog buttons

* Fixed dialog padding

* Update MainWindow.xaml

* Update MainWindow.xaml

Co-authored-by: Niels Laute <niels9001@hotmail.com>

src/modules/fancyzones/editor/FancyZonesEditor/CanvasEditor.xaml

@@ -3,7 +3,6 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-             xmlns:local="clr-namespace:FancyZonesEditor"
              mc:Ignorable="d" 
              d:DesignHeight="300" d:DesignWidth="300">
     <Grid x:Name="Body">

src/modules/fancyzones/editor/FancyZonesEditor/CanvasEditorWindow.xaml

@@ -8,12 +8,12 @@
                     xmlns:props="clr-namespace:FancyZonesEditor.Properties"
                     mc:Ignorable="d"
                     Title=""
-                    Width="320"
+                    MinWidth="360"
                     BorderThickness="0"
                     xmlns:ui="http://schemas.modernwpf.com/2019"
                     ui:WindowHelper.UseModernWindowStyle="True"
                     ui:TitleBar.IsIconVisible="False"
-                    SizeToContent="Height"
+                    SizeToContent="Width"
                     Background="{DynamicResource PrimaryBackgroundBrush}"
                     ResizeMode="NoResize"
                     WindowStartupLocation="CenterOwner"

src/modules/fancyzones/editor/FancyZonesEditor/GridEditorWindow.xaml

@@ -8,12 +8,12 @@
                     xmlns:props="clr-namespace:FancyZonesEditor.Properties"
                     mc:Ignorable="d"
                     Title=""
-                    Width="320"
+                    MinWidth="360"
                     BorderThickness="0"
                     xmlns:ui="http://schemas.modernwpf.com/2019"
                     ui:WindowHelper.UseModernWindowStyle="True"
                     ui:TitleBar.IsIconVisible="False"
-                    SizeToContent="Height"
+                    SizeToContent="Width"
                     Background="{DynamicResource PrimaryBackgroundBrush}"
                     ResizeMode="NoResize"
                     WindowStartupLocation="CenterOwner"

src/modules/fancyzones/editor/FancyZonesEditor/MainWindow.xaml

@@ -25,7 +25,8 @@
         Closing="OnClosing"
         ResizeMode="CanResize">
     <Window.Resources>
-
+        <Thickness x:Key="ContentDialogPadding">24,18,0,24</Thickness>
+        <Thickness x:Key="ContentDialogCommandSpaceMargin">0,24,24,0</Thickness>
         <Converters:LayoutModelTypeToVisibilityConverter x:Key="LayoutModelTypeToVisibilityConverter" />
         <Converters:LayoutTypeCustomToVisibilityConverter x:Key="LayoutTypeCustomToVisibilityConverter" />
         <Converters:LayoutTypeTemplateToVisibilityConverter x:Key="LayoutTypeTemplateToVisibilityConverter" />
@@ -141,10 +142,7 @@
                                          VerticalAlignment="Stretch"
                                          HorizontalAlignment="Stretch" />
                 </Grid>
-                <Button Content="&#xE104;"
+                <Button x:Name="EditLayoutButton"
-                        x:Name="EditLayoutButton"
-                        FontFamily="Segoe MDL2 Assets"
-                        FontSize="14"
                         HorizontalAlignment="Right"
                         VerticalAlignment="Top"
                         Margin="4"
@@ -161,7 +159,14 @@
                         AutomationProperties.HelpText="{x:Static props:Resources.Edit}"
                         AutomationProperties.Name="{Binding Name}"
                         Style="{StaticResource AccentButtonStyle}"
-                        ui:ControlHelper.CornerRadius="36" />
+                        ui:ControlHelper.CornerRadius="36">
+                    <Button.Content>
+                        <TextBlock Text="&#xE104;" 
+                                       FontFamily="Segoe MDL2 Assets"
+                                        FontSize="14"
+                                       AutomationProperties.Name="{x:Static props:Resources.Edit}" />
+                    </Button.Content>
+                </Button>
             </Grid>
         </DataTemplate>
     </Window.Resources>
@@ -283,11 +288,12 @@
                 <StackPanel Orientation="Horizontal"
                             Margin="8">
                     <TextBlock Text="&#xE109;"
+                               AutomationProperties.Name="{x:Static props:Resources.Create_new_layout}"
                                FontFamily="Segoe MDL2 Assets"
-                               Foreground="White" />
+                               Foreground="{DynamicResource AccentButtonForeground}" />
                     <TextBlock Text="{x:Static props:Resources.Create_new_layout}"
                                Margin="12,-3,0,0"
-                               Foreground="White" />
+                               Foreground="{DynamicResource AccentButtonForeground}" />
                 </StackPanel>
                 <Button.Effect>
                     <DropShadowEffect BlurRadius="6"
@@ -338,7 +344,7 @@
                           Opened="Dialog_Opened"
                           Closed="Dialog_Closed">
             <Grid DataContext="{Binding SelectedModel}"
-                  MinWidth="320" Margin="4,4,4,32">
+                  MinWidth="320" Margin="4,4,24,32">
 
                 <StackPanel Margin="0,-37,0,0"
                             HorizontalAlignment="Right"
@@ -348,32 +354,43 @@
                             x:Name="duplicateLayoutButton"
                             AutomationProperties.Name="{x:Static props:Resources.Duplicate}"
                             ToolTip="{x:Static props:Resources.Duplicate}"
-                            Content="&#xE8C8;"
-                            FontFamily="Segoe MDL2 Assets"
                             Style="{StaticResource IconOnlyButtonStyle}"
-                            Visibility="{Binding Path=Type, Converter={StaticResource LayoutTypeCustomToVisibilityConverter}}" />
 
+                            Visibility="{Binding Path=Type, Converter={StaticResource LayoutTypeCustomToVisibilityConverter}}">
+                        <Button.Content>
+                            <TextBlock Text="&#xE8C8;" 
+                                       FontFamily="Segoe MDL2 Assets"
+                                       AutomationProperties.Name="{x:Static props:Resources.Duplicate}" />
+                        </Button.Content>
+                    </Button>
                     <!--Used by narrator for announcements-->
                     <TextBlock x:Name="LayoutCreationAnnounce" />
-                    
                     <Button Click="DuplicateLayout_Click"
                             x:Name="createFromTemplateLayoutButton"
                             AutomationProperties.Name="{x:Static props:Resources.Create_Custom_From_Template}"
                             ToolTip="{x:Static props:Resources.Create_Custom_From_Template}"
-                            Content="&#xE8C8;"
-                            FontFamily="Segoe MDL2 Assets"
                             Style="{StaticResource IconOnlyButtonStyle}"
-                            Visibility="{Binding Path=Type, Converter={StaticResource LayoutTypeTemplateToVisibilityConverter}}" />
+                            Visibility="{Binding Path=Type, Converter={StaticResource LayoutTypeTemplateToVisibilityConverter}}">
+                        <Button.Content>
+                            <TextBlock Text="&#xE8C8;" 
+                                       FontFamily="Segoe MDL2 Assets"
+                                       AutomationProperties.Name="{x:Static props:Resources.Create_Custom_From_Template}" />
+                        </Button.Content>
+                    </Button>
 
                         <Button Click="DeleteLayout_Click"
                             x:Name="deleteLayoutButton"
                             AutomationProperties.Name="{x:Static props:Resources.Delete}"
                             ToolTip="{x:Static props:Resources.Delete}"   
-                            Content="&#xE107;"
+                            Style="{StaticResource IconOnlyButtonStyle}"
+                            Visibility="{Binding Path=Type, Converter={StaticResource LayoutTypeCustomToVisibilityConverter}}">
+                        <Button.Content>
+                            <TextBlock Text="&#xE107;" 
                                        FontFamily="Segoe MDL2 Assets"
                                        Foreground="#c50500"
-                            Style="{StaticResource IconOnlyButtonStyle}"
+                                       AutomationProperties.Name="{x:Static props:Resources.Delete}" />
-                            Visibility="{Binding Path=Type, Converter={StaticResource LayoutTypeCustomToVisibilityConverter}}" />
+                        </Button.Content>
+                    </Button>
                 </StackPanel>
 
                 <StackPanel>
@@ -386,6 +403,7 @@
                                    ToolTip="{x:Static props:Resources.Name}"
                                    FontSize="16"
                                    VerticalAlignment="Bottom" Margin="0,0,0,8"
+                                   AutomationProperties.Name="{x:Static props:Resources.Name}"
                                    Text="&#xE932;" />
                         <TextBox Text="{Binding Name}"
                                  ui:ControlHelper.PlaceholderText="{x:Static props:Resources.Name}"
@@ -395,6 +413,8 @@
                                  MinWidth="286"
                                  HorizontalAlignment="Stretch"
                                  GotKeyboardFocus="TextBox_GotKeyboardFocus" />
+
+              
                     </StackPanel>
 
                     <!-- Shortcut panel -->
@@ -410,6 +430,7 @@
                                        Margin="8,4,0,0"
                                        Foreground="{DynamicResource SystemControlBackgroundAccentBrush}"
                                        Text="&#xE946;"
+                                       AutomationProperties.Name="{x:Static props:Resources.QuickKey_Description}"
                                        ToolTip="{x:Static props:Resources.QuickKey_Description}" />
                         </StackPanel>
 
@@ -420,6 +441,7 @@
                                        VerticalAlignment="Center"
                                        FontSize="16"
                                        ToolTip="{x:Static props:Resources.QuickKey_Title}"
+                                       AutomationProperties.Name="{x:Static props:Resources.QuickKey_Title}"
                                        Text="&#xEDA7;" />
 
                             <ComboBox x:Name="quickKeySelectionComboBox"
@@ -471,6 +493,7 @@
                                    VerticalAlignment="Center"
                                    FontSize="16"
                                    Margin="0,16,0,0"
+                                   AutomationProperties.Name="{x:Static props:Resources.Number_of_zones}"
                                    ToolTip="{x:Static props:Resources.Number_of_zones}"
                                    Text="&#xECA5;" />
 
@@ -496,6 +519,7 @@
                             <TextBlock FontFamily="Segoe MDL2 Assets"
                                        VerticalAlignment="Center"
                                        FontSize="16"
+                                       AutomationProperties.Name="{x:Static props:Resources.Space_Around_Zones}"
                                        ToolTip="{x:Static props:Resources.Space_Around_Zones}"
                                        Text="&#xE91B;" />
 
@@ -548,6 +572,7 @@
                                        VerticalAlignment="Center"
                                        FontSize="16"
                                        ToolTip="{x:Static props:Resources.Distance_adjacent_zones}"
+                                        AutomationProperties.Name="{x:Static props:Resources.Distance_adjacent_zones}"
                                        Text="&#xF617;" />
 
                             <ui:NumberBox Text="{Binding SensitivityRadius}"
@@ -607,6 +632,7 @@
                                        FontSize="16"
                                        Foreground="{DynamicResource SystemControlBackgroundAccentBrush}"
                                        Margin="0,4,0,0"
+                                       AutomationProperties.Name="{x:Static props:Resources.Layout_Grid_Title}"
                                        HorizontalAlignment="Left"
                                        FontFamily="Segoe MDL2 Assets" />
                             <StackPanel Grid.Column="1"
@@ -641,6 +667,7 @@
                             <TextBlock Text="&#xF5ED;"
                                        FontSize="16"
                                        Foreground="{DynamicResource SystemControlBackgroundAccentBrush}"
+                                       AutomationProperties.Name="{x:Static props:Resources.Layout_Canvas_Title}"
                                        Margin="0,4,0,0"
                                        HorizontalAlignment="Left"
                                        FontFamily="Segoe MDL2 Assets" />

src/modules/fancyzones/editor/FancyZonesEditor/Styles/ButtonStyles.xaml

@@ -1,8 +1,6 @@
 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-                    xmlns:ui="http://schemas.modernwpf.com/2019"
+                    xmlns:ui="http://schemas.modernwpf.com/2019">
-                    xmlns:primitives="clr-namespace:ModernWpf.Controls.Primitives"
-                    xmlns:local="clr-namespace:FancyZonesEditor.Styles">
     
     <Style x:Key="LayoutTypeRadioButtonStyle" TargetType="RadioButton">
         <Setter Property="OverridesDefaultStyle" Value="True" />
@@ -155,4 +153,5 @@
             </Setter.Value>
         </Setter>
     </Style>
+
 </ResourceDictionary>