[Epic] Keyboard navigation

[kakone]

What would you like to be added:

The ability to navigate with arrow keys of a physical keyboard, or with a remote control (on Android TV for example) on listview, dropdownlist, menuflyout, ...

Why is this needed:

We can't develop Android TV app with Uno without this.
And in WASM, to fill data forms when we can't navigate with the keyboard on dropdownlist, listview, ..., it's very complicated.

Notes

• Includes
  • Tab navigation
    • TabNavigation property - KeyboardNavigationMode.Cycle - focus returns to the first or the last stop inside of container; Local (default) - tab indexes are considered on the local subtree only inside container; Once - container and all of its child elements as a whole receive focus only once (for examples see comments)
    • UIElement.TabFocusNavigation - same as TabNavigation, but on UIElement (does it override TabNavigation)
  • XYFocus navigation (arrow keys)
    • XYFocus??NavigationStrategy - Specifies the disambiguation strategy used for navigating between multiple candidate targets using - https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.input.xyfocusnavigationstrategy
    • XYFocusKeyboardNavigationMode - Specifies the 2D directional navigation behavior when using the keyboard arrow keys. - https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.input.xyfocuskeyboardnavigationmode?view=winrt-19041
• Access keys
• Keyboard accelerators
• FocusState
  • When you call Focus (FocusState.Programmatic), the prior FocusState, either Pointer or Keyboard, is retained so that the correct focus visual is shown. This means that if you check the value of the FocusState property after you call Focus (FocusState.Programmatic), the FocusState property will have a value of either Pointer or Keyboard. (https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.control.focusstate?view=winrt-19041)
  • Classes that inherit from ItemsControl, such as ListBox and AutoSuggestBox, do not propagate the FocusState property. They will always return Unfocused. Access the correct value through RoutedEventArgs.OriginalSource. (https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.control.focusstate?view=winrt-19041)
  • Use FocusManager to determine which element in the overall UI has focus, and then call FocusState on that element to get information on how that control received focus.

Resources

• https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.control.focusstate?view=winrt-19041
• https://docs.microsoft.com/en-us/windows/uwp/design/input/keyboard-interactions

Child issues

• StandardUICommand - Add support for StandardUICommand #5769
• Tab navigation [TBD]
• XYFocus navigation [TBD]
• Access keys [TBD]
• Keyboard accelerators [TBD]

For which Platform:

• iOS
• Android
• WebAssembly
• WebAssembly renderers for Xamarin.Forms
• macOS
• Windows
• Build tasks
• Solution Templates

Anything else we need to know?

Thanks for your work on Uno! 😃

[MartinZikmund]

The key prerequisite for implementing this feature is #3093 - focus visuals are a system feature that draws the "highlight" rectangle around the controls. I have noticed these are likely drawn independently of the visual tree - if control is hidden behind a solid background border (is invisible), its focus visual is still drawn. However, controls can also provide their own implementation of focus visuals, which can be used instead of the system ones as part of their template.

[MartinZikmund]

TabNavigation property

<StackPanel>
    <StackPanel Padding="20" TabFocusNavigation="Local" Spacing="20">
        <Button Content="A" />
        <Button Content="B" />
        <Button Content="C" />
    </StackPanel>
    <StackPanel Padding="20" TabFocusNavigation="Local" Spacing="20">
        <Button Content="A" />
        <Button Content="B" />
        <Button Content="C" />
    </StackPanel>
</StackPanel>

Local - Local

<StackPanel>
    <StackPanel Padding="20" TabFocusNavigation="Cycle" Spacing="20">
        <Button Content="A" />
        <Button Content="B" />
        <Button Content="C" />
    </StackPanel>
    <StackPanel Padding="20" TabFocusNavigation="Local" Spacing="20">
        <Button Content="A" />
        <Button Content="B" />
        <Button Content="C" />
    </StackPanel>
</StackPanel>

Cycle - Local

<StackPanel>
    <StackPanel Padding="20" TabFocusNavigation="Once" Spacing="20">
        <Button Content="A" />
        <Button Content="B" />
        <Button Content="C" />
    </StackPanel>
    <StackPanel Padding="20" TabFocusNavigation="Local" Spacing="20">
        <Button Content="A" />
        <Button Content="B" />
        <Button Content="C" />
    </StackPanel>
</StackPanel>

Once - Local (Blue = Shift + Tab)

Further examples here - https://docs.microsoft.com/en-us/windows/uwp/design/input/focus-navigation

Focus navigation without a mouse - UWP applications

Learn how to use focus navigation to provide comprehensive and consistent interaction experiences in your Windows apps and custom controls for keyboard power users, those with disabilities and other accessibility requirements, as well as the 10-foot experience of television screens and the Xbox One.

[MartinZikmund]

WASM: https://github.com/amanboss9/naviboard/blob/master/lib/naviboard.js

GitHub

amanboss9/naviboard

A javascript library for handling navigation on web application and feature phone applications. - amanboss9/naviboard