Skip to content

Commit cb04e7f

Browse files
carlos-zamoracarlos-zamora
committed
a11y check: screen reader, keyboard navigation, FastPass ✅
1 parent 6932db0 commit cb04e7f

File tree

5 files changed

+109
-54
lines changed

5 files changed

+109
-54
lines changed

‎src/cascadia/TerminalSettingsEditor/Extensions.cpp‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,11 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
2525
InitializeComponent();
2626

2727
_extensionPackageIdentifierTemplateSelector = Resources().Lookup(box_value(L"ExtensionPackageIdentifierTemplateSelector")).as<Editor::ExtensionPackageTemplateSelector>();
28+
29+
Automation::AutomationProperties::SetName(ActiveExtensionsList(), RS_(L"Extensions_ActiveExtensionsHeader/Text"));
30+
Automation::AutomationProperties::SetName(ModifiedProfilesList(), RS_(L"Extensions_ModifiedProfilesHeader/Text"));
31+
Automation::AutomationProperties::SetName(AddedProfilesList(), RS_(L"Extensions_AddedProfilesHeader/Text"));
32+
Automation::AutomationProperties::SetName(AddedColorSchemesList(), RS_(L"Extensions_AddedColorSchemesHeader/Text"));
2833
}
2934

3035
void Extensions::OnNavigatedTo(const NavigationEventArgs& e)
@@ -292,6 +297,16 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
292297
return hstring{ fmt::format(FMT_COMPILE(L"{}: {}"), AccessibleName(), RS_(L"Extension_StateDisabled/Text")) };
293298
}
294299

300+
hstring FragmentProfileViewModel::AccessibleName() const noexcept
301+
{
302+
return hstring{ fmt::format(FMT_COMPILE(L"{}, {}"), Profile().Name(), SourceName()) };
303+
}
304+
305+
hstring FragmentColorSchemeViewModel::AccessibleName() const noexcept
306+
{
307+
return hstring{ fmt::format(FMT_COMPILE(L"{}, {}"), ColorSchemeVM().Name(), SourceName()) };
308+
}
309+
295310
DataTemplate ExtensionPackageTemplateSelector::SelectTemplateCore(const IInspectable& item, const DependencyObject& /*container*/)
296311
{
297312
return SelectTemplateCore(item);

‎src/cascadia/TerminalSettingsEditor/Extensions.h‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,7 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
131131
Model::Profile Profile() const { return _deducedProfile; };
132132
hstring SourceName() const { return _fragment.Source(); }
133133
hstring Json() const { return _entry.Json(); }
134+
hstring AccessibleName() const noexcept;
134135

135136
private:
136137
Model::FragmentProfileEntry _entry;
@@ -149,6 +150,7 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
149150
Editor::ColorSchemeViewModel ColorSchemeVM() const { return _deducedSchemeVM; };
150151
hstring SourceName() const { return _fragment.Source(); }
151152
hstring Json() const { return _entry.Json(); }
153+
hstring AccessibleName() const noexcept;
152154

153155
private:
154156
Model::FragmentColorSchemeEntry _entry;

‎src/cascadia/TerminalSettingsEditor/Extensions.idl‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,13 +58,15 @@ namespace Microsoft.Terminal.Settings.Editor
5858
Microsoft.Terminal.Settings.Model.Profile Profile { get; };
5959
String SourceName { get; };
6060
String Json { get; };
61+
String AccessibleName { get; };
6162
}
6263

6364
[default_interface] runtimeclass FragmentColorSchemeViewModel : Windows.UI.Xaml.Data.INotifyPropertyChanged
6465
{
6566
ColorSchemeViewModel ColorSchemeVM { get; };
6667
String SourceName { get; };
6768
String Json { get; };
69+
String AccessibleName { get; };
6870
}
6971

7072
[default_interface] runtimeclass ExtensionPackageTemplateSelector : Windows.UI.Xaml.Controls.DataTemplateSelector

‎src/cascadia/TerminalSettingsEditor/Extensions.xaml‎

Lines changed: 79 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@
3333

