Microsoft-ui-xaml: Update NavigationView to meet MAS 4.1.2

[vgromfeld]

Describe the bug
When testing our app accessibility, we had a bug assigned to us where the control type reported by the accessibility tool is not the expected one for NavigationViewItem and was breaking WCAG rule 4.1.2.
The NavigationViewItem are reporting a ListItem control type whereas they should report TabItem.

According to the AutomationControlType documentation we have:

• ListItem: A list item control, which is a child item of a list control.
• TabItem: A tab item control, which represents a page of a tab control.

TabItem is a better fit for the navigation items.

Steps to reproduce the bug

1. Create an application with a navigation view with one or more navigation item.
2. Run the application
3. Run accessibility insights tool or the Windows narrator

Expected behavior
The NavigationViewItem should report AutomationControlType.TabItem as their control type

Screenshots

Version Info
NuGet package version:
Microsoft.UI.Xaml 2.2.190917002

[YuliKl]

@vgromfeld thank you for the bug report. The role of NavigationViewItems actually depends on NavigationView's PaneDisplayMode. The items are more similar to TabItem in top mode, and more similar (and are implemented using) ListItem in left mode. Sounds like we need to change the role dynamically.

[mdtauk]

If they perform a navigation, they behave like tabs.

If they display a flyout, they behave more like menu items.

[vgromfeld]

@YuliKl, I think the NavigationViewItems can always keep the AutomationControlType.TabItem. They always behave as "navigation tabs" whether they are displayed in top or left mode

[YuliKl]

@YuliKl, I think the NavigationViewItems can always keep the AutomationControlType.TabItem. They always behave as "navigation tabs" whether they are displayed in top or left mode

I may be wrong, but I believe users have an expectation that tab items are laid out horizontally. Users will attempt to use left/right arrow keys to move between tab items, which won't work when NavigationView is in left mode.

[jevansaks]

So the change would be: change the role dynamically; ListItem in left nav and TabItem in top nav?