a11y check: screen reader, keyboard navigation, FastPass ✅

microsoft · Feb 27, 2025 · cb04e7f · cb04e7f
1 parent 6932db0
commit cb04e7f
Show file tree

Hide file tree

Showing 5 changed files with 109 additions and 54 deletions.
diff --git a/src/cascadia/TerminalSettingsEditor/Extensions.cpp b/src/cascadia/TerminalSettingsEditor/Extensions.cpp
@@ -25,6 +25,11 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         InitializeComponent();
 
         _extensionPackageIdentifierTemplateSelector = Resources().Lookup(box_value(L"ExtensionPackageIdentifierTemplateSelector")).as<Editor::ExtensionPackageTemplateSelector>();
+
+        Automation::AutomationProperties::SetName(ActiveExtensionsList(), RS_(L"Extensions_ActiveExtensionsHeader/Text"));
+        Automation::AutomationProperties::SetName(ModifiedProfilesList(), RS_(L"Extensions_ModifiedProfilesHeader/Text"));
+        Automation::AutomationProperties::SetName(AddedProfilesList(), RS_(L"Extensions_AddedProfilesHeader/Text"));
+        Automation::AutomationProperties::SetName(AddedColorSchemesList(), RS_(L"Extensions_AddedColorSchemesHeader/Text"));
     }
 
     void Extensions::OnNavigatedTo(const NavigationEventArgs& e)
@@ -292,6 +297,16 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         return hstring{ fmt::format(FMT_COMPILE(L"{}: {}"), AccessibleName(), RS_(L"Extension_StateDisabled/Text")) };
     }
 
+    hstring FragmentProfileViewModel::AccessibleName() const noexcept
+    {
+        return hstring{ fmt::format(FMT_COMPILE(L"{}, {}"), Profile().Name(), SourceName()) };
+    }
+
+    hstring FragmentColorSchemeViewModel::AccessibleName() const noexcept
+    {
+        return hstring{ fmt::format(FMT_COMPILE(L"{}, {}"), ColorSchemeVM().Name(), SourceName()) };
+    }
+
     DataTemplate ExtensionPackageTemplateSelector::SelectTemplateCore(const IInspectable& item, const DependencyObject& /*container*/)
     {
         return SelectTemplateCore(item);

diff --git a/src/cascadia/TerminalSettingsEditor/Extensions.h b/src/cascadia/TerminalSettingsEditor/Extensions.h
@@ -131,6 +131,7 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         Model::Profile Profile() const { return _deducedProfile; };
         hstring SourceName() const { return _fragment.Source(); }
         hstring Json() const { return _entry.Json(); }
+        hstring AccessibleName() const noexcept;
 
     private:
         Model::FragmentProfileEntry _entry;
@@ -149,6 +150,7 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         Editor::ColorSchemeViewModel ColorSchemeVM() const { return _deducedSchemeVM; };
         hstring SourceName() const { return _fragment.Source(); }
         hstring Json() const { return _entry.Json(); }
+        hstring AccessibleName() const noexcept;
 
     private:
         Model::FragmentColorSchemeEntry _entry;

diff --git a/src/cascadia/TerminalSettingsEditor/Extensions.idl b/src/cascadia/TerminalSettingsEditor/Extensions.idl
@@ -58,13 +58,15 @@ namespace Microsoft.Terminal.Settings.Editor
         Microsoft.Terminal.Settings.Model.Profile Profile { get; };
         String SourceName { get; };
         String Json { get; };
+        String AccessibleName { get; };
     }
 
     [default_interface] runtimeclass FragmentColorSchemeViewModel : Windows.UI.Xaml.Data.INotifyPropertyChanged
     {
         ColorSchemeViewModel ColorSchemeVM { get; };
         String SourceName { get; };
         String Json { get; };
+        String AccessibleName { get; };
     }
 
     [default_interface] runtimeclass ExtensionPackageTemplateSelector : Windows.UI.Xaml.Controls.DataTemplateSelector