3434
<Style x:Key="CodeBlockScrollViewerStyle"
3535
TargetType="ScrollViewer">
36+
<Setter Property="AutomationProperties.AccessibilityView" Value="Raw" />
3637
<Setter Property="HorizontalScrollMode" Value="Auto" />
3738
<Setter Property="HorizontalScrollBarVisibility" Value="Auto" />
3839
<Setter Property="VerticalScrollMode" Value="Disabled" />
@@ -133,39 +134,52 @@
133134

134135
<DataTemplate x:Key="FragmentProfileViewModelTemplate"
135136
x:DataType="local:FragmentProfileViewModel">
136-
<local:SettingContainer CurrentValue="{x:Bind SourceName, Mode=OneWay}"
137-
Style="{StaticResource ExpanderSettingContainerStyle}">
138-
<local:SettingContainer.Header>
139-
<StackPanel Orientation="Horizontal">
140-
<IconSourceElement Width="16"
141-
Height="16"
142-
Margin="0,0,8,0"
143-
IconSource="{x:Bind mtu:IconPathConverter.IconSourceWUX(Profile.EvaluatedIcon), Mode=OneWay}" />
144-
145-
<TextBlock Text="{x:Bind Profile.Name, Mode=OneWay}" />
146-
147-
<Button x:Name="NavigateToProfileButton"
148-
x:Uid="Extensions_NavigateToProfileButton"
149-
Click="NavigateToProfile_Click"
150-
Style="{StaticResource SettingContainerResetButtonStyle}"
151-
Tag="{x:Bind Profile.Guid}">
152-
<FontIcon Glyph="&#xE8A7;"
153-
Style="{StaticResource SettingContainerFontIconStyle}" />
154-
</Button>
155-
</StackPanel>
156-
</local:SettingContainer.Header>
157-
<local:SettingContainer.Content>
137+
<muxc:Expander AutomationProperties.Name="{x:Bind AccessibleName}"
138+
Style="{StaticResource ExpanderStyle}">
139+
<muxc:Expander.Header>
140+
<Grid>
141+
<Grid.ColumnDefinitions>
142+
<ColumnDefinition Width="*" />
143+
<ColumnDefinition Width="Auto" />
144+
</Grid.ColumnDefinitions>
145+
146+
<StackPanel Grid.Column="0"
147+
Orientation="Horizontal">
148+
<IconSourceElement Width="16"
149+
Height="16"
150+
Margin="0,0,8,0"
151+
IconSource="{x:Bind mtu:IconPathConverter.IconSourceWUX(Profile.EvaluatedIcon), Mode=OneWay}" />
152+
153+
<TextBlock Text="{x:Bind Profile.Name, Mode=OneWay}" />
154+
155+
<Button x:Name="NavigateToProfileButton"
156+
x:Uid="Extensions_NavigateToProfileButton"
157+
Click="NavigateToProfile_Click"
158+
Style="{StaticResource SettingContainerResetButtonStyle}"
159+
Tag="{x:Bind Profile.Guid}">
160+
<FontIcon Glyph="&#xE8A7;"
161+
Style="{StaticResource SettingContainerFontIconStyle}" />
162+
</Button>
163+
</StackPanel>
164+
165+
<TextBlock Grid.Column="1"
166+
Style="{StaticResource SettingContainerCurrentValueTextBlockStyle}"
167+
Text="{x:Bind SourceName}" />
168+
</Grid>
169+
</muxc:Expander.Header>
170+
<muxc:Expander.Content>
158171
<ScrollViewer Style="{StaticResource CodeBlockScrollViewerStyle}">
159172
<TextBlock Style="{StaticResource CodeBlockStyle}"
160173
Text="{x:Bind Json, Mode=OneWay}" />
161174
</ScrollViewer>
162-
</local:SettingContainer.Content>
163-
</local:SettingContainer>
175+
</muxc:Expander.Content>
176+
</muxc:Expander>
164177
</DataTemplate>
165178

