title: How to keep focus within modal dialog?
body: <p>I'm developing an app with <code>Angular</code> and <code>Semantic-UI</code>. The app should be accessible, this means it should be compliant with WCAG 2.0.
  To reach this purpose the modals should keep focus within the dialog and prevents users from going outside or move with "tabs" between elements of the page that lays under the modal.</p>
  
  <p>I have found some working examples, like the following:</p>
  
  <ul>
  <li>JQuery dialog: <a href="https://jqueryui.com/dialog/#modal-confirmation" rel="noreferrer">https://jqueryui.com/dialog/#modal-confirmation</a></li>
  <li><code>dialog</code> HTML 5.1 element: <a href="https://demo.agektmr.com/dialog" rel="noreferrer">https://demo.agektmr.com/dialog</a></li>
  <li>ARIA modal dialog example:
  <a href="http://w3c.github.io/aria-practices/examples/dialog-modal/dialog.html" rel="noreferrer">http://w3c.github.io/aria-practices/examples/dialog-modal/dialog.html</a>
  (that I have reproduced on <a href="https://plnkr.co/edit/7rysRn" rel="noreferrer">Plunker</a>)</li>
  </ul>
  
  <p>Here is my try to create an accessible modal with Semantic-UI: <a href="https://plnkr.co/edit/HjhkZg" rel="noreferrer">https://plnkr.co/edit/HjhkZg</a></p>
  
  <p>As you can see I used the following attributes:</p>
  
  <p><code>role="dialog"</code></p>
  
  <p><code>aria-labelledby="modal-title"</code></p>
  
  <p><code>aria-modal="true"</code></p>
  
  <p>But they don't solve my issue. Do you know any way to make my modal keeping focus and lose it only when user click on cancel/confirm buttons?</p>