maui
maui copied to clipboard
Navigation with arrow keys on Windows does not work between radio buttons
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
- Set the WinUI property
TabFocusNavigation
toOnce
andXYFocusKeyboardNavigationMode
toEnabled
for a layout container that contains radio buttons. - Navigate to the container using the tab key.
- 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
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.
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.
In WinUI 3, arrow key navigation incl. selection is standard when surrounding <RadioButton>
controls with a <RadioButtons>
container.
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