Fix Accessibility Bug

AIDevGallery/Controls/Card.xaml

@@ -48,6 +48,7 @@
                 VerticalAlignment="Center"
                 FontSize="14"
                 FontWeight="SemiBold"
+                AutomationProperties.Level="1"
                 Text="{x:Bind Title, Mode=OneWay}" />
             <ContentPresenter
                 Grid.Column="2"

AIDevGallery/Controls/SampleContainer.xaml

@@ -32,7 +32,7 @@
             CornerRadius="{x:Bind CornerRadius, Mode=OneWay}">
             <Grid.ColumnDefinitions>
                 <ColumnDefinition Width="*" MinWidth="340" />
-                <ColumnDefinition x:Name="CodeColumn" Width="0" MinWidth="300"/>
+                <ColumnDefinition x:Name="CodeColumn" Width="0"/>
             </Grid.ColumnDefinitions>
             <Grid.RowDefinitions>
                 <RowDefinition Height="*" />
@@ -92,9 +92,9 @@
                     Orientation="Horizontal"
                     Visibility="Visible">
                     <FontIcon
-                        Margin="0,4,4,4"
+                        Margin="0,2,2,2"
                         AutomationProperties.AccessibilityView="Raw"
-                        FontSize="11"
+                        FontSize="8"
                         Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                         Glyph="&#xE946;"
                         ToolTipService.ToolTip="AI-generated content might be incorrect, offensive, or biased." />

AIDevGallery/MainWindow.xaml

@@ -19,7 +19,7 @@
     <Window.SystemBackdrop>
         <MicaBackdrop />
     </Window.SystemBackdrop>
-    <Grid>
+    <Grid Loaded="MainWindow_Loaded">
         <Grid.Resources>
             <DataTemplate x:Key="ScenarioTemplate" x:DataType="models:SearchResult">
                 <Grid AutomationProperties.Name="{x:Bind Label}" ColumnSpacing="8">

AIDevGallery/MainWindow.xaml.cs

@@ -1,7 +1,8 @@
-// Copyright (c) Microsoft Corporation. All rights reserved.
+// Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
 
 using AIDevGallery.Controls;
+using AIDevGallery.Controls.ModelPickerViews;
 using AIDevGallery.Helpers;
 using AIDevGallery.Models;
 using AIDevGallery.Pages;
@@ -20,6 +21,7 @@
 using System.Threading;
 using System.Threading.Tasks;
 using Windows.System;
+using Windows.UI.ViewManagement;
 using WinUIEx;
 
 namespace AIDevGallery;
@@ -29,6 +31,7 @@ internal sealed partial class MainWindow : WindowEx
     private AppContentIndexer? _indexer;
     private CancellationTokenSource? _searchCts; // Added for search cancellation
     public ModelOrApiPicker ModelPicker => modelOrApiPicker;
+    private UISettings uiSettings;
 
     public MainWindow(object? obj = null)
     {
@@ -62,6 +65,13 @@ public MainWindow(object? obj = null)
         }
 
         App.AppData.PropertyChanged += AppData_PropertyChanged;
+        uiSettings = new UISettings();
+    }
+
+    private void MainWindow_Loaded(object? sender, RoutedEventArgs e)
+    {
+        uiSettings.ColorValuesChanged += Accessibility_HighContrastChanged;
+        UpdateResources();
     }
 
     private async Task LoadAppSearchIndex()
@@ -452,4 +462,33 @@ public static void IndexAppSearchIndexStatic()
         var mainWindow = (MainWindow)App.MainWindow;
         mainWindow?.IndexContentsWithAppContentSearch();
     }
