a11y: Fix Narrator accessibility for Custom Parameters sliders (#590)

* a11y: Fix Narrator accessibility for Custom Parameters sliders

* fix ToString

* update order

Author: haoliuu

AIDevGallery/Samples/Open Source Models/Language Models/CustomSystemPrompt.xaml

@@ -68,27 +68,32 @@
                         StepFrequency="1"
                         ToolTipService.ToolTip="The min length parameter sets the minimum number of tokens for the model to respond with."
                         Value="0"
-                        AutomationProperties.Name="{x:Bind GetAutomationName(MinLengthSlider.Name, MinLengthSlider.Value), Mode=OneWay}" />
+                        GotFocus="Slider_GotFocus"
+                        ValueChanged="Slider_ValueChanged" />
                 <Slider x:Name="MaxLengthSlider" Header="Max Length" Maximum="2048"
                         Minimum="1" StepFrequency="1"
                         ToolTipService.ToolTip="The max length parameter sets the maximum number of tokens for the model to respond with."
-                        Value="{x:Bind defaultMaxLength, Mode=OneTime}" 
-                        AutomationProperties.Name="{x:Bind GetAutomationName(MaxLengthSlider.Name, MaxLengthSlider.Value), Mode=OneWay}" />
+                        Value="{x:Bind defaultMaxLength, Mode=OneTime}"
+                        GotFocus="Slider_GotFocus"
+                        ValueChanged="Slider_ValueChanged" />
                 <Slider x:Name="TopPSlider" Header="Top P" Maximum="1" Minimum="0"
                         StepFrequency="0.01"
                         ToolTipService.ToolTip="The top P parameter tells the model to only consider tokens up until a cumulative probability of P. Lower this value for more predictable, focused generation and increase it for more random response."
                         Value="{x:Bind defaultTopP, Mode=OneTime}"
-                        AutomationProperties.Name="{x:Bind GetAutomationName(TopPSlider.Name, TopPSlider.Value), Mode=OneWay}" />
+                        GotFocus="Slider_GotFocus"
+                        ValueChanged="Slider_ValueChanged" />
                 <Slider x:Name="TopKSlider" Header="Top K" Maximum="200" Minimum="0"
                         StepFrequency="1"
                         ToolTipService.ToolTip="The top K parameter tells the model to only consider the K most probable tokens at each generation step. Lower this value for more predictable, focused generation and increase it for more random response."
                         Value="{x:Bind defaultTopK, Mode=OneTime}"
-                        AutomationProperties.Name="{x:Bind GetAutomationName(TopKSlider.Name, TopKSlider.Value), Mode=OneWay}" />
+                        GotFocus="Slider_GotFocus"
+                        ValueChanged="Slider_ValueChanged" />
                 <Slider x:Name="TemperatureSlider" Header="Temperature" Maximum="5"
                         Minimum="0.01" StepFrequency="0.01"
                         ToolTipService.ToolTip="The temperature parameter is a scaling factor for the probability distribution of tokens during generation. Values lower than 1 will produce more deterministic response while values higher than 1 will increase ramdomness."
                         Value="{x:Bind defaultTemperature, Mode=OneTime}"
-                        AutomationProperties.Name="{x:Bind GetAutomationName(TemperatureSlider.Name, TemperatureSlider.Value), Mode=OneWay}" />
+                        GotFocus="Slider_GotFocus"
+                        ValueChanged="Slider_ValueChanged" />
                 <ToggleSwitch x:Name="DoSampleToggle" Header="Sampling"
                         IsOn="{x:Bind defaultDoSample, Mode=OneTime}"
                         ToolTipService.ToolTip="If Sampling is disabled, a greedy approach will be used and the model will select the most likely token every time. If enabled,tokens will be selected based on the token probability distribution. The Top K, Top P, and Temperature parameters only apply if sampling is enabled." />

AIDevGallery/Samples/Open Source Models/Language Models/CustomSystemPrompt.xaml.cs

@@ -8,11 +8,13 @@
 using Microsoft.Extensions.AI;
 using Microsoft.UI.Xaml;
 using Microsoft.UI.Xaml.Controls;
+using Microsoft.UI.Xaml.Controls.Primitives;
 using Microsoft.Windows.AI.ContentSafety;
 using System;
 using System.Collections.Generic;
 using System.ComponentModel;
 using System.Diagnostics;
+using System.Globalization;
 using System.Threading;
 using System.Threading.Tasks;
 
@@ -30,8 +32,8 @@ namespace AIDevGallery.Samples.OpenSourceModels.LanguageModels;
 internal sealed partial class CustomSystemPrompt : BaseSamplePage, INotifyPropertyChanged
 {
     private readonly int defaultTopK = 50;
-    private readonly float defaultTopP = 0.9f;
-    private readonly float defaultTemperature = 1;
+    private readonly double defaultTopP = 0.9;
+    private readonly double defaultTemperature = 1.0;
     private readonly int defaultMaxLength = 1024;
     private readonly bool defaultDoSample = true;
     private readonly SeverityLevel defaultSeverityLevel = SeverityLevel.Minimum;
@@ -136,7 +138,28 @@ private void CleanUp()
         chatClient?.Dispose();
     }
 
-    public string GetAutomationName(string name, double value) => $"{name} {value:F0}";
+    private void Slider_GotFocus(object sender, RoutedEventArgs e)
+    {
+        if (sender is Slider slider)
+        {
+            var tooltip = ToolTipService.GetToolTip(slider)?.ToString();
+            if (!string.IsNullOrEmpty(tooltip))
+            {
+                NarratorHelper.Announce(slider, tooltip, $"{slider.Name}FocusAnnouncementId");
+            }
+        }
+    }
+
+    private void Slider_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)
+    {
+        if (sender is Slider slider)
+        {
+            string formattedValue = slider.StepFrequency < 1
+                ? e.NewValue.ToString("F2", CultureInfo.InvariantCulture)
+                : ((int)e.NewValue).ToString(CultureInfo.InvariantCulture);
+            NarratorHelper.Announce(slider, $"{slider.Header} {formattedValue}", $"{slider.Name}ValueChangedAnnouncementId");
+        }
+    }
 
     public ChatOptions GetDefaultChatOptions(IChatClient? chatClient)
     {
@@ -149,8 +172,8 @@ public ChatOptions GetDefaultChatOptions(IChatClient? chatClient)
                 { "do_sample", defaultDoSample },
             },
             MaxOutputTokens = defaultMaxLength,
-            Temperature = defaultTemperature,
-            TopP = defaultTopP,
+            Temperature = (float)defaultTemperature,
+            TopP = (float)defaultTopP,
             TopK = defaultTopK,
         };
     }