title: focus() on element triggers keyup event
body: <p>Can someone explain to me, why calling the <code>focus()</code> method on an element, triggers that elements <code>keyup</code> event, when the <code>focus()</code> method is called from an <code>click</code> event handler, but that handler is triggered by a keypress?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>document.getElementById('testButton').addEventListener('click', e =&gt; {
    document.getElementById('modal').focus();
  });
  
  document.getElementById('modal').addEventListener('keyup', e =&gt; {
    alert('Modal element triggered!');
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="modal" tabindex="-1"&gt;Some content here&lt;/div&gt;
  &lt;button id="testButton" type="button"&gt;Focus on content&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://codepen.io/aguyfromdenmark/pen/QWmKJEa" rel="nofollow noreferrer">Above is an example, that you can try out yourself.</a> The expexted behaviour for me is, that when clicking or hitting enter on the <code>#testButton</code> element, it will simply set focus to the <code>#modal</code> element. If you click the <code>#testButton</code>, it works, but if you press the Enter key on the <code>#testButton</code> as you would do if navigating the page using a keyboard, it does not work as expected. What it actually does, is that, but it also triggers the <code>keyup</code> event on the <code>#modal</code> element. I have tried to add <code>.stopPropagation()</code>, <code>.preventDefault()</code>, and <code>.stopImmidiatePropagation()</code> to the <code>click</code> event handler on <code>#testButton</code>, but they dont solve the problem.</p>
  <p>Is there something I am missing completely, or is this really how it's supposed to behave?</p>