title: ChromeVox Fails to Read Span After Checkbox Toggled State
body: <p>I'm refactoring pattern library components to comply with accessibility standards, and I'm dealing with an expandable header menu that is in actuality a hidden checkbox. It opens and closes on the checkbox's <code>checked</code> state. Because it's hidden it didn't have any labeling for ChromeVox to read, and it no longer could be activated via the spacebar, which is normally a default. I decided to add some spans that described when the menu is expanded or collapsed, and an event listener that triggers on a keystroke, and changed the display from one to the other so ChromeVox could read the spans and announce the change. The menu works completely on a click, the state changes and the reader works, but on keystroke the menu will open and the reader fails to announce the change to the spans.</p>
  
  <p>This is my event listener-</p>
  
  <pre><code>function checkboxToggle() {
    const el = document.querySelector('.site-header__button');
  
    function handleCheckboxEvent(e) {
      const checkbox = document.querySelector('.site-header-toggle');
      if (e.keyCode === 13) {
        checkbox.checked = !checkbox.checked;
      }
    }
  
    el.addEventListener('keydown', handleCheckboxEvent);
  }
  </code></pre>
  
  <p>The html is created through a Twig template-</p>
  
  <pre><code>&lt;input hidden type="checkbox" id="site-header-toggle" class="site-header-toggle"&gt;
  &lt;header class="{{ classes|join(' ') }}"&gt;
  
      &lt;label tabindex="0" for="site-header-toggle" class="site-header__button icon--menu"&gt;
          &lt;span class="u-hide expanded-text"&gt;navigation menu expanded&lt;/span&gt;
          &lt;span class="u-hide collapsed-text"&gt;navigation menu collapsed&lt;/span&gt;
      &lt;/label&gt;
    {% if menu_items %}
      &lt;nav class="site-header__menu"&gt;
       {...}
      &lt;/nav&gt;
    {% endif %}
  &lt;/header&gt;
  </code></pre>
  
  <p>With Scss I'm using an interpolation to effect everything in the <code>.site-header</code> parent when it's sibling, the checkbox, changes states. On keystroke all the displays change as expected, but it's just not triggering ChromeVox to read the spans as they are changing displays.</p>
  
  <pre><code>$open: '.site-header-toggle:checked + .site-header';
  
  .site-header {
    {...}
    }
    &amp;__button {
      font-size: 1.5rem;
  
      .expanded-text {
        display: none;
      }
  
      .collapsed-text {
        display: inline;
      }
      &amp;:hover { cursor: pointer; }
      #{$open} &amp; {
        @include icon(close);
  
        .expanded-text {
          display: inline;
        }
  
        .collapsed-text {
          display: none;
        }
      }
    }
    &amp;__menu {
      display: none;
      width: 100%;
      #{$open} &amp; {
        display: block;
      }
    }
  }
  </code></pre>
  
  <p>I'm newish to screen readers so maybe there's something about ChromeVox that I'm just not taking into account. Any insight would be so helpful or resources I can check out to try and find a solution.</p>