title: event.altKey on the keyup event is false although the key is "down"
body: <p>I want to add an HTML class to an element as long as the <kbd>Alt</kbd> modifier is pressed. The following observations were made using a current version of Google Chrome (same behavior in Opera).</p>
  
  <pre><code>const rootElement = document.querySelector(':root')
  
  document.addEventListener('keydown', function(event) {
      if (event.altKey) {
          rootElement.classList.add('modifier-pressed')
      }
  })
  
  document.addEventListener('keyup', function(event) {
      // This should be `event.altKey`, but it’s never `true`.
      // Checking for the actual key code works ¯\_(ツ)_/¯:
  
      // if (event.keyCode === 18) {
      if (event.altKey) {
          rootElement.classList.remove('modifier-pressed')
      }
  })
  </code></pre>
  
  <p>The first part works fine. Listening for the <code>keydown</code> event allows me to add the class when the key is pressed.</p>
  
  <p>The second part does not work. Even though the <kbd>Alt</kbd> key is <em>down</em> at the moment the <code>keyup</code> event is fired, the <code>event.altKey</code> property is set to <code>false</code>. This is contradictionary to the reported <code>event.keyCode</code>: 18 (the <kbd>Alt</kbd> key). Atleast the way I understand it.</p>
  
  <p>The <a href="https://developer.mozilla.org/en-US/docs/Web/Events/keyup#Properties" rel="nofollow noreferrer">Mozilla Developer Network page</a> for the event lists the property <code>event.altKey</code> as expected: It should be <code>true</code> when it the key was <em>down</em> when firing.</p>
  
  <p>So this is pretty unexpected as far as I’m concerned. However it gets worse: In Firefox, on both events (<code>keydown</code> and <code>keyup</code>), the property <code>event.altKey</code> is set to <code>false</code> while the key code is as expected (18).</p>
  
  <p>How to riddle this? Did I understand it right and this behavior is indeed unexpected or is my understanding wrong? What is going on?</p>