Improve narrator screen reader messages of Settings page

This commit is contained in:
Kenny Guo 2021-07-28 18:25:06 +08:00
commit 8da1883eda
8 changed files with 64 additions and 3 deletions

View file

@ -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);
}

View file

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

View file

@ -4723,4 +4723,24 @@
<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>
<data name="LightThemeRadioButton.[using:Windows.UI.Xaml.Automation]AutomationProperties.Name" xml:space="preserve">
<value>Light mode</value>
<comment>Screen reader prompt for the App theme Light mode radio button</comment>
</data>
<data name="DarkThemeRadioButton.[using:Windows.UI.Xaml.Automation]AutomationProperties.Name" xml:space="preserve">
<value>Dark mode</value>
<comment>Screen reader prompt for the App theme Dark mode radio button</comment>
</data>
</root>

View file

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

View file

@ -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,8 @@
<Setter Property="FontSize" Value="{ThemeResource BodyFontSize}"/>
<Setter Property="TextWrapping" Value="Wrap"/>
</Style>
<automation:NarratorNotifier x:Name="NarratorNotifier"/>
</ResourceDictionary>
</UserControl.Resources>
@ -95,9 +97,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 +162,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">

View file

@ -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)
{

View file

@ -47,6 +47,7 @@
</Grid.Transitions>
<Button x:Name="BackButton"
x:Uid="TitleBarBackButton"
Width="44"
Height="32"
Margin="0,0,4,0"
@ -72,6 +73,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"
@ -80,6 +82,7 @@
HorizontalAlignment="Left"
VerticalAlignment="Center"
FontSize="12"
AutomationProperties.AccessibilityView="Raw"
TextTrimming="CharacterEllipsis"/>
</Grid>
</Grid>

View file

@ -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;
};