:focus vs :focus-visible
Chrome
| case | :focus | :focus-visible | :focus:not( |
|---|---|---|---|
| Tab | + | + | - |
| Mouse click | + | - | + |
el.focus() | + | - | + |
Safari MacOS
| case | :focus | :focus-visible | :focus:not( |
|---|---|---|---|
| Tab* | + | + | - |
| Mouse click | - | - | - |
el.focus() | + | - | + |
*Для включения навигации через Tab, необходимо зайти в Настройки -> Дополнения -> При нажатии Tab объекты страницы подсвечиваются последовательно
Firefox
| case | :focus | :focus-visible | :focus:not( |
|---|---|---|---|
| Tab | + | + | - |
| Mouse click | + | - | + |
el.focus() | + | - | + |
Summary
| case | :focus | :focus-visible | :focus:not( |
|---|---|---|---|
| Tab | + | + | - |
| Mouse click | +-* | - | +-* |
el.focus() | + | - | + |
*Safari MacOS