Merge pull request #455 from United600/a11y

feat: improve screen reader support and general accessibility
huynhsontung · Oct 7, 2024 · 50e0ff2 · 50e0ff2
2 parents 2d5a325 + 2568710
commit 50e0ff2
Show file tree

Hide file tree

Showing 18 changed files with 1,420 additions and 435 deletions.
diff --git a/ThirdPartyNotices.md → NOTICE.md b/ThirdPartyNotices.md → NOTICE.md
diff --git a/Screenbox.sln b/Screenbox.sln
@@ -12,9 +12,9 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Solution Items", "Solution
 		crowdin.yml = crowdin.yml
 		LICENSE = LICENSE
 		nuget.config = nuget.config
+		NOTICE.md = NOTICE.md
 		PRIVACY.md = PRIVACY.md
 		README.md = README.md
-		ThirdPartyNotices.md = ThirdPartyNotices.md
 	EndProjectSection
 EndProject
 Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Screenbox.Core", "Screenbox.Core\Screenbox.Core.csproj", "{46D79C78-F483-4319-A3D1-9D837A135BEF}"

diff --git a/Screenbox/Assets/Fonts/ScreenboxFluentIcons.ttf b/Screenbox/Assets/Fonts/ScreenboxFluentIcons.ttf
diff --git a/Screenbox/Assets/Fonts/ScreenboxMDL2Assets.ttf b/Screenbox/Assets/Fonts/ScreenboxMDL2Assets.ttf
diff --git a/Screenbox/Controls/LivelyWallpaperSelector.xaml b/Screenbox/Controls/LivelyWallpaperSelector.xaml
@@ -6,6 +6,8 @@
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:models="using:Screenbox.Core.Models"
     xmlns:strings="using:Screenbox.Strings"
+    d:DesignHeight="300"
+    d:DesignWidth="300"
     Loaded="LivelyWallpaperSelector_OnLoaded"
     mc:Ignorable="d">
 
@@ -17,61 +19,80 @@
     </UserControl.Resources>
 
     <Grid x:Name="LayoutRoot">
-        <StackPanel>
-            <GridView
-                IsItemClickEnabled="True"
-                ItemsSource="{x:Bind ViewModel.Visualizers}"
-                SelectedItem="{x:Bind ViewModel.SelectedVisualizer, Mode=TwoWay}"
-                SelectionMode="Single">
-                <GridView.ItemTemplate>
-                    <DataTemplate x:DataType="models:LivelyWallpaperModel">
-                        <Grid
-                            Width="100"
-                            Height="80"
-                            Margin="2"
-                            Background="Transparent"
-                            BorderBrush="{ThemeResource ControlElevationBorderBrush}"
-                            BorderThickness="1"
-                            CornerRadius="2"
-                            ToolTipService.ToolTip="{x:Bind Model.Title}">
-                            <Grid.ContextFlyout>
-                                <MenuFlyout>
-                                    <MenuFlyoutItem Command="{StaticResource DeleteVisualizerCommand}" CommandParameter="{x:Bind}" />
-                                </MenuFlyout>
-                            </Grid.ContextFlyout>
-                            <Border CornerRadius="2">
-                                <Image
-                                    HorizontalAlignment="Center"
-                                    VerticalAlignment="Center"
-                                    Source="{Binding PreviewPath}"
-                                    Stretch="UniformToFill" />
-                            </Border>
-                            <Border
-                                Margin="2"
-                                Padding="2"
-                                HorizontalAlignment="Right"
-                                VerticalAlignment="Bottom"
-                                Background="Transparent"
-                                ToolTipService.ToolTip="{strings:Resources Key=PoweredByLivelyWallpaper}"
-                                Visibility="{x:Bind Path, Converter={StaticResource StringVisibilityConverter}}">
-                                <Image
-                                    Width="15"
-                                    Height="15"
-                                    HorizontalAlignment="Center"
-                                    VerticalAlignment="Center"
-                                    Source="ms-appx:///Assets/LivelyWallpaper100x100Logo.png" />
-                            </Border>
-                        </Grid>
-                    </DataTemplate>
-                </GridView.ItemTemplate>
-            </GridView>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="Auto" />
+            <RowDefinition Height="*" />
+        </Grid.RowDefinitions>
+
+        <Grid
+            MinHeight="48"
+            BorderBrush="{ThemeResource SystemControlForegroundTransparentBrush}"
+            BorderThickness="{StaticResource CommandBarOverflowPresenterBorderDownThickness}"
+            Visibility="{x:Bind HeaderVisibility}">
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="*" />
+                <ColumnDefinition Width="Auto" />
+            </Grid.ColumnDefinitions>
+
+            <TextBlock
+                x:Name="HeaderText"
+                Padding="16,0,4,0"
+                VerticalAlignment="Center"
+                Style="{StaticResource BodyTextBlockStyle}"
+                Text="{strings:Resources Key=Visuals}" />
             <!--  Let user select new wallpaper to install  -->
             <Button
