Improve narrator messages of Settings page and fix some styles (#1623)

* Improve narrator screen reader messages of Settings page

* Fix hyperlink styles in Settings page

* Fix hover background of navigation buttons in calendar view

src/CalcViewModel/Common/Automation/NarratorAnnouncement.cpp

@@ -30,6 +30,7 @@ namespace CalculatorApp::ViewModel::Common::Automation
         StringReference GraphViewBestFitChanged(L"GraphViewBestFitChanged");
         StringReference AlwaysOnTop(L"AlwaysOnTop");
         StringReference BitShiftRadioButtonContent(L"BitShiftRadioButtonContent");
+        StringReference SettingsPageOpened(L"SettingsPageOpened");
     }
 }
 
@@ -204,3 +205,12 @@ NarratorAnnouncement ^ CalculatorAnnouncement::GetBitShiftRadioButtonCheckedAnno
         AutomationNotificationKind::ActionCompleted,
         AutomationNotificationProcessing::ImportantMostRecent);
 }
+
+NarratorAnnouncement ^ CalculatorAnnouncement::GetSettingsPageOpenedAnnouncement(Platform::String ^ announcement)
+{
+    return ref new NarratorAnnouncement(
+        announcement,
+        CalculatorActivityIds::SettingsPageOpened,
+        AutomationNotificationKind::ActionCompleted,
+        AutomationNotificationProcessing::ImportantMostRecent);
+}

src/CalcViewModel/Common/Automation/NarratorAnnouncement.h

@@ -75,5 +75,7 @@ public
         static NarratorAnnouncement ^ GetAlwaysOnTopChangedAnnouncement(Platform::String ^ announcement);
 
         static NarratorAnnouncement ^ GetBitShiftRadioButtonCheckedAnnouncement(Platform::String ^ announcement);
+
+        static NarratorAnnouncement ^ GetSettingsPageOpenedAnnouncement(Platform::String ^ announcement);
     };
 }

src/Calculator/Resources/en-US/Resources.resw

@@ -4705,11 +4705,11 @@
   </data>
   <data name="SettingsAppThemeTitle.Text" xml:space="preserve">
     <value>App theme</value>
-    <comment>Title of App Theme expender</comment>
+    <comment>Title of App Theme expander</comment>
   </data>
   <data name="SettingsAppThemeDescription.Text" xml:space="preserve">
     <value>Select which app theme to display</value>
-    <comment>Description of App Theme expender</comment>
+    <comment>Description of App Theme expander</comment>
   </data>
   <data name="LightThemeRadioButton.Content" xml:space="preserve">
     <value>Light</value>
@@ -4723,4 +4723,16 @@
     <value>Use system setting</value>
     <comment>Lable for the app theme option to use system setting</comment>
   </data>
+  <data name="TitleBarBackButton.[using:Windows.UI.Xaml.Automation]AutomationProperties.Name" xml:space="preserve">
+    <value>Back</value>
+    <comment>Screen reader prompt for the Back button in title bar to back to main page</comment>
+  </data>
+  <data name="SettingsPageOpenedAnnouncement" xml:space="preserve">
+    <value>Settings Page</value>
+    <comment>Announcement used when Settings page is opened</comment>
+  </data>
+  <data name="AppThemeExpander.[using:Windows.UI.Xaml.Automation]AutomationProperties.Name" xml:space="preserve">
+    <value>App theme Setting</value>
+    <comment>Screen reader prompt for the App theme Setting radio buttons group</comment>
+  </data>
 </root>

src/Calculator/Views/DateCalculator.xaml

@@ -30,6 +30,7 @@
                     <StaticResource x:Key="PreviousAndNextButtonForeground" ResourceKey="ControlStrongFillColorDefaultBrush"/>
                     <StaticResource x:Key="ViewsBorderBackground" ResourceKey="LayerOnAcrylicFillColorDefaultBrush"/>
                     <StaticResource x:Key="CalendarPanelBorderBrush" ResourceKey="ControlAltFillColorSecondaryBrush"/>
+                    <StaticResource x:Key="RootBorderBackgroundPointerOverAndPressed" ResourceKey="SubtleFillColorSecondaryBrush"/>
                 </ResourceDictionary>
                 <ResourceDictionary x:Key="HighContrast">
                     <StaticResource x:Key="CalendarViewBackground" ResourceKey="SystemControlBackgroundAltHighBrush"/>
@@ -40,6 +41,7 @@
                     <StaticResource x:Key="PreviousAndNextButtonForeground" ResourceKey="SystemControlHyperlinkBaseMediumHighBrush"/>
                     <StaticResource x:Key="ViewsBorderBackground" ResourceKey="SystemControlBackgroundAltHighBrush"/>
                     <StaticResource x:Key="CalendarPanelBorderBrush" ResourceKey="SystemColorButtonFaceColor"/>
