Make SUI previews readable by screen readers (#18418)

Fixes a few accessibility bugs in the SettingContainer previews. Main
changes include:
- `SettingContainer` was considered a separate UIA element from the
inner expander. It's been marked as `AccessibilityView=Raw` to "remove"
it from the UIA tree.
- Added a `CurrentValueAccessibleName` property to the
`SettingContainer` to expose the current value to the screen reader for
`SettingContainer`s that have expanders. Non-expander
`SetttingContainer`s already worked fine.
- Applied `CurrentValueAccessibleName` to various settings throughout
the settings UI for full coverage. Added a `CurrentValue` for the ones
that were missing it.
- Removed a redundant/hidden tab stop in `Icon`

`Padding` was not updated since #18300 is handling that. This'll just
automatically make it accessible.
Font axes and features weren't updated to show previews, but I'm happy
to do it if given a suggestion.

Part of #18318

## Details
- `SettingContainer` updates:
- `AccessibilityView = Raw` for `SettingContainer`s with expanders. This
is because the expander itself is the one we care about. No need to have
another layer of UIA objects saying it's a group.
   - Added a `CurrentValueAccessibleName` property
- This specifically defines what should be read out by the screen
reader, similar to `AutomationProperties.Name`
      - It updates automatically when `CurrentValue` changes. 
      - It's applied on the inner `Expander`, if one exists.
- The accessible name is constructed to be `"<Header>:
<CurrentValueAccessibleName>"`. If `CurrentValueAccessibleName` isn't
provided, we try to use the `CurrentValue` if it's a string.
- Profile (and appearance) settings:
- `Icon`'s value is now read out by a screen reader instead of staying
silent. It'll read the icon path.
   - A redundant/hidden tab stop was removed from `Icon`.
   - `TabTitle` now displays/reads "None" if no tab title is set.
   - `ColorScheme` is now read out by a screen reader.
- The color scheme overrides (i.e. `Foreground`, `Background`,
`SelectionBackground`, and `CursorColor`) are now read out by a screen
reader. Format is "#<hex value>".
- `BackgroundImageAlignment` is now displayed and read out by a screen
reader.
- `LaunchSize` is now displayed and read out by a screen reader. Format
is "Width x Height".

## Validation Steps Performed
Tabbed through the settings UI with a screen reader. Each of these
settings now reads out a preview.

src/cascadia/TerminalSettingsEditor/Appearances.cpp

@@ -221,6 +221,10 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
                 // box, prevent it from ever being changed again.
                 _NotifyChanges(L"UseDesktopBGImage", L"BackgroundImageSettingsVisible");
             }
+            else if (viewModelProperty == L"BackgroundImageAlignment")
+            {
+                _NotifyChanges(L"BackgroundImageAlignmentCurrentValue");
+            }
             else if (viewModelProperty == L"Foreground")
             {
                 _NotifyChanges(L"ForegroundPreview");
@@ -912,6 +916,44 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         BackgroundImagePath(path);
     }
 