diff --git a/src/cascadia/TerminalSettingsEditor/Extensions.xaml b/src/cascadia/TerminalSettingsEditor/Extensions.xaml
@@ -33,6 +33,7 @@
 
             <Style x:Key="CodeBlockScrollViewerStyle"
                    TargetType="ScrollViewer">
+                <Setter Property="AutomationProperties.AccessibilityView" Value="Raw" />
                 <Setter Property="HorizontalScrollMode" Value="Auto" />
                 <Setter Property="HorizontalScrollBarVisibility" Value="Auto" />
                 <Setter Property="VerticalScrollMode" Value="Disabled" />
@@ -133,39 +134,52 @@
 
             <DataTemplate x:Key="FragmentProfileViewModelTemplate"
                           x:DataType="local:FragmentProfileViewModel">
-                <local:SettingContainer CurrentValue="{x:Bind SourceName, Mode=OneWay}"
-                                        Style="{StaticResource ExpanderSettingContainerStyle}">
-                    <local:SettingContainer.Header>
-                        <StackPanel Orientation="Horizontal">
-                            <IconSourceElement Width="16"
-                                               Height="16"
-                                               Margin="0,0,8,0"
-                                               IconSource="{x:Bind mtu:IconPathConverter.IconSourceWUX(Profile.EvaluatedIcon), Mode=OneWay}" />
-
-                            <TextBlock Text="{x:Bind Profile.Name, Mode=OneWay}" />
-
-                            <Button x:Name="NavigateToProfileButton"
-                                    x:Uid="Extensions_NavigateToProfileButton"
-                                    Click="NavigateToProfile_Click"
-                                    Style="{StaticResource SettingContainerResetButtonStyle}"
-                                    Tag="{x:Bind Profile.Guid}">
-                                <FontIcon Glyph="&#xE8A7;"
-                                          Style="{StaticResource SettingContainerFontIconStyle}" />
-                            </Button>
-                        </StackPanel>
-                    </local:SettingContainer.Header>
-                    <local:SettingContainer.Content>
+                <muxc:Expander AutomationProperties.Name="{x:Bind AccessibleName}"
+                               Style="{StaticResource ExpanderStyle}">
+                    <muxc:Expander.Header>
+                        <Grid>
+                            <Grid.ColumnDefinitions>
+                                <ColumnDefinition Width="*" />
+                                <ColumnDefinition Width="Auto" />
+                            </Grid.ColumnDefinitions>
+
+                            <StackPanel Grid.Column="0"
+                                        Orientation="Horizontal">
+                                <IconSourceElement Width="16"
+                                                   Height="16"
+                                                   Margin="0,0,8,0"
+                                                   IconSource="{x:Bind mtu:IconPathConverter.IconSourceWUX(Profile.EvaluatedIcon), Mode=OneWay}" />
+
+                                <TextBlock Text="{x:Bind Profile.Name, Mode=OneWay}" />
+
+                                <Button x:Name="NavigateToProfileButton"
+                                        x:Uid="Extensions_NavigateToProfileButton"
+                                        Click="NavigateToProfile_Click"
+                                        Style="{StaticResource SettingContainerResetButtonStyle}"
+                                        Tag="{x:Bind Profile.Guid}">
+                                    <FontIcon Glyph="&#xE8A7;"
+                                              Style="{StaticResource SettingContainerFontIconStyle}" />
+                                </Button>
+                            </StackPanel>
+
+                            <TextBlock Grid.Column="1"
+                                       Style="{StaticResource SettingContainerCurrentValueTextBlockStyle}"
+                                       Text="{x:Bind SourceName}" />
+                        </Grid>
+                    </muxc:Expander.Header>
+                    <muxc:Expander.Content>
                         <ScrollViewer Style="{StaticResource CodeBlockScrollViewerStyle}">
                             <TextBlock Style="{StaticResource CodeBlockStyle}"
                                        Text="{x:Bind Json, Mode=OneWay}" />
                         </ScrollViewer>
-                    </local:SettingContainer.Content>
-                </local:SettingContainer>
+                    </muxc:Expander.Content>
+                </muxc:Expander>
             </DataTemplate>
 
             <!--  This styling matches that of ExpanderSettingContainerStyle for consistency  -->
             <Style x:Key="ExpanderStyle"
                    TargetType="muxc:Expander">