166179
<!-- This styling matches that of ExpanderSettingContainerStyle for consistency -->
167180
<Style x:Key="ExpanderStyle"
168181
TargetType="muxc:Expander">
182+
<Setter Property="MaxWidth" Value="1000" />
169183
<Setter Property="MinHeight" Value="64" />
170184
<Setter Property="Margin" Value="0,4,0,0" />
171185
<Setter Property="HorizontalAlignment" Value="Stretch" />
@@ -321,29 +335,41 @@
321335

322336
<DataTemplate x:Key="FragmentColorSchemeViewModelTemplate"
323337
x:DataType="local:FragmentColorSchemeViewModel">
324-
<local:SettingContainer CurrentValue="{x:Bind SourceName, Mode=OneWay}"
325-
Style="{StaticResource ExpanderSettingContainerStyle}">
326-
<local:SettingContainer.Header>
327-
<StackPanel Orientation="Horizontal">
328-
<ContentPresenter Content="{x:Bind ColorSchemeVM, Mode=OneWay}"
329-
ContentTemplate="{StaticResource ColorSchemeVMTemplate}" />
330-
<Button x:Name="NavigateToColorSchemeButton"
331-
x:Uid="Extensions_NavigateToColorSchemeButton"
332-
Click="NavigateToColorScheme_Click"
333-
Style="{StaticResource SettingContainerResetButtonStyle}"
334-
Tag="{x:Bind ColorSchemeVM}">
335-
<FontIcon Glyph="&#xE8A7;"
336-
Style="{StaticResource SettingContainerFontIconStyle}" />
337-
</Button>
338-
</StackPanel>
339-
</local:SettingContainer.Header>
340-
<local:SettingContainer.Content>
338+
<muxc:Expander AutomationProperties.Name="{x:Bind AccessibleName}"
339+
Style="{StaticResource ExpanderStyle}">
340+
<muxc:Expander.Header>
341+
<Grid>
342+
<Grid.ColumnDefinitions>
343+
<ColumnDefinition Width="*" />
344+
<ColumnDefinition Width="Auto" />
345+
</Grid.ColumnDefinitions>
346+
347+
<StackPanel Grid.Column="0"
348+
Orientation="Horizontal">
349+
<ContentPresenter Content="{x:Bind ColorSchemeVM, Mode=OneWay}"
350+
ContentTemplate="{StaticResource ColorSchemeVMTemplate}" />
351+
<Button x:Name="NavigateToColorSchemeButton"
352+
x:Uid="Extensions_NavigateToColorSchemeButton"
353+
Click="NavigateToColorScheme_Click"
354+
Style="{StaticResource SettingContainerResetButtonStyle}"
355+
Tag="{x:Bind ColorSchemeVM}">
356+
<FontIcon Glyph="&#xE8A7;"
357+
Style="{StaticResource SettingContainerFontIconStyle}" />
358+
</Button>
359+
</StackPanel>
360+
361+
<TextBlock Grid.Column="1"
362+
Style="{StaticResource SettingContainerCurrentValueTextBlockStyle}"
363+
Text="{x:Bind SourceName}" />
364+
</Grid>
365+
</muxc:Expander.Header>
366+
<muxc:Expander.Content>
341367
<ScrollViewer Style="{StaticResource CodeBlockScrollViewerStyle}">
342368
<TextBlock Style="{StaticResource CodeBlockStyle}"
343369
Text="{x:Bind Json, Mode=OneWay}" />
344370
</ScrollViewer>
345-
</local:SettingContainer.Content>
346-
</local:SettingContainer>
371+
</muxc:Expander.Content>
372+
</muxc:Expander>
347373
</DataTemplate>
348374
</ResourceDictionary>
349375
</Page.Resources>
@@ -367,9 +393,11 @@
367393
<TextBlock x:Uid="Extensions_NoActiveExtensionsDisclaimer"
368394
Style="{StaticResource ItalicDisclaimerStyle}"
369395
Visibility="{x:Bind ViewModel.NoExtensionPackages, Mode=OneWay}" />
370-
<ItemsControl IsTabStop="False"
396+
<ItemsControl x:Name="ActiveExtensionsList"
397+
IsTabStop="False"
371398
ItemTemplateSelector="{StaticResource ExtensionPackageNavigatorTemplateSelector}"
372-
ItemsSource="{x:Bind ViewModel.ExtensionPackages}" />
399+
ItemsSource="{x:Bind ViewModel.ExtensionPackages}"
400+
XYFocusKeyboardNavigation="Enabled" />
373401
</StackPanel>
374402