+    hstring AppearanceViewModel::BackgroundImageAlignmentCurrentValue() const
+    {
+        const auto alignment = BackgroundImageAlignment();
+        hstring alignmentResourceKey = L"Profile_BackgroundImageAlignment";
+        if (alignment == (ConvergedAlignment::Vertical_Center | ConvergedAlignment::Horizontal_Center))
+        {
+            alignmentResourceKey = alignmentResourceKey + L"Center";
+        }
+        else
+        {
+            // Append vertical alignment to the resource key
+            switch (alignment & static_cast<ConvergedAlignment>(0x0F))
+            {
+            case ConvergedAlignment::Vertical_Bottom:
+                alignmentResourceKey = alignmentResourceKey + L"Bottom";
+                break;
+            case ConvergedAlignment::Vertical_Top:
+                alignmentResourceKey = alignmentResourceKey + L"Top";
+                break;
+            }
+
+            // Append horizontal alignment to the resource key
+            switch (alignment & static_cast<ConvergedAlignment>(0xF0))
+            {
+            case ConvergedAlignment::Horizontal_Left:
+                alignmentResourceKey = alignmentResourceKey + L"Left";
+                break;
+            case ConvergedAlignment::Horizontal_Right:
+                alignmentResourceKey = alignmentResourceKey + L"Right";
+                break;
+            }
+        }
+        alignmentResourceKey = alignmentResourceKey + L"/[using:Windows.UI.Xaml.Controls]ToolTipService/ToolTip";
+
+        // We can't use the RS_ macro here because the resource key is dynamic
+        return GetLibraryResourceString(alignmentResourceKey);
+    }
+
     bool AppearanceViewModel::UseDesktopBGImage()
     {
         return BackgroundImagePath() == L"desktopWallpaper";

src/cascadia/TerminalSettingsEditor/Appearances.h

@@ -125,6 +125,7 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         bool BackgroundImageSettingsVisible();
         void SetBackgroundImageOpacityFromPercentageValue(double percentageValue);
         void SetBackgroundImagePath(winrt::hstring path);
+        hstring BackgroundImageAlignmentCurrentValue() const;
 
         void ClearColorScheme();
         Editor::ColorSchemeViewModel CurrentColorScheme() const;

src/cascadia/TerminalSettingsEditor/Appearances.idl

@@ -40,6 +40,7 @@ namespace Microsoft.Terminal.Settings.Editor
 
         Boolean UseDesktopBGImage;
         Boolean BackgroundImageSettingsVisible { get; };
+        String BackgroundImageAlignmentCurrentValue { get; };
 
         void ClearColorScheme();
         ColorSchemeViewModel CurrentColorScheme;

src/cascadia/TerminalSettingsEditor/Appearances.xaml

@@ -73,6 +73,7 @@
             <!--  This currently only display the Dark color scheme, even if the user has a pair of schemes set.  -->
             <local:SettingContainer x:Uid="Profile_ColorScheme"
                                     ClearSettingValue="{x:Bind Appearance.ClearColorScheme}"
+                                    CurrentValueAccessibleName="{x:Bind Appearance.CurrentColorScheme.Name, Mode=OneWay}"
                                     HasSettingValue="{x:Bind Appearance.HasDarkColorSchemeName, Mode=OneWay}"
                                     SettingOverrideSource="{x:Bind Appearance.DarkColorSchemeNameOverrideSource, Mode=OneWay}"
                                     Style="{StaticResource ExpanderSettingContainerStyleWithComplexPreview}">
@@ -209,6 +210,7 @@
                                                 x:Uid="Profile_Foreground"
                                                 ClearSettingValue="{x:Bind Appearance.ClearForeground}"
                                                 CurrentValue="{x:Bind Appearance.ForegroundPreview, Mode=OneWay}"
+                                                CurrentValueAccessibleName="{x:Bind Appearance.ForegroundPreview, Converter={StaticResource ColorToStringConverter}, Mode=OneWay}"
                                                 CurrentValueTemplate="{StaticResource ColorPreviewTemplate}"
                                                 HasSettingValue="{x:Bind Appearance.HasForeground, Mode=OneWay}"
                                                 SettingOverrideSource="{x:Bind Appearance.ForegroundOverrideSource, Mode=OneWay}"
@@ -224,6 +226,7 @@
                                                 x:Uid="Profile_Background"
                                                 ClearSettingValue="{x:Bind Appearance.ClearBackground}"
                                                 CurrentValue="{x:Bind Appearance.BackgroundPreview, Mode=OneWay}"
+                                                CurrentValueAccessibleName="{x:Bind Appearance.BackgroundPreview, Converter={StaticResource ColorToStringConverter}, Mode=OneWay}"
                                                 CurrentValueTemplate="{StaticResource ColorPreviewTemplate}"
                                                 HasSettingValue="{x:Bind Appearance.HasBackground, Mode=OneWay}"
                                                 SettingOverrideSource="{x:Bind Appearance.BackgroundOverrideSource, Mode=OneWay}"
@@ -239,6 +242,7 @@
                                                 x:Uid="Profile_SelectionBackground"
                                                 ClearSettingValue="{x:Bind Appearance.ClearSelectionBackground}"
                                                 CurrentValue="{x:Bind Appearance.SelectionBackgroundPreview, Mode=OneWay}"
+                                                CurrentValueAccessibleName="{x:Bind Appearance.SelectionBackgroundPreview, Converter={StaticResource ColorToStringConverter}, Mode=OneWay}"
                                                 CurrentValueTemplate="{StaticResource ColorPreviewTemplate}"
                                                 HasSettingValue="{x:Bind Appearance.HasSelectionBackground, Mode=OneWay}"
                                                 SettingOverrideSource="{x:Bind Appearance.SelectionBackgroundOverrideSource, Mode=OneWay}"
@@ -508,6 +512,7 @@
                                     x:Uid="Profile_CursorColor"
                                     ClearSettingValue="{x:Bind Appearance.ClearCursorColor}"
                                     CurrentValue="{x:Bind Appearance.CursorColorPreview, Mode=OneWay}"
+                                    CurrentValueAccessibleName="{x:Bind Appearance.CursorColorPreview, Converter={StaticResource ColorToStringConverter}, Mode=OneWay}"
                                     CurrentValueTemplate="{StaticResource ColorPreviewTemplate}"
                                     HasSettingValue="{x:Bind Appearance.HasCursorColor, Mode=OneWay}"
                                     SettingOverrideSource="{x:Bind Appearance.CursorColorOverrideSource, Mode=OneWay}"
@@ -568,6 +573,7 @@
             <!--  Background Image Alignment  -->
             <local:SettingContainer x:Uid="Profile_BackgroundImageAlignment"
                                     ClearSettingValue="{x:Bind Appearance.ClearBackgroundImageAlignment}"
+                                    CurrentValue="{x:Bind Appearance.BackgroundImageAlignmentCurrentValue, Mode=OneWay}"
                                     HasSettingValue="{x:Bind Appearance.HasBackgroundImageAlignment, Mode=OneWay}"
                                     SettingOverrideSource="{x:Bind Appearance.BackgroundImageAlignmentOverrideSource, Mode=OneWay}"
                                     Style="{StaticResource ExpanderSettingContainerStyle}"

src/cascadia/TerminalSettingsEditor/Launch.xaml

@@ -186,7 +186,9 @@
                           Style="{StaticResource ComboBoxSettingStyle}" />
             </local:SettingContainer>
 
+            <!--  Launch Size  -->
             <local:SettingContainer x:Uid="Globals_LaunchSize"
+                                    CurrentValue="{x:Bind ViewModel.LaunchSizeCurrentValue, Mode=OneWay}"
                                     Style="{StaticResource ExpanderSettingContainerStyle}">
                 <Grid ColumnSpacing="10"
                       RowSpacing="10">

src/cascadia/TerminalSettingsEditor/LaunchViewModel.cpp

@@ -62,6 +62,10 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
             {
                 _NotifyChanges(L"LaunchParametersCurrentValue");
             }
+            else if (viewModelProperty == L"InitialCols" || viewModelProperty == L"InitialRows")
+            {
+                _NotifyChanges(L"LaunchSizeCurrentValue");
+            }
         });
     }
 
@@ -205,6 +209,11 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         }
     }
 
+    winrt::hstring LaunchViewModel::LaunchSizeCurrentValue() const
+    {
+        return winrt::hstring{ fmt::format(FMT_COMPILE(L"{} × {}"), InitialCols(), InitialRows()) };
+    }
+
     winrt::hstring LaunchViewModel::LaunchParametersCurrentValue()
     {
         const auto launchModeString = CurrentLaunchMode().as<EnumEntry>()->EnumName();

src/cascadia/TerminalSettingsEditor/LaunchViewModel.h

@@ -24,6 +24,7 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         winrt::Windows::Foundation::IInspectable CurrentLanguage();
         void CurrentLanguage(const winrt::Windows::Foundation::IInspectable& tag);
 
+        winrt::hstring LaunchSizeCurrentValue() const;
         winrt::hstring LaunchParametersCurrentValue();
         double InitialPosX();
         double InitialPosY();

src/cascadia/TerminalSettingsEditor/LaunchViewModel.idl

@@ -19,6 +19,7 @@ namespace Microsoft.Terminal.Settings.Editor
         IInspectable CurrentDefaultInputScope;
         IObservableVector<Microsoft.Terminal.Settings.Editor.EnumEntry> DefaultInputScopeList { get; };
 
+        String LaunchSizeCurrentValue { get; };
         String LaunchParametersCurrentValue { get; };
         Double InitialPosX;
         Double InitialPosY;

src/cascadia/TerminalSettingsEditor/ProfileViewModel.cpp

@@ -488,6 +488,15 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         return _profile.Orphaned();
     }
 