+                <Setter Property="MaxWidth" Value="1000" />
                 <Setter Property="MinHeight" Value="64" />
                 <Setter Property="Margin" Value="0,4,0,0" />
                 <Setter Property="HorizontalAlignment" Value="Stretch" />
@@ -321,29 +335,41 @@
 
             <DataTemplate x:Key="FragmentColorSchemeViewModelTemplate"
                           x:DataType="local:FragmentColorSchemeViewModel">
-                <local:SettingContainer CurrentValue="{x:Bind SourceName, Mode=OneWay}"
-                                        Style="{StaticResource ExpanderSettingContainerStyle}">
-                    <local:SettingContainer.Header>
-                        <StackPanel Orientation="Horizontal">
-                            <ContentPresenter Content="{x:Bind ColorSchemeVM, Mode=OneWay}"
-                                              ContentTemplate="{StaticResource ColorSchemeVMTemplate}" />
-                            <Button x:Name="NavigateToColorSchemeButton"
-                                    x:Uid="Extensions_NavigateToColorSchemeButton"
-                                    Click="NavigateToColorScheme_Click"
-                                    Style="{StaticResource SettingContainerResetButtonStyle}"
-                                    Tag="{x:Bind ColorSchemeVM}">
-                                <FontIcon Glyph="&#xE8A7;"
-                                          Style="{StaticResource SettingContainerFontIconStyle}" />
-                            </Button>
-                        </StackPanel>
-                    </local:SettingContainer.Header>
-                    <local:SettingContainer.Content>
+                <muxc:Expander AutomationProperties.Name="{x:Bind AccessibleName}"
+                               Style="{StaticResource ExpanderStyle}">
+                    <muxc:Expander.Header>
+                        <Grid>
+                            <Grid.ColumnDefinitions>
+                                <ColumnDefinition Width="*" />
+                                <ColumnDefinition Width="Auto" />
+                            </Grid.ColumnDefinitions>
+
+                            <StackPanel Grid.Column="0"
+                                        Orientation="Horizontal">
+                                <ContentPresenter Content="{x:Bind ColorSchemeVM, Mode=OneWay}"
+                                                  ContentTemplate="{StaticResource ColorSchemeVMTemplate}" />
+                                <Button x:Name="NavigateToColorSchemeButton"
+                                        x:Uid="Extensions_NavigateToColorSchemeButton"
+                                        Click="NavigateToColorScheme_Click"
+                                        Style="{StaticResource SettingContainerResetButtonStyle}"
+                                        Tag="{x:Bind ColorSchemeVM}">
+                                    <FontIcon Glyph="&#xE8A7;"
+                                              Style="{StaticResource SettingContainerFontIconStyle}" />
+                                </Button>
+                            </StackPanel>
+
+                            <TextBlock Grid.Column="1"
+                                       Style="{StaticResource SettingContainerCurrentValueTextBlockStyle}"
+                                       Text="{x:Bind SourceName}" />
+                        </Grid>
+                    </muxc:Expander.Header>
+                    <muxc:Expander.Content>
                         <ScrollViewer Style="{StaticResource CodeBlockScrollViewerStyle}">
                             <TextBlock Style="{StaticResource CodeBlockStyle}"
                                        Text="{x:Bind Json, Mode=OneWay}" />
                         </ScrollViewer>
-                    </local:SettingContainer.Content>
-                </local:SettingContainer>
+                    </muxc:Expander.Content>
+                </muxc:Expander>
             </DataTemplate>
         </ResourceDictionary>
     </Page.Resources>
@@ -367,9 +393,11 @@
             <TextBlock x:Uid="Extensions_NoActiveExtensionsDisclaimer"
                        Style="{StaticResource ItalicDisclaimerStyle}"
                        Visibility="{x:Bind ViewModel.NoExtensionPackages, Mode=OneWay}" />
