Can escape Modals to reach background using Screen Readers

[darcy-rayner]

Bug description:

Can escape Modals to reach background using Voice Over/JAWS
Steps,

1. Turn on Voice Over in System settings on Mac in Chrome/Firefox
2. Click Launch Demo Modal, click on input element
3. Press back arrow key until out of Modal and navigate to 'Launch Demo Modal' again. Hit enter
   The Modal is launched on top of the original modal.

Note, I've only tested this in Voice Over, but other screen readers should have the same behaviour on different Operating Systems. For most greenfield desktop browsers, setting aria-modal="true", (introduced in aria 1.1), on the same div with the role="dialog" should fix the issue. For older browsers, the only solution is to set aria-disabled="true" on the root of the background content.

Also, note this is different from the previous issue asking to add a tab trap

More info on aria-modal

Link to minimally-working plunker that reproduces the issue:

Here

Version of Angular, ng-bootstrap, and Bootstrap:

Angular:
Angular 6.0.4

ng-bootstrap:
2.2.2

Bootstrap:
4.1.1

[maxokorokov]

Unfortunately adding aria-modal and hiding all other branches with aria-hidden doesn't fix VoiceOver on a desktop, but I couldn't find any solutions for this. NNDA and JAWS work fine form my tests.