Merge pull request #562 from dotnet/improve-a11y-devbalance

Improve accessibility Developer Balance sample app
dotnet · Jan 7, 2025 · aa864c0 · aa864c0
2 parents 97980ef + 1932d0f
commit aa864c0
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 21 deletions.
diff --git a/9.0/Apps/DeveloperBalance/DeveloperBalance/Pages/MainPage.xaml b/9.0/Apps/DeveloperBalance/DeveloperBalance/Pages/MainPage.xaml
@@ -63,7 +63,7 @@
                                 WidthRequest="44"
                                 IsVisible="{Binding HasCompletedTasks}"
                                 Command="{Binding CleanTasksCommand}"
-                                />
+                                SemanticProperties.Description="Clean tasks" />
                         </Grid>
                         <VerticalStackLayout Spacing="15"
                             BindableLayout.ItemsSource="{Binding Tasks}">

diff --git a/9.0/Apps/DeveloperBalance/DeveloperBalance/Pages/ManageMetaPage.xaml b/9.0/Apps/DeveloperBalance/DeveloperBalance/Pages/ManageMetaPage.xaml
@@ -54,49 +54,63 @@
                 <BindableLayout.ItemTemplate>
                     <DataTemplate x:DataType="models:Category">
                         <Grid ColumnSpacing="{StaticResource LayoutSpacing}" ColumnDefinitions="4*,3*,30,Auto">
-                            <Entry Text="{Binding Title}" Grid.Column="0"/>
-                            <Entry Text="{Binding Color}" Grid.Column="1" x:Name="ColorEntry">
+                            <Entry Text="{Binding Title}" Grid.Column="0" SemanticProperties.Description="Title" />
+                            <Entry Text="{Binding Color}" Grid.Column="1" x:Name="ColorEntry"
+                                SemanticProperties.Description="Color"
+                                SemanticProperties.Hint="Category color in HEX format">
                                 <Entry.Behaviors>
                                     <toolkit:TextValidationBehavior 
                                         InvalidStyle="{StaticResource InvalidEntryStyle}"
                                         Flags="ValidateOnUnfocusing"
                                         RegexPattern="^#(?:[0-9a-fA-F]{3}){1,2}$" />
                                 </Entry.Behaviors>
                             </Entry>
+
                             <BoxView HeightRequest="30" WidthRequest="30" VerticalOptions="Center" 
-                                Color="{Binding Text, Source={x:Reference ColorEntry}, x:DataType=Entry}" Grid.Column="2"/>
+                                Color="{Binding Text, Source={x:Reference ColorEntry}, x:DataType=Entry}" Grid.Column="2"
+                                SemanticProperties.HeadingLevel="None" />
+
                             <Button 
                                 ImageSource="{StaticResource IconDelete}"
                                 Background="Transparent"
                                 Command="{Binding DeleteCategoryCommand, Source={RelativeSource AncestorType={x:Type pageModels:ManageMetaPageModel}}, x:DataType=pageModels:ManageMetaPageModel}" CommandParameter="{Binding .}"
-                                Grid.Column="3"/>
+                                Grid.Column="3"
+                                SemanticProperties.Description="Delete" />
                         </Grid>
                     </DataTemplate>
                 </BindableLayout.ItemTemplate>
             </VerticalStackLayout>
 
             <Grid ColumnSpacing="{StaticResource LayoutSpacing}" ColumnDefinitions="*,Auto" Margin="0,10">
-                <Button Text="Save" Command="{Binding SaveCategoriesCommand}" HeightRequest="{OnIdiom 44,Desktop=60}" Grid.Column="0"/>
-                <Button ImageSource="{StaticResource IconAdd}" Command="{Binding AddCategoryCommand}" Grid.Column="1"/>
+                <Button Text="Save" Command="{Binding SaveCategoriesCommand}"
+                    HeightRequest="{OnIdiom 44,Desktop=60}" Grid.Column="0" />
+
+                <Button ImageSource="{StaticResource IconAdd}"
+                    Command="{Binding AddCategoryCommand}" Grid.Column="1"
+                    SemanticProperties.Description="Add" />
             </Grid>
 
-            <Label Text="Tags" Style="{StaticResource Title2}"/>
+            <Label Text="Tags" Style="{StaticResource Title2}" />
             <VerticalStackLayout Spacing="{StaticResource LayoutSpacing}"
                 BindableLayout.ItemsSource="{Binding Tags}">
                 <BindableLayout.ItemTemplate>
                     <DataTemplate x:DataType="models:Tag">
                         <Grid ColumnSpacing="{StaticResource LayoutSpacing}" ColumnDefinitions="4*,3*,30,Auto">