+                    <StaticResource x:Key="RootBorderBackgroundPointerOverAndPressed" ResourceKey="SystemControlTransparentBrush"/>
                 </ResourceDictionary>
                 <ResourceDictionary x:Key="Light">
                     <StaticResource x:Key="CalendarViewBackground" ResourceKey="AcrylicBackgroundFillColorDefaultBrush"/>
@@ -50,6 +52,7 @@
                     <StaticResource x:Key="PreviousAndNextButtonForeground" ResourceKey="ControlStrongFillColorDefaultBrush"/>
                     <StaticResource x:Key="ViewsBorderBackground" ResourceKey="LayerOnAcrylicFillColorDefaultBrush"/>
                     <StaticResource x:Key="CalendarPanelBorderBrush" ResourceKey="ControlAltFillColorTertiaryBrush"/>
+                    <StaticResource x:Key="RootBorderBackgroundPointerOverAndPressed" ResourceKey="SubtleFillColorSecondaryBrush"/>
                 </ResourceDictionary>
             </ResourceDictionary.ThemeDictionaries>
 
@@ -421,21 +424,7 @@
                                                                 contract7Present:BackgroundSizing="{TemplateBinding BackgroundSizing}"
                                                                 contract7Present:CornerRadius="{TemplateBinding CornerRadius}"
                                                                 AutomationProperties.AccessibilityView="Raw">
-                                                            <Border.Resources>
+
-                                                                <ResourceDictionary>
-                                                                    <ResourceDictionary.ThemeDictionaries>
-                                                                        <ResourceDictionary x:Key="Default">
-                                                                            <StaticResource x:Key="RootBorderBackgroundPointerOverAndPressed" ResourceKey="SubtleFillColorSecondaryBrush"/>
-                                                                        </ResourceDictionary>
-                                                                        <ResourceDictionary x:Key="Light">
-                                                                            <StaticResource x:Key="RootBorderBackgroundPointerOverAndPressed" ResourceKey="SubtleFillColorSecondaryBrush"/>
-                                                                        </ResourceDictionary>
-                                                                        <ResourceDictionary x:Key="HighContrast">
-                                                                            <StaticResource x:Key="RootBorderBackgroundPointerOverAndPressed" ResourceKey="SystemControlTransparentBrush"/>
-                                                                        </ResourceDictionary>
-                                                                    </ResourceDictionary.ThemeDictionaries>
-                                                                </ResourceDictionary>
-                                                            </Border.Resources>
                                                             <VisualStateManager.VisualStateGroups>
                                                                 <VisualStateGroup x:Name="CommonStates">
                                                                     <VisualState x:Name="Normal"/>

src/Calculator/Views/MainPage.xaml

@@ -157,6 +157,7 @@
         </muxc:NavigationView>
 
         <Popup x:Name="Popup"
+               AutomationProperties.AccessibilityView="Raw"
                Closed="Popup_Closed"
                HorizontalOffset="0"
                IsLightDismissEnabled="False"

src/Calculator/Views/Settings.xaml

@@ -1,6 +1,7 @@
 <UserControl x:Class="CalculatorApp.Settings"
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:automation="using:CalculatorApp.ViewModel.Common.Automation"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:local="using:CalculatorApp"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
@@ -9,7 +10,6 @@
              Unloaded="OnUnloaded"
              mc:Ignorable="d">
 
-
     <UserControl.Resources>
         <ResourceDictionary>
             <Style x:Key="SettingsContentScrollViewStyle" TargetType="ScrollViewer">
@@ -30,6 +30,12 @@
                 <Setter Property="FontSize" Value="{ThemeResource BodyFontSize}"/>
                 <Setter Property="TextWrapping" Value="Wrap"/>
             </Style>
+
+            <automation:NarratorNotifier x:Name="NarratorNotifier"/>
+
+            <!-- Override default hyperlink button background color -->
+            <StaticResource x:Key="HyperlinkButtonBackgroundPointerOver" ResourceKey="SubtleFillColorTransparentBrush"/>
+            <StaticResource x:Key="HyperlinkButtonBackgroundPressed" ResourceKey="SubtleFillColorTransparentBrush"/>
         </ResourceDictionary>
     </UserControl.Resources>
 
@@ -95,9 +101,12 @@
                     <RowDefinition x:Name="AboutTitleContentRow" Height="*"/>
                 </Grid.RowDefinitions>
 
-                <TextBlock x:Uid="SettingsAppearance" Style="{StaticResource BodyStrongTextBlockStyle}"/>
+                <TextBlock x:Uid="SettingsAppearance"
+                           Style="{StaticResource BodyStrongTextBlockStyle}"
+                           AutomationProperties.HeadingLevel="Level1"/>
 
                 <muxc:Expander x:Name="AppThemeExpander"
