Полный список методов ally.element

Библиотека ally.js предоставляет обширный набор методов для работы с DOM-элементами с акцентом на доступность (accessibility). Основная часть функционала сосредоточена в модуле ally.element, который позволяет определять видимость элементов, их фокусируемость, управление фокусом и взаимодействие с пользовательским интерфейсом через программные проверки.

Проверка видимости элемента

Метод is.visible(element) возвращает логическое значение, показывающее, видим ли элемент пользователю. Видимость определяется сочетанием стилей CSS (display, visibility, opacity) и позиции элемента относительно viewport.

Пример использования:

import { is } from 'ally.js';

const element = document.querySelector('#menu');
if (is.visible(element)) {
  console.log('Элемент видим');
}

Метод учитывает как прямое скрытие элемента, так и скрытие через родительские контейнеры.

Определение доступности для фокуса

is.focusable(element) проверяет, может ли элемент получить фокус с помощью клавиатуры. Метод учитывает:

  • Атрибут tabindex
  • Тип элемента (input, button, a с href)
  • Стиль display: none или visibility: hidden

Метод особенно полезен при динамическом управлении доступностью элементов интерфейса.

Доступность для интерактивного взаимодействия

Метод is.tabbable(element) расширяет проверку фокусируемости, учитывая порядок табуляции в документе. Элементы с tabindex="-1" считаются фокусируемыми, но не табулируемыми.

Пример:

import { is } from 'ally.js';

const buttons = document.querySelectorAll('button');
buttons.forEach(button => {
  if (is.tabbable(button)) {
    console.log('Элемент доступен через Tab');
  }
});

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

Метод get.tabSequence(root) возвращает массив элементов внутри root, которые могут быть фокусированы через клавишу Tab. Порядок элементов соответствует их естественному таб-индексу.

Это полезно для создания кастомных модальных окон или управления последовательностью фокуса на странице.

Управление фокусом

focus(element, options) позволяет программно установить фокус на элемент с возможностью указания условий:

  • preventScroll: true/false — предотвращение скролла к элементу
  • focusSource — обозначение источника фокуса (например, “keyboard”, “mouse”)

Пример:

import { focus } from 'ally.js';

const input = document.querySelector('#username');
focus(input, { preventScroll: true, focusSource: 'keyboard' });

Работа с элементами модальных окон и диалогов

focus.firstTabbable(container) и focus.lastTabbable(container) возвращают первый и последний табулируемый элемент внутри контейнера. Это критично для реализации замкнутого фокусного кольца в модальных окнах.

import { focus } from 'ally.js';

const modal = document.querySelector('#modal');
const first = focus.firstTabbable(modal);
const last = focus.lastTabbable(modal);

Проверка доступности интерактивного элемента

Методы is.disabled(element) и is.hidden(element) позволяют определить, заблокирован ли элемент или полностью скрыт. Они учитывают:

  • Атрибут disabled
  • Стили и родительские элементы
  • Атрибут aria-hidden

Использование этих методов помогает корректно управлять интерфейсом без нарушения стандартов доступности.

Определение фокусных трекеров

Метод get.activeElement() возвращает текущий элемент, находящийся в фокусе, с учётом shadow DOM. Это значительно упрощает отслеживание пользовательской активности и реализацию кастомного поведения на клавиатуре.

Проверка кликабельности элемента

is.clickable(element) определяет, можно ли на элемент кликнуть. Метод учитывает не только стандартные кнопки и ссылки, но и элементы с обработчиками onclick. Это удобно при тестировании интерфейсов и проверке доступности.

Расширенные возможности ally.element

  • query.focusable(container) — возвращает все фокусируемые элементы внутри контейнера.
  • query.tabbable(container) — возвращает только табулируемые элементы.
  • query.firstTabbable(container) / query.lastTabbable(container) — быстрый доступ к крайним элементам для организации замкнутого фокуса.
  • when.key(element, key, callback) — выполнение функции при нажатии определённой клавиши на элементе.

Особенности работы с динамическими элементами

Ally.js учитывает изменение DOM в реальном времени. Методы is.focusable, is.tabbable и get.tabSequence автоматически проверяют актуальное состояние элементов. Это особенно важно для интерфейсов с динамически добавляемыми формами, меню и модальными окнами.

Практические рекомендации

  • Использовать is.visible перед вызовом focus, чтобы избежать фокуса на скрытых элементах.
  • Применять get.tabSequence для контроля порядка табуляции при динамических интерфейсах.
  • Организовывать замкнутые циклы фокуса в модальных окнах через focus.firstTabbable и focus.lastTabbable.
  • Проверять доступность элементов через is.disabled и is.hidden для соблюдения стандартов ARIA.

Эти методы ally.element обеспечивают точное и безопасное управление фокусом, видимостью и интерактивностью элементов в сложных интерфейсах на JavaScript, делая страницы максимально доступными для всех пользователей.

Оглавление