[Grid] FocusableDirective does not correctly apply tabindex on anchor tags

[georgi-sla]

Description

Currently, when the developer applies the FocusableDirective on a single focusable element, and the user navigates the Grid component using the arrow keys, the Grid should focus directly on the focusable element and not on the cell that it is wrapped into. For complex components, the cell should be focused.

In the case when an anchor tag is rendered in a cell, and the FocusableDirective is applied to it, the anchor tag is not focused, but instead, the focus is on the cell that it is wrapped into. The user should press the Enter key to focus it.

Steps To Reproduce

1. Create a Grid component.
2. Enable the keyboard navigation.
3. Render an anchor tag in the Grid cells.
4. Apply the FocusableDirective to the anchor tag.
5. Navigate to the cell containing the anchor tag.

Please, check out the following StackBlitz demo: https://stackblitz.com/edit/angular-rqqzam

Screenshots or video

No response

Actual Behavior

Instead of focusing on the anchor tag, the keyboard navigation focuses on the cell wrapping the anchor and the user should press the Enter key to reach the element.

Expected Behavior

Applying the FocusableDirective on an anchor tag should allow the user to reach the anchor element using only the arrow keys without pressing Enter.

Browser

All

Browser version

latest

OS type

No response

OS version

No response

Last working version of the Kendo UI for Angular package (if regression).

No response