Unplanned
Last Updated: 02 Oct 2024 11:14 by Oleksii
Oleksii
Created on: 20 Sep 2024 12:42
Category: Chart
Type: Bug Report
1
Chart with shared tooltip enabled throws an error

Description: When 'shared' tooltip is enabled (tooltip: {shared: true}) keyboard navigation through chart triggers JavaScript error and tooltip on focus is not shown, neither shared nor regular tooltip. It works without issues when 'shared' is disabled, but when it is enabled errors are triggered.

Steps to reproduce

  1. Open Dojo example https://dojo.telerik.com/@oleksii.shumakov@thomsonreuters.com/UqixUyuj
  2. Open browser's console (F12)
  3. Run the script
  4. With mouse click on "India" legend item once -> India line is disabled
  5. Click on "India" legend item once more -> India line is enabled
  6. Using keyboard hit Shift+Tab -> Browser's console shows error: "Uncaught TypeError: Cannot read properties of undefined (reading 'format')"
  7. Using keyboard hit Tab -> Dot on chart line becomes highlighted but no tooltip is shown

Stack trace of the issue:

kendo.all.js:290271 Uncaught TypeError: Cannot read properties of undefined (reading 'format')
    at init.show (kendo.all.js:290271:1)
    at init._displayTooltip (kendo.all.js:302830:1)
    at init._focusFirstPoint (kendo.all.js:302653:1)
    at init._navigatePoints (kendo.all.js:302577:1)
    at init._keydown (kendo.all.js:302540:1)
show @ kendo.all.js:290271
_displayTooltip @ kendo.all.js:302830
_focusFirstPoint @ kendo.all.js:302653
_navigatePoints @ kendo.all.js:302577
_keydown @ kendo.all.js:302540

Versions of KendoUI with the issue: 2024.2.514, 2024.3.806

Attached Files:
4 comments
Oleksii
Posted on: 02 Oct 2024 11:14
The proposed workaround does not seem to completely avoid the issue, the chart could still be accessed by keyboard when tabbing (pressing Tab key) through website. In Dojo demo provided I was able to trigger the same error in console.
ADMIN
Nikolay
Posted on: 02 Oct 2024 09:20

Hello Oleksii,

The Chart does not expose a property that disables the keyboard navigation. However, you can achieve this by calling stopImmediatePropagation() in the keydown event of the Chart element:

         $("#chart").on("keydown", function(e) {
            e.stopImmediatePropagation();
          });

Dojo demo: https://dojo.telerik.com/InInIpIn

Please let me know if you have any questions.

Regards,
Nikolay
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Oleksii
Posted on: 25 Sep 2024 09:42
While this is not yet fixed, I am wondering if there is an option to disable accessibility navigation through chart in versions 2024. For example, in KendoGrid there is a "navigatable" parameter in options which allows to turn navigation on/off. Is there some similar option for KendoChart to prevent chart from being accessed by keyboardm like it was in 2023, before introducing new feature?
ADMIN
Nikolay
Posted on: 25 Sep 2024 09:12

Hello Oleksii,

I have converted this thread to a bug report item and you can track its progress at the below link:

GitHub: https://github.com/telerik/kendo-ui-core/issues/7982

As a token of gratitude for reporting this, I have added some Telerik points to your account.

Regards,
Nikolay
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.