Keyboard navigation for Wijmo Chart

Keyboard navigation for Wijmo Chart

Posted by: sumita.sharma on 1 February 2024, 9:42 am EST

• 

  sumita.sharma

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 1 February 2024, 9:42 am EST - Updated 1 February 2024, 9:47 am EST

  Hi Team,

  We are using Angular 15 and Wijmo 5.20231, we are using the Bear chart for Wijmo. But the chart’s elements(bars, legends) are not accessible via Keyboard. For example attached in the screenshot the focus is on the chart when we hit the tab it shifts to the next button in the screen but the focus is not shifting to the chart elements

  

  1263×564 21.7 KB

• 

  anirudh.verma

  

  • Post Options:
  • Link
    Copy

  Posted 2 February 2024, 12:17 am EST

  Hi Sumita,

  This is because the tabIndex for these elements are set to -1. So, you need to handle the rendered event of the FlexChart and set the tabIndex and aria-label for each of the required element. I have prepared a sample that focuses on some chart elements when “Tab” key is pressed. Also, I have set a class on focus event and removed the class by handling ‘blur’ events for those elements so that they can be outlined when they have focus. Similarly, you need to set the tabIndex for other elements (if required).

  Please refer to this sample for reference: https://stackblitz.com/edit/angular-12-flexchart-tabindex

  Thank you.

  Regards

• 

  sumita.sharma

  • Post Options:
  • Link
    Copy

  Posted 21 February 2024, 10:33 am EST

  Thanks Anirudh this works properly

• 

  anirudh.verma

  

  • Post Options:
  • Link
    Copy

  Posted 21 February 2024, 2:25 pm EST

  Hi Sumita,

  Thank you for notifying me that the solution was helpful to you. In case, if you have any further queries then please let us know.

  Thank you.

  Regards