0

How to correctly align via HTML the Submit button and Cancel button so that when I press the "Tab" in the keyboard, it will go from "Submit" then to "Cancel"? This is the ChildModalComponent:

 <div class="w-100">
   <button type="button" (click)="remove()" class="btn btn-primary mr-3 float-left" >Remove</button>
   <button type="button" class="btn btn-info float-right" (click)="closeModal()" >Cancel</button>
    <button type="submit" ngbAutofocus class="btn btn-primary mr-3 float-right" >Submit/button>
 </div>

With this current code, on initial opening of modal, the "Tab" is highlighted on the Submit first since it has the ngbAutofocus. But when I click on the "Tab", the expected behavior should be to go to Cancel but it goes to the added "Close" button on my modal.

I am using import { NgbModal } from '@ng-bootstrap/ng-bootstrap' for my modal,

import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

openModal = () => {
    const modalRef = this.modalService.open(ParentModalComponent, {size: "xl", backdrop: "static"});
  }

This is the ParentModalComponent:

<div class="modal-header">
  <h3 class="modal-title w-100 text-center">Modal Header Here</h3>
  <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<app-child-modal></app-child-modal>

I've tried using "[tabIndex]='value', but when I continuously press "Tab", the focus goes outside the modal and I have to implement Focus Trapping but this is a lot of work.

Chris Barr
  • 29,851
  • 23
  • 95
  • 135
newProgrammer005
  • 25
  • 6

2 Answers2

0
 <div class="w-100">    <button type="submit" ngbAutofocus class="btn
 btn-primary mr-3 float-left" tabindex="1">Submit</button>    <button
 type="button" class="btn btn-info float-right" (click)="closeModal()"
 tabindex="2">Cancel</button>    <button type="button"
 (click)="remove()" class="btn btn-primary mr-3 float-right"
 tabindex="3">Remove</button> </div>

In this code, I've assigned tabindex values to each button in the desired tab order: Submit (1), Cancel (2), and Remove (3). This way, when you press the "Tab" key, the focus will move from the Submit button to the Cancel button and then to the Remove button. You won't need to worry about focus trapping because the tab order within the modal is controlled explicitly.

Make sure to adjust the tabindex values according to your specific layout and needs.

Let me know if this works for you! Happy to help!

s3stak
  • 1
  • 2
  • I am using ng-bootstrap if it helps, but this is my first approach to my problem and didn't quite work well with me since it's tabbing out of the modal. I've updated the question for more clarity, just tell me if you need more info – newProgrammer005 Aug 13 '23 at 19:06
  • If I remove the tabIndex, my problem is resolved except the tab order of Submit and Cancel. Since they don't have the tabIndex, their order is by their position in HTML, but that's what I am having problem with. Since Cancel is what's first then Submit. – newProgrammer005 Aug 13 '23 at 19:08
0
<div class="w-100">
     <button type="button" (click)="remove()" class="btn btn-primary mr-3 float-left" >Remove</button>
  <div class="float-right">
     <button type="submit" ngbAutofocus class="btn btn-primary mr-3" >Submit</button>
     <button type="button" class="btn btn-info" (click)="closeModal()" >Cancel</button>
  </div>
</div>

This approach solved my problem. Without the need to add the tabIndex property, tabbing works in order as how HTML is laid out.

newProgrammer005
  • 25
  • 6