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
2021-07-30 16:30:55 +08:00
parent 2f05d7ebbc
commit 8ebeaa6356
9 changed files with 104 additions and 60 deletions
--- a/src/CalcViewModel/Common/Automation/NarratorAnnouncement.cpp
+++ b/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);
+}
--- a/src/CalcViewModel/Common/Automation/NarratorAnnouncement.h
+++ b/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);
    };
 }
--- a/src/Calculator/Resources/en-US/Resources.resw
+++ b/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>
--- a/src/Calculator/Views/DateCalculator.xaml
+++ b/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"/>
--- a/src/Calculator/Views/MainPage.xaml
+++ b/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"
--- a/src/Calculator/Views/Settings.xaml
+++ b/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>
-                            <Run x:Name="ContributeRunAfterLink"/>
+                            </Hyperlink><Run x:Name="ContributeRunAfterLink"/>
                        </Paragraph>
                    </RichTextBlock>
                </Grid>
--- a/src/Calculator/Views/Settings.xaml.cs
+++ b/src/Calculator/Views/Settings.xaml.cs
@@ -17,6 +17,7 @@ using Windows.UI.Xaml.Data;
 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 @@ namespace CalculatorApp
        // 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 @@ namespace CalculatorApp
        private void InitializeAboutContentTextBlock()
        {
            SetVersionString();
-            SetContentLinks();
        }

        private void SetVersionString()
@@ -96,16 +105,6 @@ namespace CalculatorApp
            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();
--- a/src/Calculator/Views/TitleBar.xaml
+++ b/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"
--- a/src/CalculatorUnitTests/NarratorAnnouncementUnitTests.cpp
+++ b/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;
    };