VKUI
VKUI copied to clipboard
[Bug]: ActionSheet невозможно переходить табом или стрелочками с клавиатуры по ActionSheetItem с пропом selectable
Описание
Если попробовать пример в доке https://vkcom.github.io/VKUI/#/ActionSheet пример, где ActionSheet
состоит из спискаActionSheetItem
со свойством selectable
, то с клавиатуры становится невозможно выбрать никое значение, кроме первых двух.
При попытке использовать Tab
или стрелочки ActionSheet закрывается.
Причина в том, что в режиме selectable
ActionSheetItem
представляет собой радио-кнопку. В примере у всех ActionSheetItem
одинаковое значение name
а значит все ActionSheetItem
превращаются в группу радиокнопок. У группы радио кнопок в браузерах иначе обрабатываются события с клавиатуры.
Tab
перекидывает фокус на следующий интерактивный элемент вне группы радио-кнопок.
При этом переходить между радио-кнопками можно с помощь стрелочек. Но у нас это не получается потому что переход между радио-кнопками генерирует событие click
. А у нас по умолчанию клик закрывает ActionSheet
. При этом если использовать disableAutoClose
на ActionSheetItem
, то переход работает, но уже невозможно поменять значение радио кнопки.
Возможно текущая реализация в режиме selectable
вводит в заблуждение и стоит переделать не используя нативный radio
.
Стоит продумать логику взаимодействия с клавиатуры в таком режиме. На данный момент этот режим с клавиатуры недоступен.
Версия
6.0.3
В каких браузерах воспроизводится проблема?
Chrome
Шаги воспроизведения
- На странице ActionSheet с клавиатуры, табом, перейти на кнопку "Выделяемые"
- Открыть
ActionSheet
c клавиатуры с помощьюEnter
/Space
. - Попробовать походить по элементам ActionSheetItem с помощью
Tab
.
- Фокус прыгнет вне ActionSheet или на последний элемент, и т.д. Не очень очевидно куда прыгает фокус.
- Если попробовать перейти с помощью стрелочки вправо, то будет выделен второй элемент в списке,
ActionSheet
закроется, значение фильтра поменяется.
Ожидаемое поведение
Ожидается, что будет возможно выбрать элемент с клавиатуры и это будет интуитивно понятно.
Мне, как пользователю хочется, чтобы можно было также перейти по табу и выбрать опцию нажатием Enter
.
Но возможно, что хочется сохранить использованием радио-кнопок, тогда надо починить выбор опций и тоже продумать как следует с этим компонентом взаимодействовать.
Скриншоты
https://github.com/VKCOM/VKUI/assets/5443359/b60711f2-e09a-4011-ad47-9a16aa68c0d6
Тут фокус прыгает из-за нажатия Tab
, а потом закрывается из-за нажатия стрелочки вправо.
Пример с воспроизведением
No response