'I need to navigate the buttons in the modal using arrow keys left and right

Am using angular and this is the button code i need to navigate it using left and right arrow now the navigation through buttons is working with tab but not with arrow keys.

<div class="modal-footer>
    <button type="submit" tabindex="o" class="btn btn-primary tab" (keydown)=movecell($event)(click)="onAcceptOffer()">Submit</button>
    <button type="button" tabindex="1" class="btn btn-secondary tab" (keydown)=movecell($event) (click)="modal.dismiss('Crossclick');
            isClicked=false">Cancel</button>       
</div>
    //.ts file
length: 0;
domEles;
movecell(e) {
    const activeEle = document.activeElement;
    const activeEleIndex = Array.prototype.indexOf.call(this.domEles,     activeEle);
    if(e.key == "ArrowRight" && activeEleIndex < this.length - 1 ) {
        activeEle.nextElementSibling.focus();
    }
        
    if(e.key == "ArrowLeft" && activeEleIndex > 0) {
        activeEle.previousElementSibling.focus();
    }
}
        
ngOnInit() {
    this.domEles = document.querySelectorAll('.modal-footer> *');
    this.length = this.domEles.length;
}


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source