Charts appear to interact with previous focused item when tabbing through with keyboard and pressing enter

[AndrewJohnWalker]

Description

When a kendo-chart either doesn't have a series or the markers are invisible, tabbing to the chart and pressing enter will interact with the previously focused item. Making the markers visible does not seem to produce the bug.

Steps To Reproduce

https://stackblitz.com/edit/angular-qak7ys?file=src%2Fapp%2Fapp.component.ts

I would expect that the button is not clicked when pressing enter on the chart.

Screenshots or video

No response

Actual Behavior

1. Tabbing to a chart without a series or markers and pressing enter will interact with the button/link/etc above or below it in the dom.

Expected Behavior

1. Pressing enter on a chart without series or markers does not interact with previous element.

Browser

All

Browser version

latest

OS type

MacOS, Windows

OS version

No response

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

No response

[tswetti]

Hi @AndrewJohnWalker,
I have tested the example using Chrome v130.0.6723.119 and Firefox v132.0.2, but I haven’t been able to replicate the problem. To better understand the situation, could you please share:

• the browsers you are using
• the specific versions where the issue is occurring

I’ve attached a video demonstrating the results on my side:
https://github.com/user-attachments/assets/396d69f1-83d6-4de4-85fc-aad502c4d83b
Let me know if I am missing any steps or specific details in my reproduction attempt.

[AndrewJohnWalker]

Hi @AndrewJohnWalker, I have tested the example using Chrome v130.0.6723.119 and Firefox v132.0.2, but I haven’t been able to replicate the problem. To better understand the situation, could you please share:

• the browsers you are using
• the specific versions where the issue is occurring

I’ve attached a video demonstrating the results on my side: https://github.com/user-attachments/assets/396d69f1-83d6-4de4-85fc-aad502c4d83b Let me know if I am missing any steps or specific details in my reproduction attempt.

It appears it's only an issue when using a screenreader (NVDA specifically, cannot reproduce with Narrator), so assume it's some issue with that shifting focus and not kendo specific.

[AndrewJohnWalker]

Hi @tswetti I have also found a very similar issue in the kendo-combobox. This one does not need NVDA to be replicated. Pressing tabbing to a combo box so it is focused and pressing enter when the box is in a form appears to click the button below it. Shall I open another issue for this, or is this related?

https://stackblitz.com/edit/angular-v7z6wf?file=src%2Fapp%2Fapp.component.ts

[tswetti]

Hi, @AndrewJohnWalker,

By default, pressing the 'Enter' key within a form triggers the submission process by activating the form's 'submit' button. For more details, refer to the following article:
https://www.w3.org/TR/2011/WD-html5-20110525/association-of-controls-and-forms.html#implicit-submission
See the following demo with HTML select and input elements:
https://stackblitz.com/edit/angular-v7z6wf-zzz5tk

The Kendo UI for Angular ComboBox does not prevent the default behavior, which results in the observed button clicks.
To prevent the Enter key from submitting a particular button in a form, set the button's type attribute to button:
https://stackblitz.com/edit/angular-v7z6wf-xomkat

Alternatively, to prevent Kendo components from submitting a form, handle the keydown event for the Enter key:
https://stackblitz.com/edit/angular-v7z6wf-yfzl4x

I hope this helps!