-                Margin="0,6,0,0"
-                HorizontalAlignment="Stretch"
+                Grid.Column="1"
+                Margin="0,0,16,0"
+                Padding="8,2,8,3"
                 Command="{x:Bind ViewModel.BrowseVisualizerCommand}"
                 Content="{strings:Resources Key=BrowseFiles}"
-                Visibility="{x:Bind ShowAddButton}" />
-        </StackPanel>
+                FontSize="{StaticResource CaptionTextBlockFontSize}" />
+        </Grid>
+
+        <GridView
+            Grid.Row="1"
+            Padding="{x:Bind Padding, Mode=OneWay}"
+            IsItemClickEnabled="True"
+            ItemsSource="{x:Bind ViewModel.Visualizers}"
+            SelectedItem="{x:Bind ViewModel.SelectedVisualizer, Mode=TwoWay}"
+            SelectionMode="Single">
+            <GridView.ItemTemplate>
+                <DataTemplate x:DataType="models:LivelyWallpaperModel">
+                    <Grid
+                        Width="112"
+                        Height="96"
+                        CornerRadius="{StaticResource GridViewItemCornerRadius}"
+                        ToolTipService.ToolTip="{x:Bind Model.Title}">
+                        <Grid.Background>
+                            <ImageBrush ImageSource="{Binding PreviewPath}" Stretch="UniformToFill" />
+                        </Grid.Background>
+                        <Grid.ContextFlyout>
+                            <MenuFlyout>
+                                <MenuFlyoutItem Command="{StaticResource DeleteVisualizerCommand}" CommandParameter="{x:Bind}" />
+                            </MenuFlyout>
+                        </Grid.ContextFlyout>
+
+                        <Border
+                            Width="24"
+                            Height="24"
+                            Margin="0,4,4,0"
+                            HorizontalAlignment="Right"
+                            VerticalAlignment="Top"
+                            Background="{ThemeResource AcrylicInAppFillColorDefaultBrush}"
+                            BorderBrush="{ThemeResource ControlStrokeColorForStrongFillWhenOnImageBrush}"
+                            BorderThickness="1"
+                            CornerRadius="{StaticResource GridViewItemCornerRadius}"
+                            ToolTipService.ToolTip="{strings:Resources Key=PoweredByLivelyWallpaper}"
+                            Visibility="{x:Bind Path, Converter={StaticResource StringVisibilityConverter}}">
+                            <Image
+                                Width="16"
+                                Height="16"
+                                Source="ms-appx:///Assets/LivelyWallpaper100x100Logo.png" />
+                        </Border>
+                    </Grid>
+                </DataTemplate>
+            </GridView.ItemTemplate>
+        </GridView>
     </Grid>
 </UserControl>
