Navigation with arrow keys on Windows does not work between radio buttons

[lothrop]

Description

I'm trying to allow navigating between different control regions using tab and within these regions using the arrow keys, as described here: https://learn.microsoft.com/en-us/windows/apps/design/input/focus-navigation#set-the-tab-navigation-behavior

This works well for a group of checkboxes but not for a group of radio buttons.

Steps to Reproduce

1. Set the WinUI property TabFocusNavigation to Once and XYFocusKeyboardNavigationMode to Enabled for a layout container that contains radio buttons.
2. Navigate to the container using the tab key.
3. Try navigating within the container using the arrow keys.

Navigation with the arrow keys works well if the container contains checkboxes but does not work or works erratically if it contains radio buttons.

Another behavior I witnessed in the context of our larger application that did not surface in the attached test application is that pressing the arrow keys when focus is on the container freezes the application and leads to a dramatic linear memory size increase that eventually crashes our application.

Link to public reproduction project repository

https://github.com/lothrop/ArrowKeyTest

Version with bug

8.0.0-rc.1.9171

Is this a regression from previous behavior?

No, this is something new

Last version that worked well

Unknown/Other

Affected platforms

Windows

Affected platform versions

Windows SDK 1.3.230724000

Did you find any workaround?

No response

Relevant log output

No response

[XamlTest]

Verified this on Visual Studio Enterprise 17.8.0 Preview 2.0(8.0.0-rc.1.9171). Repro on Windows 11 with below Project: ArrowKeyTest.zip

Arrow keys does not work between radio buttons, works between checkbox with the given repro project. Crashes application issue does not repro on the given repro project.

[lothrop]

I've created a WinUI project in the repo mentioned above. According to https://learn.microsoft.com/en-us/windows/apps/design/controls/radio-button#keyboard-navigation, arrow key navigation is the default in WinUI, as long as the radio buttons are within a <RadioButtons> tag. This works in my sample, without having to specify the XYFocusKeyboardNavigation="Enabled" and TabFocusNavigation="Once" properties.

If I remove the <RadioButtons> tag, arrow keys work but also tabs to move between the radio button entries, which breaks our UI paradigm and leads to a much slower keyboard navigation experience (i.e., tabbing through 20 radio button entries to get to the next input field). If I then add TabFocusNavigation="Once" to the containing vertical <StackPanel>, I get the same experience as in the MAUI project. For example, when the first radio button is focussed, pressing down does nothing. Pressing up selects the last radio button.

However, I don't see a way of grouping the MAUI radio buttons into a containing <RadioButtons> tag, and even then, the desired behavior (the whole radio button group is one tab stop and navigating within the individual radio buttons works with the arrow keys) would not be achievable from what I can tell.

[lothrop]

In WinUI 3, arrow key navigation incl. selection is standard when surrounding <RadioButton> controls with a <RadioButtons> container.

[dustin-wojciechowski]

It would appear that RadioButtons does have the desired functionality. It seems to be quite an undertaking to bring that into MAUI... perhaps through an Accessibility Peer? It would be one thing to have MAUI to just use RadioButtons instead of RadioButton, but MAUI does allow developers to spread the radiobuttons around instead and be less restrictive layout-wise than RadioButtons, from what I understand.

Related, it looks like RadioButtons actually fixes some margin issues too, which this issue seems to be facing: #10694