Button

Минимальный компонент кнопки. Работает на HTMLButtonElement или произвольной ноде с ролью button.

Когда использовать

  • Если требуется предсказуемая кнопка без привязки к UI-фреймворкам и стилям.
  • В проектах с жёсткими требованиями к доступности.
  • В местах, где важно корректное управление клавиатурой, disabled и обработкой событий.
  • Как базу для расширенных сценариев: ToggleButton, MenuButton.

Семантика

Если элемент — <button>

Используется нативное поведение:

  • корректные атрибуты disabled
  • нативная активация Enter/Space
  • встроенная доступность

Если элемент не <button>

Компонент применяет минимальный fallback:

  • role="button"
  • tabindex="0"
  • эмуляция активации по Enter / Space

Важно: при использовании кастомного тега выводится console.warn с рекомендацией использовать <button>.

A11y Summary

  • Полная поддержка нативной клавиатурной навигации.
  • Enter и Space вызывают click (Space предотвращает скролл).
  • Корректная работа состояний disabled и aria-disabled.
  • Компонент не меняет DOM-структуру и не добавляет избыточных ARIA.

Поведение клавиатуры

  • Enter → запускает click
  • Space → предотвращает скролл и запускает click
  • Tab / Shift+Tab → используется нативно (или через tabindex="0" в fallback)

Приоритет конфигурации

Компонент следует предсказуемому порядку инициализации:

  1. Атрибуты DOM (disabled, aria-*)
  2. Data-API (data-a11ync-type="basic" | "toggle" | "menu")
  3. JS-опции конструктора

DOM всегда сильнее Data-API, Data-API сильнее JS-опций.

SSR и Hydration

Button корректно восстанавливает поведение после SSR-hydration:

  • Существующие атрибуты и состояние не перезаписываются.
  • Добавляется только функциональность и обработчики.
  • Инициализация idempotent — повторный вызов init() безопасен.

Ограничения

  • Компонент не управляет состояниями pressed или expanded (это задачи ToggleButton и MenuButton).
  • Компонент не добавляет визуальные стили.
  • Не изменяет структуру DOM.
  • Для нестандартных тегов доступность ограничена минимальным fallback.
  • Не эмулирует сложные ARIA-паттерны.

Типы кнопок

Button

Базовая кнопка с нативной семантикой и единым модельным поведением.

Ключевые особенности:

  • Используется, когда нужна простая активация действий без состояний.
  • Автоматическая нормализация поведения для div[role="button"].
  • Keyboard Activation по Enter/Space.
  • Поддержка disabled и aria-disabled.
  • Без побочных эффектов — не вмешивается в стили, формы и фокусировку.

ToggleButton

Кнопка-переключатель со встроенной логикой состояния (aria-pressed). Подходит для «ON/OFF» сценариев: mute, избранное, фильтры, переключатели вида и т.п.

Ключевые особенности:

  • Отслеживает состояние pressed.
  • Синхронно обновляет aria-pressed.
  • Не меняет DOM-структуру, только атрибуты.
  • При disabled блокируется логика и события.
  • Убирает разрыв между визуальным состоянием и а11y-атрибутами.
  • Обеспечивает корректное взаимодействие с ассистивными технологиями.
  • Делает поведение предсказуемым независимо от тега (button или div[role="button"]).

Кнопка, управляющая раскрытием внешнего меню. Не реализует само меню — только логику expanded и необходимые ARIA-связи.

Ключевые особенности:

  • Управляет атрибутом aria-expanded.
  • Не навязывает структуру меню (YAGNI).
  • События работают консистентно для клавиатуры и мыши.
  • Может использоваться с button или любым элементом с ролью.

Кнопки открытия dropdown, popover, меню действий. Контролы, где видимость контента меняется внешним кодом или UI-компонентом.

Инициализация

<button id="basic-btn">button</button>
import { useButton } from 'a11ync';

// Basic buttons
const el = document.querySelector('#basic-btn')
const button = new useButton(el, {
	onPress: () => {
		console.log('Pressed')
	}

Результат