Я добавил tabindex="0", чтобы пользователи могли переходить на вкладку div и использовать клавиатуру для взаимодействия с ним. Если щелкнуть или нажать Enter / пробел, когда он активен, появится всплывающее окно div. Стиль фокуса, который он применяет к div при нажатии на вкладку, хорош, но я заметил, что когда пользователи нажимают div, чтобы активировать его, стиль фокуса применяется и к нему в это время. Если они удерживают мышь, к ней применяется стиль фокуса.
Как я могу обеспечить визуальный фокус для этого div только тогда, когда пользователь перешел на него, но не отображать фокус, когда пользователь щелкнул по нему?
В настоящее время я снимаю фокус с помощью .blur(), когда он активирован, но все еще мигает этот стиль фокусировки, и он всегда виден, пока пользователь удерживает мышь.
Аналогичным интерфейсом, демонстрирующим желаемое поведение, является приложение Pages на iCloud.com. Вы можете использовать вкладку, чтобы сфокусировать различные значки на панели инструментов, а затем, когда вы переходите к своему имени и нажимаете клавишу возврата / пробела, появляется всплывающее окно, и фокус на вашем имени удаляется. В этот момент цвет текста имени изменится на более темно-серый. Если вы щелкнули по своему имени вместо использования клавиатуры, вы никогда не увидите фокус, примененный к вашему имени, вы увидите изменение цвета текста только при появлении всплывающего окна.
