Question 229870 in Html Question posted in
Some basic documentation can be found here.

How to correctly layout the HTML for correct tabbing?

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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    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.


  2. 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!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search