Кейс доступности: выпадающий список, которым нельзя нормально управлять с клавиатуры
В WindoM был кастомный GlassSelect: визуально он выглядел как обычный dropdown, но для пользователя клавиатуры и screen reader всё было хуже, чем кажется.
Было:
• Dropdown открывался с клавиатуры.
• Но ArrowUp / ArrowDown не перемещали активный пункт.
• Home / End не прыгали в начало и конец списка.
• Escape не закрывал список с возвратом фокуса на кнопку.
• Enter / Space не выбирали текущий пункт после навигации.
Что это ломало для пользователя:
человек мог попасть в элемент, но дальше терял ожидаемую модель управления. Для screen reader и клавиатуры это превращает простой выбор настройки в угадайку: «открылось ли меню, где я сейчас, как выбрать и как выйти?»
Что изменили:
• Добавили управление ArrowUp / ArrowDown, Home / End, Enter / Space и Escape.
• Сохранили фокус на trigger-кнопке и возвращаем его туда после выбора или закрытия.
• Добавили связь trigger ↔ listbox через ARIA.
• Добавили визуальное состояние активного пункта при клавиатурной навигации.
Стало:
кастомный select теперь ближе к привычному поведению нативного элемента: можно открыть, пройти по вариантам, выбрать нужный и безопасно закрыть без мыши.
Такие проверки удобно раскладывать по компонентам с помощью Accessibility Auditor Skill: он помогает быстро понять, где проблема в UX для клавиатуры и screen reader, а где достаточно маленького точечного PR.
Доказательство:
Issue: https://github.com/YehudaBriskman/WindoM/issues/243
PR: https://github.com/YehudaBriskman/WindoM/pull/269
Post #78
4