+    hstring ProfileViewModel::TabTitlePreview() const
+    {
+        if (const auto tabTitle{ TabTitle() }; !tabTitle.empty())
+        {
+            return tabTitle;
+        }
+        return RS_(L"Profile_TabTitleNone");
+    }
+
     Editor::AppearanceViewModel ProfileViewModel::DefaultAppearance()
     {
         return _defaultAppearanceViewModel;

src/cascadia/TerminalSettingsEditor/ProfileViewModel.h

@@ -115,6 +115,7 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         bool RepositionCursorWithMouseAvailable() const noexcept;
 
         bool Orphaned() const;
+        hstring TabTitlePreview() const;
 
         til::typed_event<Editor::ProfileViewModel, Editor::DeleteProfileEventArgs> DeleteProfileRequested;
 

src/cascadia/TerminalSettingsEditor/ProfileViewModel.idl

@@ -118,6 +118,8 @@ namespace Microsoft.Terminal.Settings.Editor
         IInspectable CurrentBuiltInIcon;
         Windows.Foundation.Collections.IVector<IInspectable> BuiltInIcons { get; };
 
+        String TabTitlePreview { get; };
+
         void CreateUnfocusedAppearance();
         void DeleteUnfocusedAppearance();
 

src/cascadia/TerminalSettingsEditor/Profiles_Base.xaml

@@ -102,6 +102,7 @@
             <!--  Icon  -->
             <local:SettingContainer x:Uid="Profile_Icon"
                                     ClearSettingValue="{x:Bind Profile.ClearIcon}"
+                                    CurrentValueAccessibleName="{x:Bind Profile.Icon, Mode=OneWay}"
                                     HasSettingValue="{x:Bind Profile.HasIcon, Mode=OneWay}"
                                     SettingOverrideSource="{x:Bind Profile.IconOverrideSource, Mode=OneWay}"
                                     Style="{StaticResource ExpanderSettingContainerStyleWithComplexPreview}">
@@ -110,6 +111,7 @@
                         <ContentControl Width="16"
                                         Height="16"
                                         Content="{x:Bind Profile.IconPreview, Mode=OneWay}"
+                                        IsTabStop="False"
                                         Visibility="{x:Bind mtu:Converters.InvertedBooleanToVisibility(Profile.UsingNoIcon), Mode=OneWay}" />
                         <TextBlock Margin="0,0,0,0"
                                    HorizontalAlignment="Right"
@@ -199,7 +201,7 @@
             <!--  Tab Title  -->
             <local:SettingContainer x:Uid="Profile_TabTitle"
                                     ClearSettingValue="{x:Bind Profile.ClearTabTitle}"
-                                    CurrentValue="{x:Bind Profile.TabTitle, Mode=OneWay}"
+                                    CurrentValue="{x:Bind Profile.TabTitlePreview, Mode=OneWay}"
                                     HasSettingValue="{x:Bind Profile.HasTabTitle, Mode=OneWay}"
                                     SettingOverrideSource="{x:Bind Profile.TabTitleOverrideSource, Mode=OneWay}"
                                     Style="{StaticResource ExpanderSettingContainerStyle}">

src/cascadia/TerminalSettingsEditor/Resources/en-US/Resources.resw

@@ -2316,4 +2316,8 @@
   <data name="Profile_Source_Orphaned.HelpText" xml:space="preserve">
     <value>Indicates the software that originally created this profile.</value>
   </data>
-</root>
+  <data name="Profile_TabTitleNone" xml:space="preserve">
+    <value>None</value>
+    <comment>Text displayed when the tab title is not defined.</comment>
+  </data>
+</root>

src/cascadia/TerminalSettingsEditor/SettingContainer.cpp

@@ -15,6 +15,7 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
     DependencyProperty SettingContainer::_FontIconGlyphProperty{ nullptr };
     DependencyProperty SettingContainer::_CurrentValueProperty{ nullptr };
     DependencyProperty SettingContainer::_CurrentValueTemplateProperty{ nullptr };
+    DependencyProperty SettingContainer::_CurrentValueAccessibleNameProperty{ nullptr };
     DependencyProperty SettingContainer::_HasSettingValueProperty{ nullptr };
     DependencyProperty SettingContainer::_SettingOverrideSourceProperty{ nullptr };
     DependencyProperty SettingContainer::_StartExpandedProperty{ nullptr };
@@ -63,7 +64,7 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
                     L"CurrentValue",
                     xaml_typename<IInspectable>(),
                     xaml_typename<Editor::SettingContainer>(),
-                    PropertyMetadata{ nullptr });
+                    PropertyMetadata{ nullptr, PropertyChangedCallback{ &SettingContainer::_OnCurrentValueChanged } });
         }
         if (!_CurrentValueTemplateProperty)
         {
@@ -74,6 +75,15 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
                     xaml_typename<Editor::SettingContainer>(),
                     PropertyMetadata{ nullptr });
         }