+
+    private void Accessibility_HighContrastChanged(object sender, object e)
+    {
+        UpdateResources();
+    }
+
+    private void UpdateResources()
+    {
+        var dispatcherQueue = this.DispatcherQueue;
+        dispatcherQueue.TryEnqueue(() =>
+        {
+            var appResources = Application.Current.Resources;
+
+            if (appResources["GitHubIconImage"] is Microsoft.UI.Xaml.Media.Imaging.SvgImageSource svg)
+            {
+                svg.UriSource = new Uri($"ms-appx:///Assets/ModelIcons/GitHub{AppUtils.GetThemeAssetSuffix()}.svg");
+            }
+            else
+            {
+                appResources["GitHubIconImage"] =
+                    new Microsoft.UI.Xaml.Media.Imaging.SvgImageSource(
+                        new Uri($"ms-appx:///Assets/ModelIcons/GitHub{AppUtils.GetThemeAssetSuffix()}.svg"));
+            }
+
+            ModelPickerDefinition.Definitions["onnx"].Icon = $"ms-appx:///Assets/ModelIcons/CustomModel{AppUtils.GetThemeAssetSuffix()}.png";
+            ModelPickerDefinition.Definitions["ollama"].Icon = $"ms-appx:///Assets/ModelIcons/Ollama{AppUtils.GetThemeAssetSuffix()}.png";
+            ModelPickerDefinition.Definitions["openai"].Icon = $"ms-appx:///Assets/ModelIcons/OpenAI{AppUtils.GetThemeAssetSuffix()}.png";
+        });
+    }
 }

AIDevGallery/Pages/APIs/APIPage.xaml

@@ -155,45 +155,6 @@
                     </ItemsView>
                 </controls:Card>
 
-                <controls:Card
-                    x:Name="DocumentationCard"
-                    Title="Documentation"
-                    Grid.Row="3"
-                    Grid.Column="1"
-                    Grid.ColumnSpan="2"
-                    Icon="{ui:FontIcon Glyph=&#xE7C3;,
-                                       FontSize=16}">
-                    <controls:Card.TitleContent>
-                        <HyperlinkButton
-                            Padding="0"
-                            AutomationProperties.Name="View documentation"
-                            NavigateUri="{x:Bind ModelFamily.DocsUrl}">
-                            <StackPanel Orientation="Horizontal" Spacing="8">
-                                <TextBlock Text="View documentation" />
-                                <FontIcon FontSize="12" Glyph="&#xE8A7;" />
-                            </StackPanel>
-                        </HyperlinkButton>
-                    </controls:Card.TitleContent>
-                    <Grid Padding="8,16,8,16">
-                        <toolkit2:MarkdownTextBlock
-                            IsTabStop="False"
-                            x:Name="markdownTextBlock"
-                            Background="Transparent"
-                            FontSize="14"
-                            Foreground="{ThemeResource TextFillColorSecondaryBrush}"
-                            OnLinkClicked="MarkdownTextBlock_OnLinkClicked">
-                            <toolkit2:MarkdownTextBlock.Resources>
-                                <SolidColorBrush x:Key="MarkdownInlineCodeBackgroundBrush" Color="{ThemeResource LayerFillColorAlt}" />
-                                <SolidColorBrush x:Key="MarkdownInlineCodeForegroundBrush" Color="{ThemeResource TextFillColorPrimary}" />
-                            </toolkit2:MarkdownTextBlock.Resources>
-                        </toolkit2:MarkdownTextBlock>
-                        <ProgressRing
-                            x:Name="readmeProgressRing"
-                            Grid.Row="2"
-                            IsActive="True" />
-                    </Grid>
-                </controls:Card>
-
                 <controls:Card
                     x:Name="CodeCard"
                     Title="API"
@@ -235,6 +196,45 @@
                             TextWrapping="Wrap" />
                     </ScrollViewer>
                 </controls:Card>
