Как Adobe научила React-компоненты понимать пользователя с полуслова

Вы когда-нибудь пробовали написать по-настоящему доступный Select или DatePicker на React? Не просто «чтобы работало», а чтобы экранный диктор (screen reader) не сходил с ума, клавиатурная навигация не ломалась при первом же табуляторе, а мобильные пользователи не проклинали слишком мелкие области нажатия. Обычно это превращается в бесконечную борьбу с ARIA-атрибутами и специфическими багами браузеров.

Инженеры из Adobe столкнулись с этой проблемой в масштабах всей компании. Им нужно было решение, которое работало бы одинаково хорошо и в тяжелом Photoshop в браузере, и в легких маркетинговых лендингах. Результатом стал проект React Spectrum — набор библиотек, который меняет правила игры в создании UI-китов.

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

Когда мы слышим «библиотека компонентов», в голове всплывают MUI, Ant Design или Chakra UI. Но React Spectrum устроен иначе. Это матрешка из трех уровней, и именно в этом его главная ценность.

Adobe разделила ответственность. Если вам нравится дизайн Adobe — берете готовый React Spectrum. Если у вас свой брендбук и уникальный стиль — берете React Aria. Если вы пишете под React Native или другую платформу — берете React Stately.

Уровень 1: React Stately (Логика состояния)

Здесь живет чистая логика. Как должен вести себя список при выборе элемента? Что происходит с состоянием чекбокса? React Stately не знает ничего о DOM или стилях. Это просто набор хуков, которые управляют состоянием.

Интересно, что эти хуки можно использовать даже вне веба. Если вы решите собрать приложение на React Native, логика выбора даты или управления фокусом останется прежней. Вы не переписываете поведение, вы просто меняете «обертку».

Уровень 2: React Aria (Поведение и доступность)

Это, пожалуй, самая крутая часть проекта. React Aria — это библиотека хуков, которые превращают ваши обычные div и button в полноценные, доступные компоненты.

Представьте, что вы делаете кнопку-переключатель. С React Aria это выглядит примерно так:

import {useToggleButton} from '@react-aria/button';
import {useToggleState} from '@react-stately/toggle';

function ToggleButton(props) {
  let state = useToggleState(props);
  let ref = React.useRef();
  let {buttonProps, isPressed} = useToggleButton(props, state, ref);

  return (
    <button {...buttonProps} ref={ref} style={{background: isPressed ? 'darkblue' : 'blue'}}>
      {props.children}
    </button>
  );
}

Хук useToggleButton сам добавит нужные aria-pressed, обработает нажатие пробела, энтера и клика, а также разберется с фокусом. Вам остается только навесить стили. Это идеальный фундамент для создания собственной дизайн-системы, где вы не ограничены чужими CSS-классами.

Уровень 3: React Spectrum (Готовый UI)

Это уже реализация дизайн-системы Adobe. Здесь все «из коробки»: адаптивность под тач-интерфейсы, поддержка темной темы и строгая эстетика Spectrum. Если вам нужно быстро собрать профессиональный интерфейс, который выглядит дорого и надежно, это ваш выбор.

Что делает этот проект особенным

Меня зацепило то, насколько серьезно авторы подошли к мелочам, о которых мы часто забываем:

Интернационализация. Поддержка более 30 языков — это не только перевод строк. Это правильное отображение дат, чисел и, что самое сложное, поддержка RTL-языков (где пишут справа налево). Компоненты сами перестраиваются, если пользователь сменил язык на арабский или иврит.
Адаптивность к вводу. Компонент понимает, как с ним взаимодействуют. Если вы нажали на кнопку мышкой, фокус может не подсвечиваться. Но стоит вам перейти на клавиатуру — и фокусное кольцо тут как тут. Это мелочь, которая сильно влияет на UX.
Тестирование. Adobe утверждает, что они тестируют компоненты на огромном количестве устройств и экранных дикторов. В одиночку или даже небольшой командой такой объем работы по QA просто не вытянуть.

Кому стоит на это посмотреть

Если вы работаете над продуктом, где доступность (accessibility) — это требование закона или здравого смысла, React Spectrum сэкономит вам месяцы разработки.

Для тех, кто строит свою дизайн-систему с нуля: не пытайтесь изобрести велосипед с обработкой фокуса в модальных окнах. Возьмите React Aria. Это даст вам свободу в дизайне, но закроет все вопросы по поведению компонентов.

Единственный нюанс — порог вхождения. Архитектура с разделением на хуки состояния и хуки поведения требует времени на осознание. Это не «скопировал-вставил», здесь нужно понимать, как данные текут через компоненты.

React Spectrum — это не просто набор кнопок. Это мастер-класс по тому, как нужно строить сложные интерфейсы в 2024 году. Adobe фактически выложила в опенсорс фундамент своих флагманских продуктов.

Если вам надоело, что ваши кастомные выпадающие списки закрываются не вовремя или не читаются скринридерами, попробуйте внедрить хотя бы React Aria. Скорее всего, возвращаться к написанию обработчиков событий вручную вам уже не захочется.