How can restrict the tab key press only within the modal popup when its open?

html angular modal-dialog accessibility onfocus
Prince picture Prince · May 4, 2018 · Viewed 13.5k times · Source

I have a modal popup opened. I have accessibility requirement. So added ARIA related labels. But when i click tab key continuously focus going to the page behind the actual page.

Added role="dialog" in html file

But when modal opened i want only the focus navigate within the modal popup.

Working on Angular4, HTML5 project. Better if we find a solution within HTML file itself. I mean without added any javascript/jQuery related stuffs to prevent this

Answer

Limon Monte picture Limon Monte · May 4, 2018

You are asking about focus trap, it's nicely demonstrated in this demo: http://davidtheclark.github.io/focus-trap/demo/

Adding role="dialog" will not automatically provide trap the focus within that element. In fact, there's no native focus trap provided by browsers.

You need to go with one of following options:

Related questions

(change) vs (ngModelChange) in angular

Angular 1 does not accept onchange() event, it's only accepts ng-change() event. Angular 2, on the other hand, accepts both (change) and (ngModelChange) events, which both seems to be doing the same thing. What's the difference? which one is best for performance? …

Read More
Binding select element to object in Angular

I'd like to bind a select element to a list of objects -- which is easy enough: @Component({ selector: 'myApp', template: `<h1>My Application</h1> <select [(ngModel)]="selectedValue"> <option *ngFor="#c of countries" …

Read More
Angular 2 Checkbox Two Way Data Binding

I´m fairly new to Angular2 and I have a little problem: In my Login-Component-HTML, I have two checkboxes, which I want to bind in two way data-binding to the Login-Component-TypeScript. This is the HTML: <div class="checkbox"> &…

Read More