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

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

Пример реализации навигации по элементам списка на React:

const List = ({ items }) => {
  const [focusedIndex, setFocusedIndex] = React.useState(0);
  const listRef = React.useRef(null);

  React.useEffect(() => {
    const handleKeyDown = (e) => {
      if (e.key === 'ArrowDown') {
        setFocusedIndex((prev) => Math.min(prev + 1, items.length - 1));
      } else if (e.key === 'ArrowUp') {
        setFocusedIndex((prev) => Math.max(prev - 1, 0));
      } else if (e.key === 'Enter') {
        alert(`Выбран элемент: ${items[focusedIndex]}`);
      }
    };
    const currentList = listRef.current;
    currentList.addEventListener('keydown', handleKeyDown);
    return () => currentList.removeEventListener('keydown', handleKeyDown);
  }, [items, focusedIndex]);

  return (
    <ul tabIndex={0} ref={listRef} style={{ outline: 'none' }}>
      {items.map((item, index) => (
        <li
          key={item}
          style={{ background: index === focusedIndex ? '#bde4ff' : 'transparent' }}
        >
          {item}
        </li>
      ))}
    </ul>
  );
};

Такой подход улучшает UX и делает приложение более доступным для пользователей с ограниченными возможностями.

Расскажи подробнее про клавиатурную навигацию, которую реализовывал.