ChromeVox не может прочитать диапазон после состояния переключателя

Question

Я занимаюсь рефакторингом компонентов библиотеки шаблонов для соответствия стандартам доступности, и я имею дело с расширяемым меню заголовков, которое на самом деле является скрытым флажком.Он открывается и закрывается в состоянии checked флажка.Поскольку он скрыт, у него не было никаких надписей для чтения ChromeVox, и он больше не мог быть активирован через пробел, который обычно используется по умолчанию.Я решил добавить несколько диапазонов, описывающих, когда меню разворачивается или сворачивается, и прослушиватель событий, который срабатывает при нажатии клавиши, и менял отображение с одного на другое, чтобы ChromeVox мог читать пролеты и объявлять об изменении.Меню работает полностью по щелчку, состояние изменяется, и читатель работает, но при нажатии клавиши меню открывается, и читатель не может сообщить об изменении пролетов.

Это мой слушатель событий -

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);
}

HTML создается с помощью шаблона Twig-

<input hidden type="checkbox" id="site-header-toggle" class="site-header-toggle">
<header class="{{ classes|join(' ') }}">

    <label tabindex="0" for="site-header-toggle" class="site-header__button icon--menu">
        <span class="u-hide expanded-text">navigation menu expanded</span>
        <span class="u-hide collapsed-text">navigation menu collapsed</span>
    </label>
  {% if menu_items %}
    <nav class="site-header__menu">
     {...}
    </nav>
  {% endif %}
</header>

В Scss я использую интерполяцию, чтобы повлиять на все в родительском элементе .site-header, когда его брат, флажок изменяет состояния,При нажатии клавиш все дисплеи изменяются, как и ожидалось, но ChromeVox просто не запускает чтение диапазонов при смене дисплеев.

$open: '.site-header-toggle:checked + .site-header';

.site-header {
  {...}
  }
  &__button {
    font-size: 1.5rem;

    .expanded-text {
      display: none;
    }

    .collapsed-text {
      display: inline;
    }
    &:hover { cursor: pointer; }
    #{$open} & {
      @include icon(close);

      .expanded-text {
        display: inline;
      }

      .collapsed-text {
        display: none;
      }
    }
  }
  &__menu {
    display: none;
    width: 100%;
    #{$open} & {
      display: block;
    }
  }
}

Я новичок в программах чтения с экрана, поэтому, возможно, в ChromeVox есть кое-что, что я 'м просто не учитывая.Любое понимание было бы очень полезно, или ресурсы, которые я могу проверить, чтобы попытаться найти решение.