-            <ItemsControl IsTabStop="False"
+            <ItemsControl x:Name="ActiveExtensionsList"
+                          IsTabStop="False"
                           ItemTemplateSelector="{StaticResource ExtensionPackageNavigatorTemplateSelector}"
-                          ItemsSource="{x:Bind ViewModel.ExtensionPackages}" />
+                          ItemsSource="{x:Bind ViewModel.ExtensionPackages}"
+                          XYFocusKeyboardNavigation="Enabled" />
         </StackPanel>
 
         <!--  [Extension View Only]  -->
@@ -430,7 +458,8 @@
             <TextBlock x:Uid="Extensions_NoModifiedProfilesDisclaimer"
                        Style="{StaticResource ItalicDisclaimerStyle}"
                        Visibility="{x:Bind ViewModel.NoProfilesModified, Mode=OneWay}" />
-            <ItemsControl IsTabStop="False"
+            <ItemsControl x:Name="ModifiedProfilesList"
+                          IsTabStop="False"
                           ItemTemplate="{StaticResource FragmentProfileViewModelTemplate}"
                           ItemsSource="{x:Bind ViewModel.ProfilesModified, Mode=OneWay}" />
         </StackPanel>
@@ -442,7 +471,8 @@
             <TextBlock x:Uid="Extensions_NoAddedProfilesDisclaimer"
                        Style="{StaticResource ItalicDisclaimerStyle}"
                        Visibility="{x:Bind ViewModel.NoProfilesAdded, Mode=OneWay}" />
-            <ItemsControl IsTabStop="False"
+            <ItemsControl x:Name="AddedProfilesList"
+                          IsTabStop="False"
                           ItemTemplate="{StaticResource FragmentProfileViewModelTemplate}"
                           ItemsSource="{x:Bind ViewModel.ProfilesAdded, Mode=OneWay}" />
         </StackPanel>
@@ -454,7 +484,8 @@
             <TextBlock x:Uid="Extensions_NoAddedColorSchemesDisclaimer"
                        Style="{StaticResource ItalicDisclaimerStyle}"
                        Visibility="{x:Bind ViewModel.NoSchemesAdded, Mode=OneWay}" />
-            <ItemsControl IsTabStop="False"
+            <ItemsControl x:Name="AddedColorSchemesList"
+                          IsTabStop="False"
                           ItemTemplate="{StaticResource FragmentColorSchemeViewModelTemplate}"
                           ItemsSource="{x:Bind ViewModel.ColorSchemesAdded, Mode=OneWay}" />
         </StackPanel>

diff --git a/src/cascadia/TerminalSettingsEditor/SettingContainerStyle.xaml b/src/cascadia/TerminalSettingsEditor/SettingContainerStyle.xaml
@@ -179,13 +179,18 @@
         <Setter Property="FontFamily" Value="Segoe UI, Segoe Fluent Icons, Segoe MDL2 Assets" />
     </Style>
 
+    <Style x:Key="SettingContainerCurrentValueTextBlockStyle"
+           BasedOn="{StaticResource SettingsPageItemDescriptionStyle}"
+           TargetType="TextBlock">
+        <Setter Property="MaxWidth" Value="250" />
+        <Setter Property="Margin" Value="0,0,-16,0" />
+        <Setter Property="HorizontalAlignment" Value="Right" />
+        <Setter Property="VerticalAlignment" Value="Center" />
+        <Setter Property="FontFamily" Value="Segoe UI, Segoe Fluent Icons, Segoe MDL2 Assets" />
+    </Style>
+
     <DataTemplate x:Key="ExpanderSettingContainerStringPreviewTemplate">
-        <TextBlock MaxWidth="250"
-                   Margin="0,0,-16,0"
-                   HorizontalAlignment="Right"
-                   VerticalAlignment="Center"
-                   FontFamily="Segoe UI, Segoe Fluent Icons, Segoe MDL2 Assets"
-                   Style="{StaticResource SettingsPageItemDescriptionStyle}"
+        <TextBlock Style="{StaticResource SettingContainerCurrentValueTextBlockStyle}"
                    Text="{Binding}" />
     </DataTemplate>