Accessibility insights for windows app shows error for datagrid- custom column and other columns for name property of focusable element is null

Question

I'm trying to fix the accessibility bugs I found in Accessibility insights for windows app for my desktop application.

Here is my code for datagrid-

                            <controls:DataGrid
                                x:Uid="DataTable"
                                x:Name="detailGrid"
                                Margin="0"
                                VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
                                HorizontalScrollBarVisibility="Visible"
                                VerticalScrollBarVisibility="Visible"
                                AreRowDetailsFrozen="False"
                                AreRowGroupHeadersFrozen="True"
                                AutoGenerateColumns="False"
                                CanUserSortColumns="True"
                                CanUserReorderColumns="True"
                                CanUserResizeColumns="True"
                                ColumnHeaderHeight="28"
                                MaxColumnWidth="500"
                                FrozenColumnCount="0"
                                GridLinesVisibility="None"
                                HeadersVisibility="Column"
                                IsReadOnly="False"     
                                RowDetailsVisibilityMode="Collapsed"
                                SelectionMode="Extended"
                                SelectionChanged="OnDataGridSelectionChanged"
                                RowHeight="25"
                                RowGroupHeaderPropertyNameAlternative="Range"
                                ItemsSource="{x:Bind ViewModel.GridData}" Visibility="{x:Bind ViewModel.IsContentVisible, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}">
                                <controls:DataGrid.Columns>
                                    <controls:DataGridTemplateColumn Header="Name">
                                        <controls:DataGridTemplateColumn.CellTemplate>
                                            <DataTemplate>
                                                <StackPanel Orientation="Horizontal">
                                                    <Image Margin="10,0,0,0" Width="15" Source="../Assets/folder.png" Visibility="{Binding ChildFolder.IsFolder, Converter={StaticResource BoolToVisibilityConverter}}" />
                                                    <Image Margin="10,0,0,0" Width="15" Source="../Assets/file.png" Visibility="{Binding ChildFolder.IsFolder, Converter={StaticResource BoolToInverseVisibilityConverter}}" />
                                                    <HyperlinkButton Height="28" FontFamily="Segoe" Content="{Binding ChildFolder.FolderName}" Margin="0" FontSize="12px" Tapped="onSingleTapped" DoubleTapped="onDoubleTapped" IsDoubleTapEnabled="True" CommandParameter="{Binding ChildFolder}" HorizontalAlignment="Stretch">
                                                    </HyperlinkButton>
                                                </StackPanel>
                                            </DataTemplate>
                                        </controls:DataGridTemplateColumn.CellTemplate>
                                    </controls:DataGridTemplateColumn>
                                    <!--<controls:DataGridTextColumn Binding="{Binding ChildFolder.BlobType}" Header="Blob Type" />-->
                                    <controls:DataGridTextColumn Binding="{Binding ChildFolder.LastModifiedLocal}" Header="Last Modified" />
                                    <controls:DataGridTextColumn Binding="{Binding ChildFolder.ContentTypeDisplay}" Header="Content Type" />
                                    <controls:DataGridTextColumn Binding="{Binding ChildFolder.ContentSize}" Header="Size" />
                                    <controls:DataGridTextColumn Binding="{Binding ChildFolder.LeaseStateString}" Header="Lease State" />

                                </controls:DataGrid.Columns>
                            </controls:DataGrid>

Can someone please let me know how I can fix the above bug as I'm working first time on windows accessibility?

These are the documentation that it asks to refer but I'm not sure how to fix it. https://learn.microsoft.com/en-us/accessibility-tools-docs/items/uwpxaml/customcontrol_localizedcontroltype

https://learn.microsoft.com/en-us/accessibility-tools-docs/items/uwpxaml/customcontrol_name

Answer 1

Based on the screenshot you provide, this error is coming from the LocalizedControlTypeNotCustom rule. It's hard to tell for sure from just the screenshot and the XAML, but I would guess that UWP is creating a custom control based on your data template. If an AT user navigates to the group, then the control type will be read as "Custom", which provides no indication of how to interact with this element. If that's truly the case, then it might be possible to specify the element as a Group by setting the AutomationProperties.Name in the data template.

That's about all I can offer from the information that you've provided. If you can create a minimal repro app, then share it in a gist or a public repo, we can try to shed more light on specific ways to address this.

--Dave Tryon
Accessibility Insights team