Получение сосредоточенных клавиатурных элементов

Если вы создаете виджеты JavaScript, одно из ключевых деталей к доступности – это управление фокусом.

Чтобы управлять фокусом, вам нужно найти сосредоточенные клавиатуры элементы.

Когда вы знаете содержание

Легко найти сосредоточенные элементы с клавиатурой, если вы знаете содержимое элемента заранее.

Например, я знаю, что фокусируемые элементы в этом модальном есть и <кнопка> Отказ

Я могу получить фокусируемые элементы с QuerySelectorAll Отказ

const focusableElements = [...modal.querySelectorAll('input, button')]

Когда вы не знаете содержание

Труднее найти фокусируемые клавиатуры элементы, если вы не знаете контент заранее.

После некоторых исследований я понял, что вы можете сосредоточиться только на этих элементах с клавиатурой:

.
<кнопка>
<подробно>
Элементы с Tabindex установить 0.
Элементы с Tabindex установить на положительное число

Мы можем получить все элементы с фокусируемыми классами со следующим QuerySelectorAll Отказ Это выглядит немного сложно, но нет другого способа включить все:

const keyboardfocusableElements = document.querySelectorAll(
  'a, button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])'
)

Некоторые элементы (как кнопка ) можно отключить. Отключенные элементы не сосредоточены. Мы можем удалить эти элементы с Фильтр Отказ

const keyboardfocusableElements = [...document.querySelectorAll(
  'a, button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])'
)]
  .filter(el => !el.hasAttribute('disabled'))

Превращая его в функцию

Это QuerySelectorAll код трудно читать. Мы можем поставить всю вещь в функцию, чтобы сделать его более понятным.

/**
 * Gets keyboard-focusable elements within a specified element
 * @param {HTMLElement} [element=document] element  
 * @returns {Array}
 */
function getKeyboardFocusableElements (element = document) {
  return [...element.querySelectorAll(
    'a, button, input, textarea, select, details,[tabindex]:not([tabindex="-1"])'
  )]
    .filter(el => !el.hasAttribute('disabled'))
}

Полезные функции JavaScript

Я начал держать фрагменты функций JavaScript, я нахожу полезным в Git Repository Отказ Это крошечно, хотя. Я добавлю больше к этому, когда я иду.

Надеюсь, вы найдете ее полезной.

Если у вас есть какие-либо предложения, чтобы добавить к этому репо, пожалуйста, дайте мне знать!

Спасибо за прочтение. Эта статья была первоначально опубликована на мой блог Отказ Подпишись на Моя рассылка Если вы хотите больше статей, чтобы помочь вам стать лучшим разработчиком Frontend.

Когда вы знаете содержание

Когда вы не знаете содержание

Превращая его в функцию

Полезные функции JavaScript

Читайте ещё по теме: