Проблеми з фокусом та підтримка вдосконалення
Створення доступних React-компонентів потребує більшого, ніж просто додавання ARIA-міток. Ви повинні враховувати те, як користувачі переміщуються вашим інтерфейсом за допомогою клавіатури.
Я документую свій шлях створення повністю доступного навігаційного компонента з нуля. У цьому оновленні я зосереджуюсь на двох основних аспектах: виправленні «пасток клавіатури» (keyboard traps) та підготовці до більш плавного керування підсписками.
Виправлення «пастки клавіатури»
Поширена проблема виникає, коли користувач використовує Shift+Tab для переходу до компонента. Якщо фокус потрапляє на посилання всередині закритого підсписку, контур фокусу зникає. Це критична помилка для користувачів клавіатури.
Щоб виправити це, я впровадив зміну логіки:
• Якщо фокус потрапляє на останній елемент закритого підсписку, система переміщує фокус на батьківську кнопку у верхньому рядку. • Я використовую слухач подій onFocus, щоб виявити це конкретне переміщення. • Логіка перевіряє, чи є сфокусований елемент останнім у компоненті. • Якщо так, код ідентифікує предка у верхньому рядку та переміщує фокус туди.
Це гарантує, що користувач ніколи не втратить своє місце в інтерфейсі.
Налаштування закриття підсписків
Коли ви закриваєте батьківське меню, усі відкриті підменю всередині нього також мають закритися. Саме так працюють стандартні операційні системи.
Щоб реалізувати це в React без проблем із продуктивністю, я уникав зберігання функцій у state. Зберігання функцій у state спричиняє непотрібні рендери.
Замість цього я використав інший підхід:
• Я створив Map всередині useRef. • Цей Map зберігає функції закриття, пов'язані з батьківськими елементами. • Коли запитується масив навігації, система впроваджує ці функції в об'єкти. • Використання Ref дозволяє мені оновлювати ці зв'язки без спричинення рендерингу.
Це створює основу для чистої та передбачуваної поведінки меню.
Далі я реалізую безпосередню логіку закриття цих підсписків.
Джерело: https://dev.to/shaynaproductions/focus-issues-and-refinement-support-417l