+        if (!_CurrentValueAccessibleNameProperty)
+        {
+            _CurrentValueAccessibleNameProperty =
+                DependencyProperty::Register(
+                    L"CurrentValueAccessibleName",
+                    xaml_typename<Windows::UI::Xaml::DataTemplate>(),
+                    xaml_typename<Editor::SettingContainer>(),
+                    PropertyMetadata{ box_value(L""), PropertyChangedCallback{ &SettingContainer::_OnCurrentValueChanged } });
+        }
         if (!_HasSettingValueProperty)
         {
             _HasSettingValueProperty =
@@ -103,6 +113,12 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         }
     }
 
+    void SettingContainer::_OnCurrentValueChanged(const Windows::UI::Xaml::DependencyObject& d, const Windows::UI::Xaml::DependencyPropertyChangedEventArgs& /*e*/)
+    {
+        const auto& obj{ d.try_as<Editor::SettingContainer>() };
+        get_self<SettingContainer>(obj)->_UpdateCurrentValueAutoProp();
+    }
+
     void SettingContainer::_OnHasSettingValueChanged(const DependencyObject& d, const DependencyPropertyChangedEventArgs& /*args*/)
     {
         // update visibility for override message and reset button
@@ -174,14 +190,8 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
 
         for (const auto& obj : base)
         {
-            // apply header as name (automation property)
-            if (const auto& header{ Header() })
-            {
-                if (const auto headerText{ header.try_as<hstring>() })
-                {
-                    Automation::AutomationProperties::SetName(obj, *headerText);
-                }
-            }
+            // apply header and current value as name (automation property)
+            Automation::AutomationProperties::SetName(obj, _GenerateAccessibleName());
 
             // apply help text as tooltip and full description (automation property)
             if (const auto& helpText{ HelpText() }; !helpText.empty())
@@ -247,6 +257,17 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         }
     }
 
+    void SettingContainer::_UpdateCurrentValueAutoProp()
+    {
+        if (const auto& child{ GetTemplateChild(L"Expander") })
+        {
+            if (const auto& expander{ child.try_as<Microsoft::UI::Xaml::Controls::Expander>() })
+            {
+                Automation::AutomationProperties::SetName(expander, _GenerateAccessibleName());
+            }
+        }
+    }
+
     // Method Description:
     // - Helper function for generating the override message
     // Arguments:
@@ -279,4 +300,37 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         }
         return RS_(L"SettingContainer_OverrideMessageBaseLayer");
     }
+
+    // Method Description:
+    // - Helper function for generating the accessible name
+    // Return Value:
+    // - text specifying the accessible name. Includes header and current value, if available.
+    hstring SettingContainer::_GenerateAccessibleName()
+    {
+        hstring name{};
+        if (const auto& header{ Header() })
+        {
+            if (const auto headerText{ header.try_as<hstring>() })
+            {
+                name = *headerText;
+            }
+
+            // append current value to the name, if it exists
+            if (const auto currentValAccessibleName{ CurrentValueAccessibleName() }; !currentValAccessibleName.empty())
+            {
+                // prefer CurrentValueAccessibleName, if it exists
+                name = name + L": " + currentValAccessibleName;
+            }
+            else if (const auto& currentVal{ CurrentValue() })
+            {
+                // the accessible name was not defined, so try to
+                // extract the value directly from the CurrentValue property
+                if (const auto currentValText{ currentVal.try_as<hstring>() })
+                {
+                    name = name + L": " + *currentValText;
+                }
+            }
+        }
+        return name;
+    }
 }