+
+                <controls:Card
+                    x:Name="DocumentationCard"
+                    Title="Documentation"
+                    Grid.Row="3"
+                    Grid.Column="1"
+                    Grid.ColumnSpan="2"
+                    Icon="{ui:FontIcon Glyph=&#xE7C3;,
+                                       FontSize=16}">
+                    <controls:Card.TitleContent>
+                        <HyperlinkButton
+                            Padding="0"
+                            AutomationProperties.Name="View documentation"
+                            NavigateUri="{x:Bind ModelFamily.DocsUrl}">
+                            <StackPanel Orientation="Horizontal" Spacing="8">
+                                <TextBlock Text="View documentation" />
+                                <FontIcon FontSize="12" Glyph="&#xE8A7;" />
+                            </StackPanel>
+                        </HyperlinkButton>
+                    </controls:Card.TitleContent>
+                    <Grid Padding="8,16,8,16">
+                        <toolkit2:MarkdownTextBlock
+                            IsTabStop="False"
+                            x:Name="markdownTextBlock"
+                            Background="Transparent"
+                            FontSize="14"
+                            Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                            OnLinkClicked="MarkdownTextBlock_OnLinkClicked">
+                            <toolkit2:MarkdownTextBlock.Resources>
+                                <SolidColorBrush x:Key="MarkdownInlineCodeBackgroundBrush" Color="{ThemeResource LayerFillColorAlt}" />
+                                <SolidColorBrush x:Key="MarkdownInlineCodeForegroundBrush" Color="{ThemeResource TextFillColorPrimary}" />
+                            </toolkit2:MarkdownTextBlock.Resources>
+                        </toolkit2:MarkdownTextBlock>
+                        <ProgressRing
+                            x:Name="readmeProgressRing"
+                            Grid.Row="2"
+                            IsActive="True" />
+                    </Grid>
+                </controls:Card>
             </Grid>
         </ScrollViewer>
         <VisualStateManager.VisualStateGroups>

AIDevGallery/Pages/HomePage.xaml

@@ -47,7 +47,8 @@
                                 </ItemsView.Layout>
                                 <ItemsView.ItemTemplate>
                                     <DataTemplate x:DataType="utils:MostRecentlyUsedItem">
-                                        <ItemContainer AutomationProperties.Name="{x:Bind DisplayName}">
+                                        <ItemContainer AutomationProperties.Name="{x:Bind DisplayName}" 
+                                            AutomationProperties.LocalizedControlType="Panel">
                                             <Grid
                                                 Width="274"
                                                 Height="96"

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

@@ -61,26 +61,34 @@
                 </StackPanel>
             </StackPanel>
             <StackPanel Grid.RowSpan="3" Grid.Column="1" Spacing="12" Margin="0,0,12,0">
-                <Slider x:Name="MinLengthSlider" Header="Min Length" Maximum="2048"
-                        Minimum="0" StepFrequency="1"
+                <Slider x:Name="MinLengthSlider"
+                        Header="Min Length"
+                        Maximum="2048"
+                        Minimum="0"
+                        StepFrequency="1"
                         ToolTipService.ToolTip="The min length parameter sets the minimum number of tokens for the model to respond with."
-                        Value="0" />
+                        Value="0"
+                        AutomationProperties.Name="{x:Bind GetAutomationName(MinLengthSlider.Name, MinLengthSlider.Value), Mode=OneWay}" />
                 <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}" />
+                        Value="{x:Bind defaultMaxLength, Mode=OneTime}" 
+                        AutomationProperties.Name="{x:Bind GetAutomationName(MaxLengthSlider.Name, MaxLengthSlider.Value), Mode=OneWay}" />
                 <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}" />
+                        Value="{x:Bind defaultTopP, Mode=OneTime}"
+                        AutomationProperties.Name="{x:Bind GetAutomationName(TopPSlider.Name, TopPSlider.Value), Mode=OneWay}" />
                 <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}" />
+                        Value="{x:Bind defaultTopK, Mode=OneTime}"
+                        AutomationProperties.Name="{x:Bind GetAutomationName(TopKSlider.Name, TopKSlider.Value), Mode=OneWay}" />
                 <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}" />
+                        Value="{x:Bind defaultTemperature, Mode=OneTime}"
+                        AutomationProperties.Name="{x:Bind GetAutomationName(TemperatureSlider.Name, TemperatureSlider.Value), Mode=OneWay}" />
                 <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

@@ -136,6 +136,8 @@ private void CleanUp()
         chatClient?.Dispose();
     }
 
+    public string GetAutomationName(string name, double value) => $"{name} {value:F0}";
+
     public ChatOptions GetDefaultChatOptions(IChatClient? chatClient)
     {
         var chatOptions = chatClient?.GetService<ChatOptions>();