Microsoft-ui-xaml: Navigation view does not work with Arrow keys, hence inaccessible by keyboard (on specific screens)

[alekhyareddy28]

Describe the bug

Navigation Issue: Navigation view control is expected to navigate using the up and down arrow keys, but it does not happen. The weird thing is that when I try to do the same on the monitor attached to my laptop it works fine but just not on my laptop screen. Seems like it has something to do with the hardware configuration of my laptop screen as it works fine on the attached monitor.
Narrator Issue: The narrator is expected to say General selected 1 of 9... and similar things for all the items but it only does so on my monitor and not on my laptop screen. On my laptop screen it does so for the first tab but for the others it just reads out the first item in content of that page.

Steps to reproduce the bug

Steps to reproduce the behavior:

1. Try to tab into a navigation view control

Expected behavior

As you can see in the gif. The smaller recording is on my monitor screen and the arrow based navigation works as expected. The larger one is on my laptop screen and it does not work. The monitor is just connected to my laptop by a HDMI cable.

Screenshots

Version Info

NuGet package version:

Microsoft.UI.Xaml 2.5.0-prerelease.200708003

Windows app type:
| UWP | Win32 |
| :--------------- | :--------------- |
| Yes | |

| Windows 10 version | Saw the problem? |
| :--------------------------------- | :-------------------- |
| Insider Build (xxxxx) | |
| May 2020 Update (19041) | |
| November 2019 Update (18363) | |
| 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

• Linked issue in the powertoys repo - https://github.com/microsoft/PowerToys/issues/6089

[alekhyareddy28]

I have an NVIDIA GeForce GTX 960M, if that helps.

[ranjeshj]

This looks like it might be an XYFocus issue. Does changing the scale factor affect the behavior ?

[alekhyareddy28]

@ranjeshj, Yes, you're absolutely right. My previous scale was set to a recommended 125% on my laptop screen. I changed it to a 100% and the arrow navigation works fine.

[ranjeshj]

@Austin-Lamb Is this a known issue with XYFocus ?

[alekhyareddy28]

@ranjeshj There is also an issue (I'm not sure if it is only specific to xaml islands) where we navigate only to the first element of the navigation view on pressing tab and not the selected item.

Ideally we would like to go to the Keyboard manager item, but we always go to general.

[Felix-Dev]

There is also an issue (I'm not sure if it is only specific to xaml islands) where we navigate only to the first element of the navigation view on pressing tab and not the selected item.

Is this really an issue though? The selected NavigationViewItem can be reached with the arrow keys. The documentation also doesn't appear to state this behavior.

Should the NavigationView behave like the RadioButtons control and set focus to the selected item when focus reaches the menu items lists? @YuliKl

[alekhyareddy28]

@Felix-Dev Seems like windows on start-up also behaves in the same way. It seems like it goes to the first element on start-up but once we select one of the tabs, it seems to go to the selected item instead of the first one. However, with the winui navigation view it seems to go to the first element always.

[YuliKl]

I expected NavigationView to behave like RadioButtons and ListView, put focus on the selected item. Checking (WinUI 2) Xaml Controls Gallery, that's not the behavior I'm seeing. This feels like a separate issue from the one originally reported, would be great to get a new bug opened.

[Felix-Dev]

@alekhyareddy28 This issue seems to be fixed with the newest WinUI 2.5 Preview release. Can you give that a try? @YuliKl FYI

[alekhyareddy28]

@Felix-Dev Unfortunately, the issue still persists with 2.5.0-prerelease.200812001.

[Felix-Dev]

@alekhyareddy28 Hmmm, I just tested 2.5.0-prerelease.200812001 again and it works fine for me in an UWP app:

PowerToys is using Xaml Islands so if you are still seeing this issue with 2.5.0-prerelease.200812001, then it might be an Xaml Island-related issue? Though that sounds a bit strange to me in this context 🤔

[alekhyareddy28]

@Felix-Dev to clarify, the tab navigation now goes to the selected item. That issue is fixed. I can confirm that with xaml islands too. However, the main arrow navigation issue when the scale is set to 125% still persists. I am unable to navigate using arrow keys. Thanks.

[Felix-Dev]

Ah, I see. I thought you were talking about the [focus not being set to the selected item] issue. Good to hear that's working for you.

Looking at your initially reported issue (arrow navigation not working with 125% scale display scale) it seems to be a "needs-winui-3" issue, in other words, WinUI 2.x versions won't be able to ship a fix for it (the code to fix currently still resides exclusively in the OS and not in the WinUI 2 repo). I don't know when a fix for this issue would land in WinUI 3 but the community might be able to help out the team here once WinUI 3 has been open-sourced (in case the team has no immediately available resources to tackle this specific issue).

[alekhyareddy28]

Sounds good. Thanks for the clarification.

[crutkas]

Hi everyone, just to flag this, we got flagged by accessibility on this bug and we pointed back at this bug.