menuautofocus

auto focus plugin

Описание плагина:

Данный плагин позволяет удобно передвигаться по отрытому меню сайта при помощи клавиатуры и не передвигаться по нему, когда это не нужно (например, когда меню срыто от пользователя). Такой функционал позволяет пользователю сразу передвигаться по меню при его открытии без лишних нажатий на клавишу tab.

Установка и инициализация

Установить плагин можно с npm: npm i menuautofocus

Ссылка на плагин в npm: https://www.npmjs.com/package/menuautofocus?activeTab=readme

Перед инициализацией:

Для корректной работы плагина установите селекторы и атрибуты, которые написаны в данной инструкции, либо пропишите свои селекторы и атрибуты.

Для меню пропишите атрибут: data-menu

Для кнопки вызова меню пропишите атрибут: data-buger

Если на вашем сайте предусмотрена внешняя обёртка для закрытия меню пропишите ей следующий атрибут: data-menu-overlay

После установки для инициализации пропишите следующий код:

const menuAutofocus = new MenuAutofocus('[data-burger]');

Если нужно прописать свои селекторы и атрибуты - делайте это следующим образом:

const menuAutofocus = new MenuAutofocus('[data-burger]', {
  menuName: '[data-menu]', // пропишите свой селектор...
  closeBtnName: '[data-close]', // пропишите свой селектор...
  overlayName: '[data-menu-overlay]', // пропишите свой селектор...
  menuItemName: '[data-menu-item]', // пропишите свой селектор...
  menuActiveClass: 'nav--active', // пропишите свой селектор...
});

Настройки

Задержка фокуса duration (по умолчанию 0):

const menuAutofocus = new MenuAutofocus('[data-burger]', {
  duration: 0,
});

Автопереключение фокуса к меню. По открытию меню фокус автоматически переключится на первый фокусируемый элемент меню (по умолчанию выключено):

const menuAutofocus = new MenuAutofocus('[data-burger]', {
  autoFocusToMenu: false,
});

Автопереключение фокуса к кнопке "закрыть меню". Если в меню присутствует кнопка "закрыть меню", то по открытию меню фокус перемещается к кнопке "закрыть меню" (по умолчанию выключено):

const menuAutofocus = new MenuAutofocus('[data-burger]', {
  autoFocusToCloseBtn: false,
});