Fix Accessibility issues of the shortcut guide settings page (#6091)

* set the labeled by property of number box to point to the textblock heading so that 'Press duration before showing (ms)' string is read when the number box is highlighted

* Added comments on the accessibility issues that are dependent on the winui radiobuttons control

* Added information to the shortcut guide image on the right, it previously said only the word graphic
This commit is contained in:
Alekhya 2020-08-24 10:48:45 -07:00 committed by GitHub
parent ff48421e4f
commit 392ca87dab
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 7 deletions

View File

@ -648,6 +648,9 @@
<data name="About_ShortcutGuide.Text" xml:space="preserve">
<value>About Shortcut Guide</value>
</data>
<data name="Shortcut_Guide_Image.AutomationProperties.Name" xml:space="preserve">
<value>Shortcut Guide</value>
</data>
<data name="General_Repository.Text" xml:space="preserve">
<value>GitHub repository</value>
</data>

View File

@ -56,7 +56,8 @@
Style="{StaticResource SettingsGroupTitleStyle}"
Foreground="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToForegroundConverter}}"/>
<TextBlock x:Uid="ShortcutGuide_PressTime"
<TextBlock Name="ShortcutGuide_PressTime"
x:Uid="ShortcutGuide_PressTime"
Margin="{StaticResource SmallTopMargin}"
Foreground="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToForegroundConverter}}"/>
@ -68,7 +69,8 @@
Value="{x:Bind Mode=TwoWay, Path=ViewModel.PressTime}"
IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
SmallChange="50"
LargeChange="100"/>
LargeChange="100"
AutomationProperties.LabeledBy="{Binding ElementName=ShortcutGuide_PressTime}"/>
<StackPanel Orientation="Horizontal" Margin="{StaticResource MediumTopMargin}" Spacing="12">
<Slider x:Uid="ShortcutGuide_OverlayOpacity"
@ -89,14 +91,18 @@
Foreground="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToForegroundConverter}}"/>
</StackPanel>
<TextBlock x:Uid="ShortcutGuide_Theme"
<!-- We cannot navigate to all the radio buttons using the arrow keys because of an XYNavigation issue in the RadioButtons control.
The screen reader does not read the heading when we tab into a radio button, even though the LabeledBy automation property is set.
Link to the issue in the winui repository - https://github.com/microsoft/microsoft-ui-xaml/issues/3156 -->
<TextBlock Name="ShortcutGuide_Theme"
x:Uid="ShortcutGuide_Theme"
Margin="{StaticResource SmallTopMargin}"
Foreground="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToForegroundConverter}}"/>
<muxc:RadioButtons IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
SelectedIndex="{x:Bind Mode=TwoWay, Path=ViewModel.ThemeIndex}"
Margin="{StaticResource HeaderTextTopMargin}">
<RadioButton x:Uid="GeneralPage_Radio_Theme_Dark"/>
Margin="{StaticResource HeaderTextTopMargin}"
AutomationProperties.LabeledBy="{Binding ElementName=ShortcutGuide_Theme}">
<RadioButton x:Uid="GeneralPage_Radio_Theme_Dark" />
<RadioButton x:Uid="GeneralPage_Radio_Theme_Light" />
<RadioButton x:Uid="GeneralPage_Radio_Theme_Default"/>
</muxc:RadioButtons>
@ -124,7 +130,7 @@
HorizontalAlignment="Left"
Margin="{StaticResource SmallTopBottomMargin}"
RelativePanel.Below="DescriptionPanel">
<Image Source="ms-appx:///Assets/Modules/ShortcutGuide.png" />
<Image x:Uid="Shortcut_Guide_Image" Source="ms-appx:///Assets/Modules/ShortcutGuide.png" />
</Border>
<StackPanel x:Name="LinksPanel"