SettingsCard narrator accessibility is not reliable

[Diegorro98]

Describe the bug

When using the narrator on an app with SettingCards no clickable and with a controls in the content, the narrator behaves differently depending on the control used and if it is inside a Grid or a StackPanel (maybe there are other layouts also, but haven't tested)

Here it is an example of the different behaviors:

<StackPanel Spacing="4"
            AutomationProperties.Name="Accessibility Test">
    <controls:SettingsCard Description="When the ToggleSwitch is selected, the narrator will read 'Accessibility test group, ToggleSwitch SettingsCard, toggle switch off'. This control works right"
                            Header="ToggleSwitch SettingsCard"
                            HeaderIcon="{ui:FontIcon Glyph=&#xE713;}">
        <ToggleSwitch />
    </controls:SettingsCard>

    <controls:SettingsCard Description="When the ToggleSwitch is selected, the narrator will read 'Grid and ToggleSwitch SettingsCard group, toggle switch off', 'Accessibility Test group' is missing"
                            Header="Grid and ToggleSwitch SettingsCard"
                            HeaderIcon="{ui:FontIcon Glyph=&#xE713;}">
        <Grid>
            <ToggleSwitch />
        </Grid>
    </controls:SettingsCard>

    <controls:SettingsCard Description="When the ComboBox is selected, the narrator will read 'Accessibility Test group, ComboBox SettingsCard, option 1 ComboBox, collapsed'. This control works right"
                            Header="ComboBox SettingsCard"
                            HeaderIcon="{ui:FontIcon Glyph=&#xE713;}">
        <ComboBox SelectedIndex="0">
            <ComboBoxItem>Option 1</ComboBoxItem>
            <ComboBoxItem>Option 2</ComboBoxItem>
            <ComboBoxItem>Option 3</ComboBoxItem>
        </ComboBox>
    </controls:SettingsCard>

    <controls:SettingsCard Description="When the ComboBox is selected, the narrator will read 'Grid and ComboBox SettingsCard, option 1 ComboBox, collapsed', 'Accessibility Test group' is missing"
                            Header="Grid and ComboBox SettingsCard"
                            HeaderIcon="{ui:FontIcon Glyph=&#xE713;}">
        <Grid>
            <ComboBox SelectedIndex="0">
                <ComboBoxItem>Option 1</ComboBoxItem>
                <ComboBoxItem>Option 2</ComboBoxItem>
                <ComboBoxItem>Option 3</ComboBoxItem>
            </ComboBox>
        </Grid>
    </controls:SettingsCard>

    <controls:SettingsCard Description="When the Button is selected, the narrator will read 'Content button', 'Accessibility Test group' and 'Button SettingsCard' are missing"
                            Header="Button SettingsCard"
                            HeaderIcon="{ui:FontIcon Glyph=&#xE713;}">
        <Button Content="Content"/>
    </controls:SettingsCard>
    
    <controls:SettingsCard Description="When the Button is selected, the narrator will read 'Grid and Button SettingsCard group, Content button', 'Accessibility Test group' is missing"
                            Header="Grid and Button SettingsCard"
                            HeaderIcon="{ui:FontIcon Glyph=&#xE713;}">
        <Grid>
            <Button Content="Content"/>
        </Grid>
    </controls:SettingsCard>
</StackPanel>

Steps to reproduce

1. Create a new project and set the above example as the content of the page.
2. Open the narrator and select the controls to see how the narrator behaves with the different controls.

Expected behavior

All the narrator outputs should be equal to the ToggleSwitch/ComoBox SettingsCard narrator output

Screenshots

No response

Code Platform

• UWP
• WinAppSDK / WinUI 3
• Web Assembly (WASM)
• Android
• iOS
• MacOS
• Linux / GTK

Windows Build Number

• Windows 10 1809 (Build 17763)
• Windows 10 1903 (Build 18362)
• Windows 10 1909 (Build 18363)
• Windows 10 2004 (Build 19041)
• Windows 10 20H2 (Build 19042)
• Windows 10 21H1 (Build 19043)
• Windows 10 21H2 (Build 19044)
• Windows 10 22H2 (Build 19045)
• Windows 11 21H2 (Build 22000)
• Other (specify)

Other Windows Build number

Windows 11 23H2 (Build 22635.3140) (Insider build)

App minimum and target SDK version

• Windows 10, version 1809 (Build 17763)
• Windows 10, version 1903 (Build 18362)
• Windows 10, version 1909 (Build 18363)
• Windows 10, version 2004 (Build 19041)
• Windows 10, version 2104 (Build 20348)
• Windows 11, version 22H2 (Build 22000)
• Other (specify)

Other SDK version

Windows 11, version 23H2 (Build 22621)

Visual Studio Version

2022

Visual Studio Build Number

17.9.0

Device form factor

Desktop

Additional context

No response

Help us help you

I would like to help, but I don't have too much experience with accessibility

[niels9001]

Apologies for the delayed response. @Diegorro98 Could you try the latest release to see if that resolves the issue, we fixed some a11y thinks in: #284?

[Diegorro98]

@niels9001 I found this issue with the latest release, all NuGets on my project are up to date.

[niels9001]

Looking at your XAML, I think the expected thing is happening when having a single UI control as the content of the SettingsCard.

When wrapping things in a Grid things break, but I'm guessing that is to be expected as it's custom content living there in a panel. I guess you'd need to set the AutomationProperties.Name on the `Grid itself. Would love to hear your thoughts though!

[Diegorro98]

@niels9001 Setting the AutomationProperties.Name to the Grid doesn't work because Narrator says the names in the incorrect order. Check this representation:

Without grid:

• Accessibility test group
  • ToggleSwitch SettingsCard
    • toggle switch off

With Grid:

• ToggleSwitch SettingsCard
  • toggle switch off

With Grid and AutomationProperties.Name:

• ToggleSwitch SettingsCard
  • Accessibility test group
    • toggle switch off

[Diegorro98]

Also, maybe it is kind of hidden between all the Grid issues, but buttons inside SettingsCards have a huge issue, I'm going to highlight it here so it can be seen easily:

    <controls:SettingsCard Description="When the Button is selected, the narrator will read 'Content button', 'Accessibility Test group' and 'Button SettingsCard' are missing"
                            Header="Button SettingsCard"
                            HeaderIcon="{ui:FontIcon Glyph=&#xE713;}">
        <Button Content="Content"/>
    </controls:SettingsCard>