+                               x:Uid="AppThemeExpander"
                                Grid.Row="1"
                                Margin="0,8,0,0"
                                HorizontalAlignment="Stretch"
@@ -157,7 +166,8 @@
                     <TextBlock x:Name="AboutGroupTitle"
                                x:Uid="AboutGroupTitle"
                                Margin="0,20,0,0"
-                               Style="{ThemeResource BodyStrongTextBlockStyle}"/>
+                               Style="{ThemeResource BodyStrongTextBlockStyle}"
+                               AutomationProperties.HeadingLevel="Level1"/>
                     <StackPanel Grid.Row="1"
                                 Margin="0,8,0,0"
                                 Orientation="Vertical">
@@ -167,32 +177,38 @@
                                 <LineBreak/>
                                 <Run x:Name="AboutControlCopyrightRun"/>
                             </Paragraph>
-
-                            <Paragraph Margin="0,16,0,0">
-                                <Hyperlink NavigateUri="https://go.microsoft.com/fwlink/?LinkID=529064"
-                                           TextDecorations="None"
-                                           ToolTipService.ToolTip="https://go.microsoft.com/fwlink/?LinkID=529064">
-                                    <Run x:Name="AboutEULA"/>
-                                </Hyperlink>
-                            </Paragraph>
-
-                            <Paragraph Margin="0,16,0,0">
-                                <Hyperlink NavigateUri="https://go.microsoft.com/fwlink/?LinkID=822631"
-                                           TextDecorations="None"
-                                           ToolTipService.ToolTip="https://go.microsoft.com/fwlink/?LinkID=822631">
-                                    <Run x:Name="AboutControlServicesAgreement"/>
-                                </Hyperlink>
-                            </Paragraph>
-
-                            <Paragraph Margin="0,16,0,0">
-                                <Hyperlink NavigateUri="https://go.microsoft.com/fwlink/?LinkID=521839"
-                                           TextDecorations="None"
-                                           ToolTipService.ToolTip="https://go.microsoft.com/fwlink/?LinkID=521839">
-                                    <Run x:Name="AboutControlPrivacyStatement"/>
-                                </Hyperlink>
-                            </Paragraph>
                         </RichTextBlock>
 
+                        <HyperlinkButton x:Name="AboutEULA"
+                                         Margin="0,16,0,0"
+                                         Padding="0"
+                                         NavigateUri="https://go.microsoft.com/fwlink/?LinkID=529064"
+                                         ToolTipService.ToolTip="https://go.microsoft.com/fwlink/?LinkID=529064">
+                            <TextBlock x:Uid="AboutEULA"
+                                       FontSize="{ThemeResource BodyFontSize}"
+                                       TextWrapping="Wrap"/>
+                        </HyperlinkButton>
+
+                        <HyperlinkButton x:Name="AboutControlServicesAgreement"
+                                         Margin="0,16,0,0"
+                                         Padding="0"
+                                         NavigateUri="https://go.microsoft.com/fwlink/?LinkID=822631"
+                                         ToolTipService.ToolTip="https://go.microsoft.com/fwlink/?LinkID=822631">
+                            <TextBlock x:Uid="AboutControlServicesAgreement"
+                                       FontSize="{ThemeResource BodyFontSize}"
+                                       TextWrapping="Wrap"/>
+                        </HyperlinkButton>
+
+                        <HyperlinkButton x:Name="AboutControlPrivacyStatement"
+                                         Margin="0,16,0,0"
+                                         Padding="0"
+                                         NavigateUri="https://go.microsoft.com/fwlink/?LinkID=521839"
+                                         ToolTipService.ToolTip="https://go.microsoft.com/fwlink/?LinkID=521839">
+                            <TextBlock x:Uid="AboutControlPrivacyStatement"
+                                       FontSize="{ThemeResource BodyFontSize}"
+                                       TextWrapping="Wrap"/>
+                        </HyperlinkButton>
+
                         <Button x:Name="FeedbackButton"
                                 x:Uid="FeedbackButton"
                                 MinWidth="120"
@@ -207,13 +223,17 @@
                                    Margin="0,16,0,0"
                                    Style="{StaticResource SettingsRichTextBlockStyle}">
                         <Paragraph>
-                            <Run x:Name="ContributeRunBeforeLink"/>
+                            <!--
-                            <Hyperlink NavigateUri="https://go.microsoft.com/fwlink/?linkid=2099939"
+                                Note: don't put Hyperlink element start to the next line
+                                otherwise unexpected whitespace will be add.
+                            -->
+                            <Run x:Name="ContributeRunBeforeLink"/><Hyperlink Foreground="{x:Bind AboutEULA.Foreground, Mode=OneWay}"
+                                       NavigateUri="https://go.microsoft.com/fwlink/?linkid=2099939"
                                        TextDecorations="None"
