Ngx-Chart skip focus when tabbing page

Question

I have a chart (ngx-charts-pie-chart) which gets focus when i use tab on my page. I want to exclude this component completely from the natural taborder of my page. I have tried a lot of things including inert. Does anybody have any suggestions to exclude this from my taborder?

See stackblitz below.

Taborder1 button -> click tab should go to taborder2 button.

https://stackblitz.com/edit/angular-5vyr3d

score 0 · Answer 1 · answered May 07 '20 at 06:55

@Directive({
 selector: '[sksInert]'
})
export class InertDirective implements AfterViewInit {
@Input() public excludeElementsInTabOrder: string[] = [];

constructor(private elementRef: ElementRef) { }

ngAfterViewInit(): void {
    for (const elementName of this.excludeElementsInTabOrder) {
        const elements = this.elementRef.nativeElement.getElementsByTagName(elementName);

        for (const gElement of elements) {
            gElement.setAttribute('tabindex', -1);
        }
    }
}
}

Solved it with a directive and used the directive on a parent element to the chart.

Ngx-Chart skip focus when tabbing page

1 Answers1