[FZEditor][Accessibility] Replace NumberBox with Slider (#21382)

* replaced number boxes

* rename resource

* correct announcement

* Remove NumberBox again

src/modules/fancyzones/editor/FancyZonesEditor/Controls/CustomSliderAutomationPeer.cs

@@ -10,14 +10,18 @@ namespace FancyZonesEditor.Controls
 
     internal class CustomSliderAutomationPeer : SliderAutomationPeer
     {
+        private string name = string.Empty;
+
         public CustomSliderAutomationPeer(Slider owner)
             : base(owner)
         {
+            name = GetHelpText();
         }
 
         protected override string GetNameCore()
         {
             var element = this.Owner as Slider;
+
             if (element == null)
             {
                 return string.Empty;
@@ -25,7 +29,8 @@ namespace FancyZonesEditor.Controls
 
             string announce = string.Format(
                 CultureInfo.CurrentCulture,
-                Properties.Resources.Distance_adjacent_zones_slider_announce,
+                Properties.Resources.Custom_slider_announce,
+                name,
                 element.Minimum,
                 element.Maximum,
                 element.Value);

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

@@ -527,16 +527,42 @@
                                    ToolTip="{x:Static props:Resources.Number_of_zones}"
                                    Text="" />
 
-                        <ui:NumberBox Minimum="1"
+                        <StackPanel Orientation="Vertical">
-                                      Maximum="128"
+                            <TextBlock Text="{x:Static props:Resources.Number_of_zones}"
-                                      Width="216"
+                                   x:Name="templateZoneCountTitle"
-                                      KeyDown="EditDialogNumberBox_KeyDown"
+                                   Margin="12,0,0,4"
-                                      Margin="12,0,0,0"
+                                   TextWrapping="Wrap" />
-                                      Header="{x:Static props:Resources.Number_of_zones}"
+
-                                      Loaded="NumberBox_Loaded"
+                            <StackPanel Orientation="Horizontal">
-                                      AutomationProperties.Name="{x:Static props:Resources.Number_of_zones}"
+                                <fancyZonesControls:CustomSlider x:Name="TemplateZoneCount"
-                                      SpinButtonPlacementMode="Compact"
+                                    Value="{Binding TemplateZoneCount}"
-                                      Text="{Binding TemplateZoneCount}" />
+                                    Minimum="{Binding TemplateZoneCountMinimum}"
+                                    Maximum="{Binding TemplateZoneCountMaximum}"
+                                    IsMoveToPointEnabled="True"
+                                    AutomationProperties.HelpText="{x:Static props:Resources.Number_of_zones}"
+                                    ToolTip="{Binding TemplateZoneCount}"
+                                    ValueChanged="TemplateZoneCount_ValueChanged"
+                                    MinWidth="216"
+                                    Margin="12,0,0,0"
+                                    HorizontalAlignment="Left"
+                                    SmallChange="1" 
+                                    LargeChange="10"/>
+
+                                <TextBlock Text="{Binding TemplateZoneCount}"
+                                    Margin="6,0,0,0"
+                                    FontSize="12"
+                                    Foreground="{DynamicResource SecondaryForegroundBrush}"
+                                    TextWrapping="Wrap"
+                                    VerticalAlignment="Center" />
+
+                                <TextBlock Text="{x:Static props:Resources.Zones}"
+                                       Margin="6,0,0,0"
+                                       FontSize="12"
+                                       Foreground="{DynamicResource SecondaryForegroundBrush}"
+                                       TextWrapping="Wrap"
+                                       VerticalAlignment="Center" />
+                            </StackPanel>
+                        </StackPanel>
                     </StackPanel>
 
                     <StackPanel Margin="0, 12, 0, 0"
@@ -553,25 +579,36 @@
                                        ToolTip="{x:Static props:Resources.Space_Around_Zones}"
                                        Text="&#xE91B;" />
 
-                            <ui:NumberBox Margin="12,0,0,0"
+                            <StackPanel Orientation="Horizontal">
-                                          IsEnabled="{Binding ShowSpacing}"
+                                <fancyZonesControls:CustomSlider x:Name="Spacing"
-                                          Text="{Binding Spacing}"
+                                    Value="{Binding Spacing}"
-                                          Width="216"
+                                    Minimum="{Binding SpacingMinimum}"
-                                          Minimum="-20"
+                                    Maximum="{Binding SpacingMaximum}"
-                                          Maximum="1000"
+                                    IsMoveToPointEnabled="True"
-                                          KeyDown="EditDialogNumberBox_KeyDown"
+                                    AutomationProperties.HelpText="{x:Static props:Resources.Space_Around_Zones}"
-                                          SpinButtonPlacementMode="Compact"
+                                    ToolTip="{Binding Spacing}"
-                                          HorizontalAlignment="Left"
+                                    ValueChanged="Spacing_ValueChanged"
-                                          VerticalAlignment="Center"
+                                    IsEnabled="{Binding ShowSpacing}"
-                                          Loaded="NumberBox_Loaded"
+                                    MinWidth="216"
-                                          AutomationProperties.Name="{x:Static props:Resources.Space_Around_Zones}"
+                                    Margin="12,0,0,0"
-                                          AutomationProperties.LabeledBy="{Binding ElementName=spacingTitle}" />
+                                    HorizontalAlignment="Left"
-                            <TextBlock Text="{x:Static props:Resources.Pixels}"
+                                    SmallChange="1" 
-                                       Margin="6,-4,0,0"
+                                    LargeChange="10"/>
+
+                                <TextBlock Text="{Binding Spacing}"
+                                    Margin="6,0,0,0"
+                                    FontSize="12"
+                                    Foreground="{DynamicResource SecondaryForegroundBrush}"
+                                    TextWrapping="Wrap"
+                                    VerticalAlignment="Center"/>
+
+                                <TextBlock Text="{x:Static props:Resources.Pixels}"
+                                       Margin="6,0,0,0"
                                        FontSize="12"
                                        Foreground="{DynamicResource SecondaryForegroundBrush}"
                                        TextWrapping="Wrap"
                                        VerticalAlignment="Center" />
+                            </StackPanel>
 
                             <ui:ToggleSwitch x:Name="spaceAroundSetting"
                                              IsOn="{Binding ShowSpacing}"
@@ -606,8 +643,7 @@
                                 Minimum="{Binding SensitivityRadiusMinimum}"
                                 Maximum="{Binding SensitivityRadiusMaximum}"
                                 IsMoveToPointEnabled="True"
-                                AutomationProperties.Name="{x:Static props:Resources.Distance_adjacent_zones}"
+                                AutomationProperties.HelpText="{x:Static props:Resources.Distance_adjacent_zones}"
-                                AutomationProperties.HelpText="{Binding SensitivityRadius}"
                                 ToolTip="{Binding SensitivityRadius}"
                                 ValueChanged="SensitivityInput_ValueChanged"
                                 MinWidth="216"
@@ -619,13 +655,14 @@
 
                                 <TextBlock
                                     Text="{Binding SensitivityRadius}"
-                                    Margin="6,8,0,0"
+                                    Margin="6,0,0,0"
                                     FontSize="12"
                                     Foreground="{DynamicResource SecondaryForegroundBrush}"
-                                    TextWrapping="Wrap" />
+                                    TextWrapping="Wrap"
+                                    VerticalAlignment="Center"/>
 
                                 <TextBlock Text="{x:Static props:Resources.Pixels}"
-                                       Margin="6,-4,0,0"
+                                       Margin="6,0,0,0"
                                        FontSize="12"
                                        Foreground="{DynamicResource SecondaryForegroundBrush}"
                                        TextWrapping="Wrap"
@@ -633,33 +670,6 @@
                         </StackPanel>
                     </StackPanel>
 
-                    <StackPanel Orientation="Horizontal"
-                                HorizontalAlignment="Left"
-                                Margin="0,16,0,0"
-                                Visibility="{Binding Path=Type, Converter={StaticResource LayoutTypeTemplateToVisibilityConverter}}">
-
-                        <TextBlock FontFamily="Segoe MDL2 Assets"
-                                   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;" />
-
-                        <ui:NumberBox Minimum="1"
-                                      Maximum="128"
-                                      Width="216"
-                                      KeyDown="EditDialogNumberBox_KeyDown"
-                                      Margin="12,0,0,0"
-                                      Header="{x:Static props:Resources.Number_of_zones}"
-                                      Loaded="NumberBox_Loaded"
-                                      AutomationProperties.Name="{x:Static props:Resources.Number_of_zones}"
-                                      SpinButtonPlacementMode="Compact"
-                                      Text="{Binding TemplateZoneCount}" />
-                    </StackPanel>
-
-
-
                     <StackPanel Orientation="Vertical"
                                 HorizontalAlignment="Left"
                                 Margin="0,16,0,0">

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

@@ -587,7 +587,49 @@ namespace FancyZonesEditor
                     FrameworkElementAutomationPeer.FromElement(SensitivityInput) as SliderAutomationPeer;
                 string activityId = "sliderValueChanged";
 
-                string value = string.Format(CultureInfo.CurrentCulture, Properties.Resources.Slider_Value, SensitivityInput.Value);
+                string value = string.Format(CultureInfo.CurrentCulture, Properties.Resources.Pixel_Value, SensitivityInput.Value);
+
+                if (peer != null && value != null)
+                {
+                    peer.RaiseNotificationEvent(
+                        AutomationNotificationKind.ActionCompleted,
+                        AutomationNotificationProcessing.ImportantMostRecent,
+                        value,
+                        activityId);
+                }
+            }
+        }
+
+        private void TemplateZoneCount_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
+        {
+            if (AutomationPeer.ListenerExists(AutomationEvents.PropertyChanged))
+            {
+                SliderAutomationPeer peer =
+                    FrameworkElementAutomationPeer.FromElement(TemplateZoneCount) as SliderAutomationPeer;
+                string activityId = "templateZoneCountValueChanged";
+
+                string value = string.Format(CultureInfo.CurrentCulture, Properties.Resources.Template_Zone_Count_Value, TemplateZoneCount.Value);
+
+                if (peer != null && value != null)
+                {
+                    peer.RaiseNotificationEvent(
+                        AutomationNotificationKind.ActionCompleted,
+                        AutomationNotificationProcessing.ImportantMostRecent,
+                        value,
+                        activityId);
+                }
+            }
+        }
+
+        private void Spacing_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
+        {
+            if (AutomationPeer.ListenerExists(AutomationEvents.PropertyChanged))
+            {
+                SliderAutomationPeer peer =
+                    FrameworkElementAutomationPeer.FromElement(Spacing) as SliderAutomationPeer;
+                string activityId = "spacingValueChanged";
+
+                string value = string.Format(CultureInfo.CurrentCulture, Properties.Resources.Pixel_Value, Spacing.Value);
 
                 if (peer != null && value != null)
                 {

src/modules/fancyzones/editor/FancyZonesEditor/Models/GridLayoutModel.cs

@@ -119,6 +119,16 @@ namespace FancyZonesEditor.Models
             }
         }
 
+        public int SpacingMinimum
+        {
+            get { return -10; }
+        }
+
+        public int SpacingMaximum
+        {
+            get { return 1000; }
+        }
+
         private int _spacing = LayoutSettings.DefaultSpacing;
 
         public GridLayoutModel()

src/modules/fancyzones/editor/FancyZonesEditor/Models/LayoutModel.cs

@@ -288,6 +288,22 @@ namespace FancyZonesEditor.Models
             }
         }
 
+        public int TemplateZoneCountMinimum
+        {
+            get
+            {
+                return 1;
+            }
+        }
+
+        public int TemplateZoneCountMaximum
+        {
+            get
+            {
+                return 128;
+            }
+        }
+
         private int _zoneCount = LayoutSettings.DefaultZoneCount;
 
         public bool IsZoneAddingAllowed

src/modules/fancyzones/editor/FancyZonesEditor/Properties/Resources.Designer.cs

@@ -213,6 +213,15 @@ namespace FancyZonesEditor.Properties {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to {0} slider. Possible range is from {1} to {2}. Value is {3}..
+        /// </summary>
+        public static string Custom_slider_announce {
+            get {
+                return ResourceManager.GetString("Custom_slider_announce", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to Custom layout.
         /// </summary>
@@ -316,15 +325,6 @@ namespace FancyZonesEditor.Properties {
             }
         }
         
-        /// <summary>
-        ///   Looks up a localized string similar to Highlight distance slider. Possible range is from {0} to {1}. Value is {2}..
-        /// </summary>
-        public static string Distance_adjacent_zones_slider_announce {
-            get {
-                return ResourceManager.GetString("Distance_adjacent_zones_slider_announce", resourceCulture);
-            }
-        }
-        
         /// <summary>
         ///   Looks up a localized string similar to Duplicate.
         /// </summary>
@@ -717,6 +717,15 @@ namespace FancyZonesEditor.Properties {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to {0} pixels.
+        /// </summary>
+        public static string Pixel_Value {
+            get {
+                return ResourceManager.GetString("Pixel_Value", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to px.
         /// </summary>
@@ -825,15 +834,6 @@ namespace FancyZonesEditor.Properties {
             }
         }
         
-        /// <summary>
-        ///   Looks up a localized string similar to {0} pixels.
-        /// </summary>
-        public static string Slider_Value {
-            get {
-                return ResourceManager.GetString("Slider_Value", resourceCulture);
-            }
-        }
-        
         /// <summary>
         ///   Looks up a localized string similar to Space around zones.
         /// </summary>
@@ -915,6 +915,15 @@ namespace FancyZonesEditor.Properties {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to {0} zones.
+        /// </summary>
+        public static string Template_Zone_Count_Value {
+            get {
+                return ResourceManager.GetString("Template_Zone_Count_Value", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to Templates.
         /// </summary>
@@ -941,5 +950,14 @@ namespace FancyZonesEditor.Properties {
                 return ResourceManager.GetString("Zone_Count_Increment", resourceCulture);
             }
         }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to zones.
+        /// </summary>
+        public static string Zones {
+            get {
+                return ResourceManager.GetString("Zones", resourceCulture);
+            }
+        }
     }
 }

src/modules/fancyzones/editor/FancyZonesEditor/Properties/Resources.resx

@@ -408,12 +408,18 @@
   <data name="Error_Parsing_Custom_Layouts_Message" xml:space="preserve">
     <value>An error occurred while parsing custom layouts.</value>
   </data>
-  <data name="Distance_adjacent_zones_slider_announce" xml:space="preserve">
+  <data name="Custom_slider_announce" xml:space="preserve">
-    <value>Highlight distance slider. Possible range is from {0} to {1}. Value is {2}.</value>
+    <value>{0} slider. Possible range is from {1} to {2}. Value is {3}.</value>
   </data>
-  <data name="Slider_Value" xml:space="preserve">
+  <data name="Pixel_Value" xml:space="preserve">
     <value>{0} pixels</value>
   </data>
+  <data name="Template_Zone_Count_Value" xml:space="preserve">
+    <value>{0} zones</value>
+  </data>
+  <data name="Zones" xml:space="preserve">
+    <value>zones</value>
+  </data>
   <data name="Default_Layout_Horizontal" xml:space="preserve">
     <value>Default layout for horizontal monitor orientation</value>
   </data>