-                                       ToolTipService.ToolTip="https://go.microsoft.com/fwlink/?linkid=2099939">
+                                       ToolTipService.ToolTip="https://go.microsoft.com/fwlink/?linkid=2099939"
+                                       UnderlineStyle="None">
                                 <Run x:Name="ContributeRunLink"/>
-                            </Hyperlink>
+                            </Hyperlink><Run x:Name="ContributeRunAfterLink"/>
-                            <Run x:Name="ContributeRunAfterLink"/>
                         </Paragraph>
                     </RichTextBlock>
                 </Grid>

src/Calculator/Views/Settings.xaml.cs

@@ -17,6 +17,7 @@
 using Windows.UI.Xaml.Input;
 using Windows.UI.Xaml.Media;
 using Windows.UI.Xaml.Navigation;
+using CalculatorApp.ViewModel.Common.Automation;
 
 // The User Control item template is documented at https://go.microsoft.com/fwlink/?LinkId=234236
 
@@ -62,12 +63,21 @@ public void SetDefaultFocus()
         // OnLoaded would be invoked by Popup several times while contructed once
         private void OnLoaded(object sender, RoutedEventArgs args)
         {
+            AnnouncePageOpened();
+
             var currentTheme = ThemeHelper.RootTheme.ToString();
             (ThemeRadioButtons.Items.Cast<RadioButton>().FirstOrDefault(c => c?.Tag?.ToString() == currentTheme)).IsChecked = true;
 
             SetDefaultFocus();
         }
 
+        private void AnnouncePageOpened()
+        {
+            string announcementText = AppResourceProvider.GetInstance().GetResourceString("SettingsPageOpenedAnnouncement");
+            NarratorAnnouncement announcement = CalculatorAnnouncement.GetSettingsPageOpenedAnnouncement(announcementText);
+            NarratorNotifier.Announce(announcement);
+        }
+
         // OnUnloaded would be invoked by Popup several times while contructed once
         private void OnUnloaded(object sender, RoutedEventArgs e)
         {
@@ -86,7 +96,6 @@ private void FeedbackButton_Click(object sender, RoutedEventArgs e)
         private void InitializeAboutContentTextBlock()
         {
             SetVersionString();
-            SetContentLinks();
         }
 
         private void SetVersionString()
@@ -96,16 +105,6 @@ private void SetVersionString()
             AboutBuildVersion.Text = appName + " " + version.Major + "." + version.Minor + "." + version.Build + "." + version.Revision;
         }
 
-        private void SetContentLinks()
-        {
-            string eula = AppResourceProvider.GetInstance().GetResourceString(AboutEULA.Name + "/Text");
-            AboutEULA.Text = eula;
-            string agreement = AppResourceProvider.GetInstance().GetResourceString(AboutControlServicesAgreement.Name + "/Text");
-            AboutControlServicesAgreement.Text = agreement;
-            string privacyState = AppResourceProvider.GetInstance().GetResourceString(AboutControlPrivacyStatement.Name + "/Text");
-            AboutControlPrivacyStatement.Text = privacyState;
-        }
-
         private void InitializeContributeTextBlock()
         {
             var resProvider = AppResourceProvider.GetInstance();

src/Calculator/Views/TitleBar.xaml

@@ -48,6 +48,7 @@
             </Grid.Transitions>
 
             <Button x:Name="BackButton"
+                    x:Uid="TitleBarBackButton"
                     Width="44"
                     Height="32"
                     Margin="0,0,4,0"
@@ -74,6 +75,7 @@
                            Height="16"
                            Margin="16,0,0,0"
                            VerticalAlignment="Center"
+                           AutomationProperties.AccessibilityView="Raw"
                            Source="ms-appx:///Assets/CalculatorAppList.png"/>
                     <TextBlock x:Name="AppName"
                                x:Uid="AppName"

src/CalculatorUnitTests/NarratorAnnouncementUnitTests.cpp

@@ -177,6 +177,15 @@ namespace CalculatorUnitTests
             VERIFY_ARE_EQUAL(annoucement->Processing, AutomationNotificationProcessing::ImportantMostRecent);
         }
 
+        TEST_METHOD(TestGetSettingsPageOpenedAnnouncement)
+        {
+            auto annoucement = CalculatorAnnouncement::GetSettingsPageOpenedAnnouncement(m_testAnnouncement);
+            VERIFY_ARE_EQUAL(annoucement->Announcement, m_testAnnouncement);
+            VERIFY_ARE_EQUAL(annoucement->ActivityId, L"SettingsPageOpened");
+            VERIFY_ARE_EQUAL(annoucement->Kind, AutomationNotificationKind::ActionCompleted);
+            VERIFY_ARE_EQUAL(annoucement->Processing, AutomationNotificationProcessing::ImportantMostRecent);
+        }
+
     private:
         static const Platform::StringReference m_testAnnouncement;
     };