Блог

Я пытаюсь работать с кнопкой переключения начальной загрузки 5 (используя стиль контура для более очевидного визуального акцента). Однако опыт UX-это не совсем то, на что я надеюсь. (См. https://getbootstrap.com/docs/5.0/forms/checks-radios/#outlined-styles)

Переключатель сам по себе работает хорошо, проблема в фокусе (или, я бы сказал, после фокуса щелчка). Когда кнопка находится в непроверенном состоянии, визуальная подсказка заметна, так как кнопка очерчена. Когда кнопка находится в проверенном состоянии, снова видна визуальная подсказка, потому что кнопка заполнена. Когда кнопка переходит из непроверенного состояния в отмеченное, изменение становится очевидным при переходе от очерченного состояния к заполненному.

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

Проблема становится еще более очевидной при работе с несколькими флажками в группе кнопок. (См. https://getbootstrap.com/docs/5.0/components/button-group/#checkbox-and-radio-button-groups)

Я попытался использовать javascript для вызова blur click события флажка, и хотя этот подход имеет ограниченную степень успеха, он ничего не делает на сенсорных устройствах, поскольку виртуальный указатель устройства остается зависшим над кнопкой. Я также попытался вызвать focus другой элемент на странице с тем же результатом.

У кого-нибудь есть какие-нибудь предложения?