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

В Material-UI (MUI) управление фокусом и навигация с клавиатуры являются важной частью обеспечения доступности компонентов. MUI изначально проектируется с поддержкой ARIA и стандартных событий клавиатуры, что позволяет пользователям перемещаться между элементами интерфейса без использования мыши.

Фокус и управление Tab

Клавиша Tab используется для перехода между фокусируемыми элементами. В MUI любой компонент, который принимает tabIndex или имеет интерактивное поведение (Button, TextField, Checkbox, Select), автоматически становится частью последовательности фокуса.

Пример базового использования:

import Button from '@mui/material/Button';

Особенности:

  • tabIndex={0} — элемент участвует в стандартной последовательности Tab.
  • tabIndex={-1} — элемент фокусируется только программно (element.focus()), исключён из обычного Tab-перехода.
  • Управление фокусом важно при модальных окнах, всплывающих меню и кастомных компонентах.

Навигация внутри компонентов с меню и списков

Компоненты, такие как Menu, Select, Autocomplete и Tabs, реализуют собственную логику навигации с клавиатуры.

Меню и списки

Для Menu и MenuItem предусмотрены следующие горячие клавиши:

  • ArrowDown — переход к следующему элементу списка.
  • ArrowUp — переход к предыдущему элементу списка.
  • Home / End — переход к первому или последнему элементу.
  • Enter / Space — выбор элемента.
  • Esc — закрытие меню.

Пример:

import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import Button from '@mui/material/Button';
import { useState } from 'react';

function SimpleMenu() {
  const [anchorEl, setAnchorEl] = useState(null);
  
  const handleClick = (event) => setAnchorEl(event.currentTarget);
  const handleClose = () => setAnchorEl(null);

  return (
    <>
      
      
        Пункт 1
        Пункт 2
        Пункт 3
      
    
  );
}

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

Навигация в компонентах Tabs

Компонент Tabs поддерживает навигацию с клавиатуры в соответствии с рекомендациями WAI-ARIA:

  • ArrowRight / ArrowLeft — переключение между вкладками.
  • Home / End — переход к первой или последней вкладке.
  • Enter / Space — активация выбранной вкладки.

Пример:

import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
import { useState } from 'react';

function KeyboardTabs() {
  const [value, setValue] = useState(0);
  
  const handleChange = (event, newValue) => setValue(newValue);

  return (
    
      
      
      
    
  );
}

Вкладки автоматически обрабатывают навигацию стрелками и фокусировку.

Использование события onKeyDown

Для более сложных компонентов иногда требуется вручную обработать клавиатуру. MUI позволяет это через обработчики событий:

import TextField from '@mui/material/TextField';

function CustomInput() {
  const handleKeyDown = (event) => {
    if (event.key === 'Enter') {
      console.log('Нажата клавиша Enter');
    }
  };

  return ;
}

Важно помнить о передаче события дальше, если нужно сохранить стандартное поведение:

event.preventDefault(); // отмена стандартного действия
event.stopPropagation(); // прекращение распространения события

Фокусировка программно

MUI предоставляет методы для управления фокусом через рефы. Это полезно для модальных окон или динамически появляющихся компонентов.

import Button from '@mui/material/Button';
import { useRef } from 'react';

function FocusButton() {
  const buttonRef = useRef(null);

  const focusButton = () => buttonRef.current.focus();

  return (
    <>
      
      
    
  );
}

Доступность и ARIA

MUI компоненты по умолчанию используют ARIA-атрибуты для обеспечения совместимости с клавиатурой и экранными читалками:

  • aria-haspopup для кнопок открытия меню.
  • aria-controls для связи элементов управления и областей.
  • aria-expanded для раскрывающихся списков.
  • aria-selected для активных вкладок.

Правильная настройка этих атрибутов обеспечивает предсказуемое поведение навигации с клавиатуры и улучшает доступность интерфейса.

Советы по навигации

  • Не блокировать стандартную последовательность Tab без необходимости.
  • Использовать фокусировку программно только при открытии модальных окон или меню.
  • Обрабатывать клавиши стрелок внутри кастомных списков и таблиц.
  • Проверять доступность с клавиатурой при разработке любых интерактивных компонентов.
Оглавление