RadMenu: the tab and arrow keys navigation through the radmenu is inconsistent.

[lan luo]

Hello Telerik Team,

Our customers have found that using the tab and arrow keys for navigation through the radmenu is inconsistent.

For example, when a user tabs into a radmenu item, uses the arrow keys to navigate to other menu items, and then hits the tab key again, the selection jumps to the last tab location instead of the current arrow key location.

Is there any way to make the arrow keys behave the same as the tab key, please?

Thanks in advance,

Lan

[Rumen]

Hi Lan,

Thank you for reaching out regarding the navigation behavior of the RadMenu. The control is designed to support keyboard navigation, with arrow keys intended for moving between menu items. This provides a seamless and accessible way to navigate within the menu. On the other hand, the Tab key is specifically used to shift focus between different focusable elements on the page, following standard web accessibility guidelines.

Currently, there are no Telerik settings available to modify the default behavior to make the arrow keys act like the Tab key. If this behavior is required, it would need to be implemented as a custom solution using JavaScript, where you could intercept keypress events and manually manage the focus state.

For more information about the default keyboard navigation features of the RadMenu, you can refer to our Keyboard Support Demo.

Regards,
Rumen
Progress Telerik

[lan luo]

Hello Rumen,

Thank you very much for your feedback. If we want to implement this feature using JavaScript, which method or file should we override to do so?

Regards,

Lan

[Rumen]

Hi Lan,

Thank you for your follow-up question and for highlighting the specific navigation behavior you'd like to achieve.

To implement the desired behavior where the arrow keys mimic the Tab key's focus-shifting functionality, you can override the _onKeyDown method in the RadMenu.KeyboardNavigator prototype. This is the method responsible for handling keyboard interactions within the RadMenu.

Here's a custom JavaScript example demonstrating how you can modify the behavior:

        <script>
            // Override the _onKeyDown method
            Telerik.Web.UI.RadMenu.KeyboardNavigator.prototype._onKeyDown = function (e, menuItem) {
                this._item = menuItem;
                var keyCode = e.originalEvent.code;

                switch (keyCode) {
                    case "Tab":
                    case "ArrowRight":
                    case "ArrowDown":
                        // Mimic Tab behavior for ArrowRight and ArrowDown
                        if (this._item) {
                            this._item.blur(e); // Remove focus from the current item
                            var nextItem = this._item._getNextItem(); // Get the next item in the menu
                            if (nextItem) {
                                nextItem.focus(); // Move focus to the next item
                            } else {
                                this._owner.get_element().focus(); // Fallback to menu focus
                            }
                        }
                        e.preventDefault();
                        break;

                    case "ArrowLeft":
                    case "ArrowUp":
                        // Mimic Shift+Tab behavior for ArrowLeft and ArrowUp
                        if (this._item) {
                            this._item.blur(e); // Remove focus from the current item
                            var prevItem = this._item._getPreviousItem(); // Get the previous item in the menu
                            if (prevItem) {
                                prevItem.focus(); // Move focus to the previous item
                            } else {
                                this._owner.get_element().focus(); // Fallback to menu focus
                            }
                        }
                        e.preventDefault();
                        break;

                    default:
                        // Use default behavior for other keys
                        return Telerik.Web.UI.RadMenu.KeyboardNavigator.prototype._onKeyDown.call(this, e, menuItem);
                }

                return false; // Indicate that the event was handled
            };
        </script>

Include this script in your project after the RadMenu scripts are loaded to ensure it properly overrides the default behavior. Since this is a custom solution and not officially supported, feel free to modify and enhance it to suit your specific requirements. Please test the implementation thoroughly, as it alters the native keyboard navigation behavior and may have implications for both functionality and accessibility.

Regards,
Rumen
Progress Telerik

[lan luo]

Thank you Rumen!

 

Lan