'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 |
|---|
