Навигация с клавиатуры

Для создания интерактивных веб-приложений важно учитывать не только взаимодействие с мышью, но и навигацию с клавиатуры. Это особенно важно для обеспечения доступности приложения, позволяя пользователям с ограниченными возможностями использовать приложение без использования мыши. В Solid.js существует несколько способов реализации клавишной навигации, что позволяет сделать интерфейсы более удобными и доступными.

Обработка событий клавиш

В Solid.js обработка событий клавиш реализуется через стандартный механизм событий браузера, который может быть использован для отслеживания нажатий клавиш и выполнения соответствующих действий. Для этого необходимо привязать обработчик событий на компонент или элемент.

import { createSignal } from 'solid-js';

function KeyboardNavigation() {
  const [keyPressed, setKeyPressed] = createSignal(null);

  const handleKeyDown = (e) => {
    setKeyPressed(e.key);
  };

  return (
    <div tabIndex="0" onKeyD own={handleKeyDown}>
      <p>Нажмите клавишу: {keyPressed()}</p>
    </div>
  );
}

В примере выше компонент KeyboardNavigation слушает события нажатия клавиш, привязанные к элементу с атрибутом tabIndex="0". Это необходимо, чтобы элемент стал фокусируемым, так как по умолчанию элементы типа <div> не могут получать фокус.

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

Одним из ключевых аспектов навигации с клавиатуры является правильное управление фокусом. В веб-приложениях необходимо обеспечить, чтобы фокус всегда был на нужном элементе интерфейса, особенно при навигации с клавиатуры. В Solid.js для управления фокусом можно использовать методы, такие как focus() и blur().

Пример использования фокуса для перемещения между элементами:

import { createSignal } from 'solid-js';

function FocusNavigation() {
  const [focusIndex, setFocusIndex] = createSignal(0);
  const items = ['Item 1', 'Item 2', 'Item 3'];

  const handleKeyDown = (e) => {
    if (e.key === 'ArrowDown') {
      setFocusIndex((prevIndex) => Math.min(prevIndex + 1, items.length - 1));
    }
    if (e.key === 'ArrowUp') {
      setFocusIndex((prevIndex) => Math.max(prevIndex - 1, 0));
    }
  };

  return (
    <div tabIndex="0" onKeyD own={handleKeyDown}>
      <ul>
        {items.map((item, index) => (
          <li
            key={index}
            tabIndex={focusIndex() === index ? 0 : -1}
            style={{ backgroundColor: focusIndex() === index ? 'lightblue' : 'transparent' }}
          >
            {item}
          </li>
        ))}
      </ul>
    </div>
  );
}

В этом примере клавиши стрелок вверх и вниз изменяют индекс фокуса, который затем применяется к каждому элементу списка. Фокус устанавливается с помощью атрибута tabIndex, который позволяет выделить текущий элемент, а также изменяет его стиль.

Обработка комбинаций клавиш

Для улучшения пользовательского опыта часто используется обработка комбинаций клавиш, например, для выполнения определённых действий с помощью сочетаний клавиш. Solid.js позволяет удобно отслеживать нажатие нескольких клавиш одновременно, используя стандартные события.

Пример реализации:

import { createSignal } from 'solid-js';

function KeyCombination() {
  const [message, setMessage] = createSignal('');

  const handleKeyDown = (e) => {
    if (e.ctrlKey && e.key === 's') {
      setMessage('Ctrl + S нажата');
    } else if (e.altKey && e.key === 'Enter') {
      setMessage('Alt + Enter нажата');
    }
  };

  return (
    <div tabIndex="0" onKeyD own={handleKeyDown}>
      <p>{message()}</p>
    </div>
  );
}

В этом примере при нажатии комбинации клавиш Ctrl + S или Alt + Enter на экран выводится соответствующее сообщение. Можно добавлять дополнительные условия для обработки других сочетаний клавиш.

Использование useEffect для установки фокуса при рендере

В некоторых случаях необходимо установить фокус на элемент сразу после рендеринга компонента. Для этого в Solid.js можно использовать хук onCleanup для взаимодействия с DOM. В отличие от React, Solid.js не использует виртуальный DOM, что позволяет напрямую манипулировать элементами интерфейса.

Пример:

import { createEffect, createSignal } from 'solid-js';

function FocusOnLoad() {
  const [focused, setFocused] = createSignal(false);
  let inputRef;

  createEffect(() => {
    if (!focused()) {
      inputRef.focus();
      setFocused(true);
    }
  });

  return <input ref={inputRef} />;
}

В этом примере при рендере компонента фокус автоматически устанавливается на поле ввода с помощью inputRef.focus(). Это может быть полезно, например, для форм, где после загрузки страницы фокус должен быть на первом элементе формы.

Улучшение доступности

Для обеспечения максимальной доступности веб-приложений важно обеспечить правильное поведение с клавиатурой. Важно не только обрабатывать события клавиш, но и правильно стилизовать фокусируемые элементы. В Solid.js можно использовать различные способы выделения активных элементов с клавиатурным фокусом.

:focus {
  outline: 2px solid #005fcc;
}

Пример использования CSS для выделения фокуса на элементах интерфейса. Это помогает пользователям, которые полагаются на клавиатуру, чётко видеть, на каком элементе находится фокус.

Вывод

Навигация с клавиатуры — это важная часть создания удобных и доступных интерфейсов. Solid.js предоставляет гибкие инструменты для обработки событий клавиш, управления фокусом и улучшения взаимодействия с пользователем через клавиатуру. С помощью этих методов можно создавать высококачественные и доступные веб-приложения, соответствующие современным стандартам доступности.

Оглавление