-                            <Entry Text="{Binding Title}" Grid.Column="0"/>
-                            <Entry Text="{Binding Color}" Grid.Column="1" x:Name="ColorEntry">
+                            <Entry Text="{Binding Title}" Grid.Column="0" SemanticProperties.Description="Title" />
+                            <Entry Text="{Binding Color}" Grid.Column="1" x:Name="ColorEntry"
+                                SemanticProperties.Description="Color"
+                                SemanticProperties.Hint="Tag color in HEX format">
                                 <Entry.Behaviors>
                                     <toolkit:TextValidationBehavior 
                                         InvalidStyle="{StaticResource InvalidEntryStyle}"
                                         Flags="ValidateOnUnfocusing"
                                         RegexPattern="^#(?:[0-9a-fA-F]{3}){1,2}$" />
                                 </Entry.Behaviors>
                             </Entry>
+
                             <BoxView HeightRequest="30" WidthRequest="30" VerticalOptions="Center" 
-                                Color="{Binding Text, Source={x:Reference ColorEntry}, x:DataType=Entry}" Grid.Column="2"/>
+                                Color="{Binding Text, Source={x:Reference ColorEntry}, x:DataType=Entry}" Grid.Column="2"
+                                SemanticProperties.HeadingLevel="None" />
 
                             <Button 
                                 ImageSource="{StaticResource IconDelete}"
@@ -109,8 +123,12 @@
             </VerticalStackLayout>
 
             <Grid ColumnSpacing="{StaticResource LayoutSpacing}" ColumnDefinitions="*,Auto" Margin="0,10">
-                <Button Text="Save" Command="{Binding SaveTagsCommand}" HeightRequest="{OnIdiom 44,Desktop=60}" Grid.Column="0"/>
-                <Button ImageSource="{StaticResource IconAdd}" Command="{Binding AddTagCommand}" Grid.Column="1"/>
+                <Button Text="Save" Command="{Binding SaveTagsCommand}"
+                    HeightRequest="{OnIdiom 44,Desktop=60}" Grid.Column="0" />
+
+                <Button ImageSource="{StaticResource IconAdd}"
+                    Command="{Binding AddTagCommand}" Grid.Column="1"
+                    SemanticProperties.Description="Add" />
             </Grid>
         </VerticalStackLayout>
     </ScrollView>

diff --git a/9.0/Apps/DeveloperBalance/DeveloperBalance/Pages/TaskDetailPage.xaml b/9.0/Apps/DeveloperBalance/DeveloperBalance/Pages/TaskDetailPage.xaml
@@ -14,23 +14,25 @@
             Command="{Binding DeleteCommand}"
             Order="Primary"
             Priority="0"
-            IconImageSource="{StaticResource IconDelete}" />
+            IconImageSource="{StaticResource IconDelete}"
+            SemanticProperties.Description="Delete" />
     </ContentPage.ToolbarItems>        
 
     <Grid>
         <ScrollView>
             <VerticalStackLayout Spacing="{StaticResource LayoutSpacing}" Padding="{StaticResource LayoutPadding}">
-                <sf:SfTextInputLayout 
-                    Hint="Task">
+                <sf:SfTextInputLayout Hint="Task">
                     <Entry
-                        Text="{Binding Title}" />
+                        Text="{Binding Title}"
+                        SemanticProperties.Description="Title" />
                 </sf:SfTextInputLayout>
 
-                <sf:SfTextInputLayout 
-                    Hint="Completed">
+                <sf:SfTextInputLayout Hint="Completed">
                     <CheckBox
                         HorizontalOptions="End"
-                        IsChecked="{Binding IsCompleted}" />
+                        IsChecked="{Binding IsCompleted}"
+                        SemanticProperties.Description="Status"
+                        SemanticProperties.Hint="Indicates if this task is completed" />
                 </sf:SfTextInputLayout>
 
                 <sf:SfTextInputLayout 
@@ -40,7 +42,9 @@
                         ItemsSource="{Binding Projects}"
                         ItemDisplayBinding="{Binding Name, x:DataType=models:Project}"
                         SelectedItem="{Binding Project}"
-                        SelectedIndex="{Binding SelectedProjectIndex}" />
+                        SelectedIndex="{Binding SelectedProjectIndex}"
+                        SemanticProperties.Description="Project"
+                        SemanticProperties.Hint="Which project this task belongs to" />
                 </sf:SfTextInputLayout>
 
                 <Button