Не работает focus при табуляции, но работает hover
.icon-wrapper { display: flex; align-items: center; justify-content: center;} .link-social-icon { display: flex; justify-content: center; align-items: center; width: 44px; height: 44px; color: #afb1b8; cursor: pointer;}.icon-wrapper .link-social-icon:hover,.icon-wrapper .link-social-icon:focus {color: var(--secondary-color); background-color: var(--hover-color);border radius: 50%;}.icon-social { fill: currentColor;}<div class="icon-wrapper"> <a class="link-social-icon icon-instagram" tabindex="0"> <svg class="icon-social" width="20" height="20"> <use href="./images/symbol-defs.svg#instagram-icon"></use> </svg>Так вот вопрос, пока не задал атрибут tabindex со значеним 0, для ссылки не работал фокус при табуляции (если открываю тулзы в Хроме и отдельно выбираю псевдоклас focus, то все работает, но при нажатии TAB не срабатывает на странице. Хочу понять в чем у меня ошибка, ведь данный атрибут "tabindex" не все могут знать и я сам его случайно нашел в интернете. Заранее огромное спасибо за помощь, ведь может у меня ошибка или я что-то не понимаю