375403
<!-- [Extension View Only] -->
@@ -430,7 +458,8 @@
430458
<TextBlock x:Uid="Extensions_NoModifiedProfilesDisclaimer"
431459
Style="{StaticResource ItalicDisclaimerStyle}"
432460
Visibility="{x:Bind ViewModel.NoProfilesModified, Mode=OneWay}" />
433-
<ItemsControl IsTabStop="False"
461+
<ItemsControl x:Name="ModifiedProfilesList"
462+
IsTabStop="False"
434463
ItemTemplate="{StaticResource FragmentProfileViewModelTemplate}"
435464
ItemsSource="{x:Bind ViewModel.ProfilesModified, Mode=OneWay}" />
436465
</StackPanel>
@@ -442,7 +471,8 @@
442471
<TextBlock x:Uid="Extensions_NoAddedProfilesDisclaimer"
443472
Style="{StaticResource ItalicDisclaimerStyle}"
444473
Visibility="{x:Bind ViewModel.NoProfilesAdded, Mode=OneWay}" />
445-
<ItemsControl IsTabStop="False"
474+
<ItemsControl x:Name="AddedProfilesList"
475+
IsTabStop="False"
446476
ItemTemplate="{StaticResource FragmentProfileViewModelTemplate}"
447477
ItemsSource="{x:Bind ViewModel.ProfilesAdded, Mode=OneWay}" />
448478
</StackPanel>
@@ -454,7 +484,8 @@
454484
<TextBlock x:Uid="Extensions_NoAddedColorSchemesDisclaimer"
455485
Style="{StaticResource ItalicDisclaimerStyle}"
456486
Visibility="{x:Bind ViewModel.NoSchemesAdded, Mode=OneWay}" />
457-
<ItemsControl IsTabStop="False"
487+
<ItemsControl x:Name="AddedColorSchemesList"
488+
IsTabStop="False"
458489
ItemTemplate="{StaticResource FragmentColorSchemeViewModelTemplate}"
459490
ItemsSource="{x:Bind ViewModel.ColorSchemesAdded, Mode=OneWay}" />
460491
</StackPanel>

‎src/cascadia/TerminalSettingsEditor/SettingContainerStyle.xaml‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -179,13 +179,18 @@
179179
<Setter Property="FontFamily" Value="Segoe UI, Segoe Fluent Icons, Segoe MDL2 Assets" />
180180
</Style>
181181

182+
<Style x:Key="SettingContainerCurrentValueTextBlockStyle"
183+
BasedOn="{StaticResource SettingsPageItemDescriptionStyle}"
184+
TargetType="TextBlock">
185+
<Setter Property="MaxWidth" Value="250" />
186+
<Setter Property="Margin" Value="0,0,-16,0" />
187+
<Setter Property="HorizontalAlignment" Value="Right" />
188+
<Setter Property="VerticalAlignment" Value="Center" />
189+
<Setter Property="FontFamily" Value="Segoe UI, Segoe Fluent Icons, Segoe MDL2 Assets" />
190+
</Style>
191+
182192
<DataTemplate x:Key="ExpanderSettingContainerStringPreviewTemplate">
183-
<TextBlock MaxWidth="250"
184-
Margin="0,0,-16,0"
185-
HorizontalAlignment="Right"
186-
VerticalAlignment="Center"
187-
FontFamily="Segoe UI, Segoe Fluent Icons, Segoe MDL2 Assets"
188-
Style="{StaticResource SettingsPageItemDescriptionStyle}"
193+
<TextBlock Style="{StaticResource SettingContainerCurrentValueTextBlockStyle}"
189194
Text="{Binding}" />
190195
</DataTemplate>
191196

0 commit comments

Comments
 (0)