NavigationView Keyboard Focus is Broken in Top Navigation Mode

[michael-hawker]

Describe the bug
I'm noticing issues with Keyboard focus navigation of the arrow keys on NavigationView when in Top PaneDisplayMode. However, the weird thing is, I can see similar (though slightly different) issues between 2.3.2002 and 2.4.2 even though they're different implementations with the ItemsRepeater!

I have a branch here which demonstrates the issue.

Not sure if related to #2175 or not (probably not as was an issue in 2.3.2002 as well)?

Steps to reproduce the bug

1. Clone and move to branch here
2. Run app (make sure NOT maximized, should be default)
3. Hit Tab to focus on 'Controls'
4. Use right-arrow keys a few times to navigate to Settings

Note: Other2 and Other3 are skipped! And when you use left from Settings as well!

If you Maximize the app, this problem goes away... 🤷‍♂️ Seems like maybe some overflow logic is interfering with Keyboard focus???

If you shrink the window smaller a different behavior is exhibited with some middle items being skipped. Something related to the Horizontal width of the control is effecting Keyboard navigation here.

Expected behavior
Keyboard focus should navigate to each item in the top navigation header, just as things work vertically in the normal mode.

Screenshots
See live stream clip here

Version Info
NuGet package version: 2.3.2.200213001 & 2.4.2

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

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

Additional context

[ranjeshj]

@ojhad can you investigate this keyboarding issue ?

[marcelwgn]

I can't seem to repro this on my machine with your linked repro project:

Changing the size of the app e.g. maximizing or making the app smaller also doesn't change the behavior, the arrow navigation still works as expected.

[msft-github-bot]

This issue has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment.

[marcelwgn]

Update: It turns out, the reason I was not able to repro this is that I disabled the XAML Debug Tools, which when enabled, occludes some NavView items when the window is narrow enough:

The arrow navigation always skips the items that are occluded by the XAML Debug Tools. @ojhad FYI

[ranjeshj]

@chingucoding Thanks for investigating this. This seems to be an side effect of using XYFocus from the platform. I am guessing that this behavior is by design and will not repro when not running under the debugger. @Austin-Lamb and @stevenbrix as FYI.

[stevenbrix]

I'm honestly a bit surprised this happens, this seems non-intuitive.

[marcelwgn]

Could this bug also be triggered by some other UI element, eg a button that overlaps some items like the XAML Debug Tools?

[ranjeshj]

Although I understand why it is happening, I'm not sure if this is the intended design.

@Austin-Lamb @fabiant3 Should the buttons on the visual tree tools ribbon on the app be focusable ? Should it be excluded by XYFocus logic from its list of candidates ?

[kmgallahan]

I just wanted to comment that I had a laugh when I saw the presence of the debug tool's UI is causing a "bug"... it's just one of those things you'd never expect.

[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.