ally.element.disabled

Библиотека ally.js предоставляет мощные инструменты для работы с доступностью элементов на веб-странице. Одним из ключевых модулей является ally.element.disabled, который предназначен для проверки состояния доступности элементов и управления их поведением с точки зрения взаимодействия с пользователем.

Основное назначение

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

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

  • <button> и <input> с атрибутом disabled
  • <a> с отсутствующим href или с aria-disabled="true"
  • Элементы управления в кастомных виджетах, реализованных с помощью JavaScript

Импорт и использование

Для начала необходимо подключить библиотеку:

import ally from 'ally.js';

Проверка элемента на недоступность выполняется через метод:

const element = document.querySelector('#myButton');
const isDisabled = ally.element.disabled(element);
console.log(isDisabled); // true или false

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

Поддержка атрибутов

ally.element.disabled учитывает следующие способы блокировки элемента:

  • HTML-атрибуты: disabled, hidden
  • ARIA-атрибуты: aria-disabled="true", aria-hidden="true"
  • Стили и видимость: элементы с display: none или visibility: hidden также считаются недоступными
  • Контейнеры: если родительский элемент недоступен, дочерний элемент также считается заблокированным

Таким образом, проверка учитывает как семантические, так и визуальные факторы доступности.

Примеры практического применения

1. Проверка кнопки перед активацией:

const submitButton = document.querySelector('#submit');

if (!ally.element.disabled(submitButton)) {
    submitButton.click();
}

2. Обход элементов формы с игнорированием недоступных полей:

const inputs = document.querySelectorAll('input, select, textarea');

inputs.forEach(input => {
    if (!ally.element.disabled(input)) {
        console.log('Поле доступно:', input.name);
    }
});

3. Обработка кастомных виджетов:

Для элементов с role="button" и кастомной логикой доступности:

const customButton = document.querySelector('[role="button"]');

if (!ally.element.disabled(customButton)) {
    customButton.addEventListener('click', () => {
        console.log('Кастомная кнопка активирована');
    });
}

Особенности и нюансы

  • Метод не меняет состояние элемента, а только проверяет его. Для программного отключения элемента необходимо использовать стандартные атрибуты или ARIA.
  • В отличие от прямой проверки атрибута disabled, ally.element.disabled учитывает наследуемую доступность от родительских элементов.
  • Совместим с различными типами элементов, включая неклассифицированные интерактивные компоненты, что делает его полезным для сценариев с кастомными UI.

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

  • Использовать при динамическом управлении формами, где элементы могут включаться или отключаться программно.
  • Применять перед выполнением действий, зависящих от доступности элемента.
  • Совместно с другими методами ally.js, такими как focusable и tabbable, для полноценного управления навигацией и взаимодействием на странице.

Взаимодействие с другими модулями

  • ally.element.focusable: позволяет определить, может ли элемент получать фокус. Полезно для проверки доступности в интерактивных сценариях.
  • ally.query: предоставляет удобные методы для поиска всех доступных элементов в контейнере, учитывая их состояние disabled.

Итоговая структура вызова

import ally from 'ally.js';

const element = document.querySelector('#example');
if (!ally.element.disabled(element)) {
    // элемент доступен для взаимодействия
}

Использование ally.element.disabled позволяет создавать веб-интерфейсы, полностью соответствующие стандартам доступности и корректно реагирующие на состояние элементов в разных сценариях.

Оглавление