diff --git a/Screenbox/Controls/LivelyWallpaperSelector.xaml.cs b/Screenbox/Controls/LivelyWallpaperSelector.xaml.cs
@@ -11,7 +11,7 @@ namespace Screenbox.Controls;
 // Source: https://github.com/rocksdanister/lively
 public sealed partial class LivelyWallpaperSelector : UserControl
 {
-    public bool ShowAddButton { get; set; } = true;
+    public Visibility HeaderVisibility { get; set; } = Visibility.Collapsed;
 
     internal LivelyWallpaperSelectorViewModel ViewModel => (LivelyWallpaperSelectorViewModel)DataContext;
 

diff --git a/Screenbox/Controls/PlayerControls.xaml b/Screenbox/Controls/PlayerControls.xaml
@@ -13,8 +13,8 @@
     xmlns:strings="using:Screenbox.Strings"
     xmlns:toolkitConverters="using:CommunityToolkit.WinUI.Converters"
     xmlns:ui="using:CommunityToolkit.WinUI"
-    d:DesignHeight="300"
-    d:DesignWidth="400"
+    d:DesignHeight="128"
+    d:DesignWidth="1200"
     mc:Ignorable="d">
 
     <UserControl.Resources>
@@ -40,8 +40,13 @@
                 TrueValue="&#xE8B1;" />
 
             <Flyout x:Key="VolumeControlFlyout">
+                <Flyout.FlyoutPresenterStyle>
+                    <Style BasedOn="{StaticResource DefaultFlyoutPresenterStyle}" TargetType="FlyoutPresenter">
+                        <Setter Property="Padding" Value="6,7,6,9" />
+                    </Style>
+                </Flyout.FlyoutPresenterStyle>
                 <controls:VolumeControl
-                    Width="200"
+                    Width="212"
                     IsAccessKeyScope="True"
                     ToggleButtonStyle="{StaticResource SmallPlayerToggleButtonStyle}" />
             </Flyout>
@@ -373,6 +378,7 @@
                 Margin="0,0,4,0"
                 controls:AcceleratorService.ToolTip="{x:Bind ViewModel.IsPlaying, Converter={StaticResource BoolToPlayPauseTextConverter}, Mode=OneWay}"
                 AccessKey="{strings:KeyboardResources Key=PlayerPlayPauseKey}"
+                AutomationProperties.Name="{x:Bind PlayPauseButton.(controls:AcceleratorService.ToolTip), Mode=OneWay}"
                 Command="{x:Bind ViewModel.PlayPauseCommand}"
                 Style="{StaticResource PlayerButtonStyle}">
                 <FontIcon Glyph="{x:Bind ViewModel.IsPlaying, Converter={StaticResource PlayPauseGlyphConverter}, Mode=OneWay}" />
@@ -387,6 +393,7 @@
                 x:Name="PreviousButton"
                 controls:AcceleratorService.ToolTip="{x:Bind strings:Resources.Previous}"
                 AccessKey="{strings:KeyboardResources Key=PlayerPreviousKey}"
+                AutomationProperties.Name="{x:Bind PreviousButton.(controls:AcceleratorService.ToolTip), Mode=OneWay}"
                 Command="{x:Bind ViewModel.Playlist.PreviousCommand}"
                 CornerRadius="{Binding Source={StaticResource ControlCornerRadius}, Converter={StaticResource LeftCornerRadiusFilterConverter}}"
                 Style="{StaticResource PlayerButtonStyle}">
@@ -399,6 +406,7 @@
                 x:Name="NextButton"
                 controls:AcceleratorService.ToolTip="{x:Bind strings:Resources.Next}"
                 AccessKey="{strings:KeyboardResources Key=PlayerNextKey}"
+                AutomationProperties.Name="{x:Bind NextButton.(controls:AcceleratorService.ToolTip), Mode=OneWay}"
                 Command="{x:Bind ViewModel.Playlist.NextCommand}"
                 CornerRadius="{Binding Source={StaticResource ControlCornerRadius}, Converter={StaticResource RightCornerRadiusFilterConverter}}"
                 Style="{StaticResource PlayerButtonStyle}">
@@ -431,6 +439,7 @@
                 Margin="0,0,4,0"
                 controls:AcceleratorService.ToolTip="{x:Bind strings:Resources.Volume}"
                 AccessKey="{strings:KeyboardResources Key=PlayerVolumeButtonSliderKey}"
+                AutomationProperties.Name="{x:Bind VolumeButton.(controls:AcceleratorService.ToolTip), Mode=OneWay}"
                 FlowDirection="{x:Bind FlowDirection}"
                 Flyout="{StaticResource VolumeControlFlyout}"
                 IsEnabled="{x:Bind IsEnabled, Mode=OneWay}"
@@ -453,6 +462,7 @@
                 Margin="0,0,4,0"
                 controls:AcceleratorService.ToolTip="{x:Bind strings:Resources.ShuffleMode(ViewModel.Playlist.ShuffleMode), Mode=OneWay}"
                 AccessKey="{strings:KeyboardResources Key=PlayerShuffleKey}"
+                AutomationProperties.Name="{x:Bind ShuffleButton.(controls:AcceleratorService.ToolTip), Mode=OneWay}"
                 IsChecked="{x:Bind ViewModel.Playlist.ShuffleMode, Mode=TwoWay}"
                 IsEnabled="{x:Bind IsEnabled, Mode=OneWay}"
                 Style="{StaticResource PlayerToggleButtonStyle}">
@@ -467,6 +477,7 @@
                 Margin="0,0,4,0"
                 controls:AcceleratorService.ToolTip="{x:Bind strings:Resources.RepeatMode(ViewModel.Playlist.RepeatMode), Mode=OneWay}"
                 AccessKey="{strings:KeyboardResources Key=PlayerRepeatKey}"
+                AutomationProperties.Name="{x:Bind RepeatButton.(controls:AcceleratorService.ToolTip), Mode=OneWay}"
                 IsChecked="{x:Bind ViewModel.Playlist.RepeatMode, Converter={StaticResource ToggleButtonCheckToRepeatModeConverter}, Mode=TwoWay}"
                 IsEnabled="{x:Bind IsEnabled, Mode=OneWay}"
                 IsThreeState="True"
@@ -482,6 +493,7 @@
                 Margin="0,0,4,0"
                 controls:AcceleratorService.ToolTip="{x:Bind strings:Resources.AudioAndCaption}"
                 AccessKey="{strings:KeyboardResources Key=PlayerAudioAndCaptionsKey}"
+                AutomationProperties.Name="{x:Bind AudioAndCaptionButton.(controls:AcceleratorService.ToolTip), Mode=OneWay}"
                 FlowDirection="{x:Bind FlowDirection}"
                 IsEnabled="{x:Bind IsEnabled, Mode=OneWay}"
                 Style="{StaticResource PlayerButtonStyle}">
@@ -513,6 +525,7 @@
                 Margin="0,0,4,0"
                 controls:AcceleratorService.ToolTip="{x:Bind strings:Resources.CompactOverlayToggle(ViewModel.IsCompact), Mode=OneWay}"
                 AccessKey="{strings:KeyboardResources Key=PlayerCompactOverlayKey}"
+                AutomationProperties.Name="{x:Bind CompactOverlayButton.(controls:AcceleratorService.ToolTip), Mode=OneWay}"
                 Command="{x:Bind ViewModel.ToggleCompactLayoutCommand}"
                 Style="{StaticResource PlayerButtonStyle}"
                 Visibility="{x:Bind helpers:SystemInformation.IsDesktop}">
@@ -531,6 +544,7 @@
                 Margin="0,0,4,0"
                 controls:AcceleratorService.ToolTip="{x:Bind strings:Resources.FullscreenToggle(ViewModel.IsFullscreen), Mode=OneWay}"
                 AccessKey="{strings:KeyboardResources Key=PlayerFullscreenKey}"
+                AutomationProperties.Name="{x:Bind FullscreenButton.(controls:AcceleratorService.ToolTip), Mode=OneWay}"
                 Command="{x:Bind ViewModel.ToggleFullscreenCommand}"
                 Style="{StaticResource PlayerButtonStyle}"
                 Visibility="{x:Bind helpers:SystemInformation.IsDesktop}">
@@ -544,12 +558,13 @@
             <Button
                 x:Name="MoreButton"
                 AccessKey="{strings:KeyboardResources Key=PlayerMoreKey}"
+                AutomationProperties.Name="{x:Bind MoreButton.(ToolTipService.ToolTip)}"
                 FlowDirection="{x:Bind FlowDirection}"
                 Flyout="{StaticResource NormalPlayerContextMenu}"
                 IsAccessKeyScope="True"
                 IsEnabled="{x:Bind IsEnabled, Mode=OneWay}"
                 Style="{StaticResource PlayerButtonStyle}"
-                ToolTipService.ToolTip="{x:Bind strings:Resources.More}">
+                ToolTipService.ToolTip="{strings:Resources Key=More}">
                 <FontIcon Glyph="&#xE712;" />
             </Button>
         </StackPanel>