Раскрывающееся меню «Ария» работает только ниже 714px Bootstrap Wordpress theme - PullRequest
Новая
       20

Раскрывающееся меню «Ария» работает только ниже 714px Bootstrap Wordpress theme

0 голосов
/ 20 января 2019

Я создаю пользовательский сайт, используя дочернюю тему WordPress «storefront», но у меня большие проблемы с переключателем NAV мобильного загрузчика.

С помощью меню, реагирующего на переключение меню, оно не раскрывает выпадающее меню шириной 870 пикселей, а раскрывает только шириной 714 пикселей. Я пытался решить проблему, но безуспешно, единственное, что я заметил, это класс кнопки на переключателе. Если вы посмотрите в инспекторе кода, aria-extended = "false" будет отображаться на ширине около 870 пикселей, и если я вручную введу в код значение "true", значит, aria-extended = "true" будет работать нормально.

Любая помощь очень ценится, которую я пытался исправить часами, но не смог исправить. Веб-ссылка ниже - это главное мобильное навигационное меню, верхняя правая сторона

https://tiltrak.com/webdev/

1 Ответ

0 голосов
/ 21 января 2019

aria-expanded - подсказка для программ чтения с экрана относительно назначения элемента. Он не обеспечивает какого-либо поведения. В целом, независимо от того, установлен этот атрибут или нет, не будет иметь значения, как работает ваш сайт.

Однако, поскольку атрибуты ARIA аналогичны любым другим атрибутам html, вы можете иметь в своем CSS условную логику, основанную на значении атрибута, и если эта условная логика скрывает или отображает элемент, она может повлиять на внешний вид вашего сайта.

В этом случае есть 

<nav id="site-navigation" class="main-navigation" role="navigation" aria-label="Primary Navigation">
  <button class="menu-toggle" aria-controls="site-navigation" aria-expanded="false"><span>Menu</span></button>
  <div class="primary-navigation">
    ...
  </div>
  <div class="handheld-navigation">
    <ul id="menu-mobile-main-navigation" class="menu">
    ...
  </div>

и когда aria-expanded переключается при нажатии на кнопку, в игру вступает следующий CSS: 

.main-navigation.toggled .handheld-navigation,
.main-navigation.toggled .menu>ul:not(.nav-menu),
.main-navigation.toggled ul[aria-expanded="true"] {
  max-height: 9999px;
}

Но это вроде красная сельдь . Да, в CSS есть aria-expanded, но это

...