RadioButtons control does not support keyboard navigation in XAML islands

[alekhyareddy28]

Describe the bug

The RadioButtons control (which is used to group multiple radio button controls together allows navigation as follows-

• Pressing tab into the radio buttons control should bring focus to the selected radio button. If no radio button is selected, pressing tab should bring focus to the first radio button.
• Pressing tab again takes focus out of the radio buttons control. However, to navigate within the radio buttons, the arrow keys are used.
  This is the built in expected behavior.

However, when the radio buttons control is used within XAML islands, pressing tab always takes the focus to the first item (not to the selected item). Keyboard navigation does not work.

Steps to reproduce the bug

Steps to reproduce the behavior:

1. Try to tab navigate and arrow navigate in this user control within a XAML island. The keyboard navigation does not work as expected.

<UserControl
    x:Class="Microsoft.PowerToys.Settings.UI.Views.ShellPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:behaviors="using:Microsoft.PowerToys.Settings.UI.Behaviors"
    xmlns:winui="using:Microsoft.UI.Xaml.Controls"
    xmlns:helpers="using:Microsoft.PowerToys.Settings.UI.Helpers"
    xmlns:views="using:Microsoft.PowerToys.Settings.UI.Views"
    xmlns:ic="using:Microsoft.Xaml.Interactions.Core"
    xmlns:i="using:Microsoft.Xaml.Interactivity"
    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
    mc:Ignorable="d">


    <Grid>
        <muxc:RadioButtons>
            <RadioButton>Item 1</RadioButton>
            <RadioButton>Item 2</RadioButton>
            <RadioButton>Item 3</RadioButton>
        </muxc:RadioButtons>
    </Grid>
</UserControl>

Expected behavior

Screenshots

However, this navigation does not work within a XAML island.

Version Info

NuGet package version:

Microsoft.UI.Xaml.2.5.0-prerelease.200708003

Windows app type: UWP app within a XAML Island.

UWP	Win32
Yes

Windows 10 version	Saw the problem?
Insider Build (xxxxx)
May 2020 Update (19041)
November 2019 Update (18363)	Yes
May 2019 Update (18362)	Yes
October 2018 Update (17763)
April 2018 Update (17134)
Fall Creators Update (16299)
Creators Update (15063)

Device form factor	Saw the problem?
Desktop	Yes
Xbox
Surface Hub
IoT

Additional context

Link to Issue in the PowerToys Page - microsoft/PowerToys#6032

[Felix-Dev]

This should be fixed with #3048 which is shipped with the newest WinUI 2.5 preview - Microsoft.UI.Xaml v2.5.0-prerelease.200812001.

[alekhyareddy28]

@Felix-Dev Is the Arrow key navigation issue fixed as well (which is the bigger issue as it renders the other radio buttons inaccessible)?
The arrow key navigation issue is noticed only with XAML islands and works fine otherwise. Thank you.

[Felix-Dev]

@alekhyareddy28 I haven't explicitly checked arrow key navigation in XAML Islands, sorry. The linked PR #3048 only focused on fixing setting focus on the selected item. So my guess here would be that keyboard arrow navigation would still be broken for XAML Islands, but I can't tell for sure.

Perhaps you could check this out in XAML Islands and report back if you are still seeing this issue?

[StephenLPeters]

@Austin-Lamb and/or @JesseCol are there xy focus issues in xaml islands? (Winui 2)

[alekhyareddy28]

@Felix-Dev Wanted to get back to you after upgrading to Microsoft.UI.Xaml v2.5.0-prerelease.200812001. Both the issues still persist in XAML islands, ie. tab sets the focus on the first element irrespective of the radio button that is selected and arrow based navigation does not work.
However, I did try the radiobuttons control in a basic UWP app after upgrading to the 2008 version and tab works as expected, it sets focus on the selected radio button. Seems like these are xaml island specific issues.

[alekhyareddy28]

To add to that the screen reader does not read the heading when we tab into a radio button (when it is grouped by the RadioButtons control with the header property set. When we group it using a stack panel and add a reference to the heading in a text block using AutomationProperies.Labeledby it works fine. Trying to do the same with the radio buttons control does not work as well), it just reads the content on the selected radio button.

Eg: In the following RadioButtons control group, the screen reader reads out only Dark Radio button checked .. and not Choose shortcut guide overlay color grouping Dark Radio button checked ... when we tab into the radio button.

Thank you!

[Felix-Dev]

I am currently working on the RadioButtons control so I could take a look at this narrator issue as well while I'm at it.

[alekhyareddy28]

That would be great. Thank you!

[StephenLPeters]

@kikisaints I seem to recall something about this narrator behavior but I can't recall specifics do you remember?

After talking with the Islands team I think this is likely a RadioButtons issue as there are no known xy focus issue on islands

[StephenLPeters]

@alekhyareddy28 could you please open a second issue for the narrator bug? :)

[alekhyareddy28]

Narrator issue of RadioButtons control - #3183.

[DHowett]

Terminal's hitting this as well- microsoft/terminal#9566

[Jay-o-Way]

Any update for this issue?

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[DHowett]

Surprisng nobody, this has not fixed itself.

[kmahone]

I took a look at this issue in a WinUI3 Xaml Islands app using Windows App SDK 1.4.

I can repro the issue where the initial incorrect RadioButton receives focus.
I cannot repro the issue where keyboard navigation fails to work.

So it looks like the keyboard navigation problem has been resolved in WinUI3.

I will investigate further the issue where the incorrect item receives initial focus.