search

CommunityToolkit / Windows

Collection of controls for WinUI 2, WinUI 3, and Uno Platform developers. Simplifies and demonstrates common developer tasks building experiences for Windows with .NET.
https://aka.ms/windowstoolkitdocs
Other
573 stars 70 forks source link

SettingsCard narrator accessibility is not reliable #337

Open Diegorro98 opened 8 months ago

Diegorro98 commented 8 months ago

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

Windows Build Number

Other Windows Build number

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

App minimum and target SDK version

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 commented 7 months ago

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: https://github.com/CommunityToolkit/Windows/pull/284?

Diegorro98 commented 7 months ago

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

niels9001 commented 7 months ago

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 commented 7 months ago

@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:

With Grid:

With Grid and AutomationProperties.Name:

Diegorro98 commented 7 months ago

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>