[Accessibility] Fix teaching tip name property in buttons (#6897)

* sets close and action buttons automation property name * Add test and address comments * Address comments * Add spaces
microsoft · Apr 1, 2022 · 9aee101 · 9aee101
1 parent 97b333a
commit 9aee101
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 9 deletions.
diff --git a/dev/TeachingTip/InteractionTests/TeachingTipTests.cs b/dev/TeachingTip/InteractionTests/TeachingTipTests.cs
@@ -1012,6 +1012,27 @@ void EnableLightDismiss()
             }
         }
 
+        [TestMethod]
+        public void VerifyTeachingTipButtonsNameAutomationProperty()
+        {
+            using (var setup = new TestSetupHelper(new[] { "TeachingTip Tests", "TeachingTip Test" }))
+            {
+                elements = new TeachingTipTestPageElements();
+
+                SetActionButtonContentTo("Small text");
+                SetCloseButtonContent(CloseButtonContentOptions.ShortText);
+
+                OpenTeachingTip();
+
+                var actionButton = FindElement.ById("ActionButton");
+                var closeButton = FindElement.ById("CloseButton");
+
+                Log.Comment("Verify that action and close buttons content presenter text will update the buttons name automation property");
+                Verify.AreEqual(actionButton.Name, "A:Short Text.");
+                Verify.AreEqual(closeButton.Name, "C:Short Text.");
+            }
+        }
+
         private void CloseOpenAndCloseWithJustKeyboardViaF6()
         {
             KeyboardHelper.PressKey(Key.F6);

diff --git a/dev/TeachingTip/TeachingTip.cpp b/dev/TeachingTip/TeachingTip.cpp
@@ -121,6 +121,9 @@ void TeachingTip::OnApplyTemplate()
     OnIconSourceChanged();
     OnHeroContentPlacementChanged();
 
+    UpdateButtonAutomationProperties(m_actionButton.get(), ActionButtonContent());
+    UpdateButtonAutomationProperties(m_closeButton.get(), CloseButtonContent());
+
     EstablishShadows();
 
     m_isTemplateApplied = true;
@@ -148,11 +151,6 @@ void TeachingTip::OnPropertyChanged(const winrt::DependencyPropertyChangedEventA
         }
         OnTargetChanged();
     }
-    else if (property == s_ActionButtonContentProperty ||
-        property == s_CloseButtonContentProperty)
-    {
-        UpdateButtonsState();
-    }
     else if (property == s_PlacementMarginProperty)
     {
         OnPlacementMarginChanged();
@@ -199,7 +197,28 @@ void TeachingTip::OnPropertyChanged(const winrt::DependencyPropertyChangedEventA
             TeachingTipTestHooks::NotifySubtitleVisibilityChanged(*this);
         }
     }
+    else if (property == s_ActionButtonContentProperty)
+    {
+        UpdateButtonsState();
+        winrt::IInspectable value = args.NewValue();
+        UpdateButtonAutomationProperties(m_actionButton.get(), value);
+    }
+    else if (property == s_CloseButtonContentProperty)
+    {
+        UpdateButtonsState();
+        winrt::IInspectable value = args.NewValue();
+        UpdateButtonAutomationProperties(m_closeButton.get(), value);
+    }
+
+}
 
+void TeachingTip::UpdateButtonAutomationProperties(const winrt::Button button, const winrt::IInspectable content)
+{
+    if (button) 
+    {
+        winrt::hstring nameHString = SharedHelpers::TryGetStringRepresentationFromObject(content);
+        winrt::AutomationProperties::SetName(button, nameHString);
+    }
 }
 
 bool TeachingTip::ToggleVisibilityForEmptyContent(const wstring_view visibleStateName, const wstring_view collapsedStateName, const winrt::hstring& content)

diff --git a/dev/TeachingTip/TeachingTip.h b/dev/TeachingTip/TeachingTip.h
@@ -162,6 +162,7 @@ class TeachingTip :
     void EstablishShadows();
     void TrySetCenterPoint(const winrt::IUIElement9& element, const winrt::float3& centerPoint);
     bool ToggleVisibilityForEmptyContent(const wstring_view visibleStateName, const wstring_view collapsedStateName, const winrt::hstring& content);
+    void UpdateButtonAutomationProperties(const winrt::Button button, const winrt::IInspectable content);
 
     // The tail is designed as an 8x16 pixel shape, however it is actually a 10x20 shape which is partially occluded by the tip content.
     // This is done to get the border of the tip to follow the tail shape without drawing the border on the tip edge of the tail.

diff --git a/dev/TeachingTip/TeachingTip.xaml b/dev/TeachingTip/TeachingTip.xaml
@@ -393,7 +393,7 @@
                                                             Style="{TemplateBinding ActionButtonStyle}" 
                                                             Command="{TemplateBinding ActionButtonCommand}"
                                                             CommandParameter="{TemplateBinding ActionButtonCommandParameter}">
-                                                            <ContentPresenter TextWrapping="WrapWholeWords" Content="{TemplateBinding ActionButtonContent}"/>
+                                                        <ContentPresenter TextWrapping="WrapWholeWords" Content="{TemplateBinding ActionButtonContent}"/>
                                                     </Button>
                                                     <Button x:Name="CloseButton"
                                                             HorizontalAlignment="Stretch"

diff --git a/dev/TeachingTip/TestUI/TeachingTipPage.xaml b/dev/TeachingTip/TestUI/TeachingTipPage.xaml
@@ -285,9 +285,9 @@
                         </ComboBox>
                         <Button AutomationProperties.Name="SetAutomationNameButton" Click="OnSetAutomationNameButtonClicked" Grid.Row="36" Grid.Column="1">Set</Button>
 
-                        <ComboBox x:Name="PageThemeComboBox" AutomationProperties.AutomationId="PageThemeComboBox" Grid.Row="37" SelectedIndex="0"
-                          SelectionChanged="OnPageThemeComboBoxSelectionChanged"
-                          Header="Page Theme:">
+                        <ComboBox x:Name="PageThemeComboBox" AutomationProperties.AutomationId="PageThemeComboBox" SelectedIndex="0" Grid.Column="0"
+                            SelectionChanged="OnPageThemeComboBoxSelectionChanged"
+                            Header="Page Theme:">
                             <ComboBoxItem x:Name="Default">Default</ComboBoxItem>
                             <ComboBoxItem x:Name="Light">Light</ComboBoxItem>
                             <ComboBoxItem x:Name="Dark">Dark</ComboBoxItem>