search

dougludlow / ng2-bs3-modal

Angular Bootstrap 3 Modal Component
http://dougludlow.github.io/ng2-bs3-modal/
ISC License
261 stars 133 forks source link

On Pressing shift tab or tab key focus moves to adress bar in browser #237

Open sripalreddyadamala opened 6 years ago

sripalreddyadamala commented 6 years ago

Hi,

I am using ng2-bs3-modal@^0.13.0 modal component in one of our projects.

Our requirement is to trap the focus inside the modal however the focus is moving outside of the modal on tabbing. It then stays outside the modal until it traverses all the tabs on the page.

Is there a way you could keep the focus trapped inside the modal until the modal is closed? Or in other words it should continue looping with focus being within the modal.

Expected behavior – Focus should be trapped inside the modal window and on closing it focus should move to the element which triggers the modal window.

This is critical interaction for AX users. Appreciate any support you can provide with regards to this. image

wartab commented 6 years ago

I think this request is out of scope, as it alters the default behavior of the browser. This is probably something you'd have to implement yourself by adding traps to the keyboard event and setting tabindex inside the modal.

sripalreddyadamala commented 6 years ago

Hi wartab, Thanks for the reply. Initially I thought it was out of scope but when I look in to w3.org website modal focus is trapped inside the modal and even in bootstrap & angular material implementation they are trapping focus inside the modal itself and here are few examples Which I have collected. https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/dialog-modal/dialog.html https://material.angular.io/components/dialog/overview https://getbootstrap.com/docs/3.3/javascript/