Cant disable focus on charts

[lars-hakansson]

Describe the bug I want to be able to set a property or something to disable focus so that taborder of my page supports a11y!

To Reproduce Steps to reproduce the behavior:

1. https://swimlane.github.io/ngx-charts/#/ngx-charts/bar-vertical
2. Tab -> highlights first bar
3. Tab - should not focus on g-tag at all when disableTooltip or something similar

Or go to this stackblitz: https://stackblitz.com/edit/angular-5vyr3d

Expected behavior Setting disable tooltip or some new property should prevent tab:ing each svg element in the component.

ngx-charts version 13.0.3

[alexsaaf]

Did you find a work-around for this?

[kallebjork]

We found that you can disable it by setting tabindex on the tooltip-anchor. Something like: ngAfterViewInit() { this.chartElement.nativeElement.querySelector('.tooltip-anchor').setAttribute('tabindex', -1); }

With that said, please go upvote https://github.com/swimlane/ngx-charts/issues/896 👍

[DmitryEfimenko]

the workaround by @kallebjork did not work for me, but it gave me an idea how to solve this. Here's what I had done:

const els = this.chart.nativeElement.querySelectorAll('[ngx-charts-bar]');
els.forEach(el => {
  el.setAttribute('tabindex', -1);
});

https://stackblitz.com/edit/vertical-bar-chart-disable-focus

[billyjov]

the workaround by @kallebjork did not work for me, but it gave me an idea how to solve this. Here's what I had done:

const els = this.chart.nativeElement.querySelectorAll('[ngx-charts-bar]');
els.forEach(el => {
  el.setAttribute('tabindex', -1);
});

https://stackblitz.com/edit/vertical-bar-chart-disable-focus

@DmitryEfimenko Thanks..This worked for me with the pie-arc chart

 @ViewChild('chart', { read: ElementRef }) chartElement: ElementRef;

 ngAfterViewInit() {
    const els = this.chartElement.nativeElement.querySelectorAll(
      '[ngx-charts-pie-arc]'
    );
    els.forEach((el: HTMLElement) => el.setAttribute('tabindex', '-1'));
}