Фокус на кнопке

Question

.modal-close {
    position: absolute;
    top: 78px;
    right: 90px;
    width: 22px;
    height: 22px;
    border: 0;
    cursor: pointer;
    padding: 0;
    background-color: transparent;
}    

.modal-close::before,
.modal-close::after {
    position: absolute;
    content: "";
    width: 24px;
    height: 3px;
    top: 40%;
    left: 0;
    background-color: #f0595a;
    opacity: 0.3;
}

.modal-close::before {
    transform: rotate(45deg);
}

.modal-close::after {
    transform: rotate(-45deg);
}

.modal-close:hover::before,
.modal-close:hover::after {
  opacity: 1;
}

.modal-close:focus::before,
.modal-close:focus::after {
  opacity: 1;
}

.visually-hidden {
   position: absolute;
   clip: rect(0, 0, 0, 0);
   width: 1px;
   height: 1px;
}

<button class="modal-close" type="button">
   <span class="visually-hidden">Закрыть</span>
</button>

Подскажите, пожалуйста, с какой ошибкой может быть связан подобный фокус на кнопке закрытия формы?

Answer 1

Я думаю что стоит заменить свойства у класса visibility-hidden:

position: absolute;
clip: rect(0, 0, 0, 0);
width: 1px;
height: 1px;

на обычный display: none, потому как те свойства не скрывают полностью span, лежащий внутри кнопки.

.modal-close {
  position: absolute;
  top: 78px;
  right: 90px;
  width: 22px;
  height: 22px;
  border: 0;
  cursor: pointer;
  padding: 0;
  background-color: transparent;
}

.modal-close::before,
.modal-close::after {
  position: absolute;
  content: "";
  width: 24px;
  height: 3px;
  top: 40%;
  left: 0;
  background-color: #f0595a;
  opacity: 0.3;
}

.modal-close::before {
  transform: rotate(45deg);
}

.modal-close::after {
  transform: rotate(-45deg);
}

.modal-close:hover::before,
.modal-close:hover::after {
  opacity: 1;
}

.modal-close:focus::before,
.modal-close:focus::after {
  opacity: 1;
}

.visually-hidden {
  display: none;
}

<button class="modal-close" type="button">
   <span class="visually-hidden">Закрыть</span>
</button>

Answer 2

Пример

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  clip: rect(0, 0, 0, 0);
  margin: -1px;
  overflow: hidden;
}

.modal-close {
  position: absolute;
  top: 78px;
  right: 90px;
  width: 22px;
  height: 22px;
  border: 0;
  cursor: pointer;
  padding: 0;
  background-color: transparent;
}

.modal-close::before,
.modal-close::after {
  position: absolute;
  content: "";
  width: 24px;
  height: 3px;
  top: 40%;
  left: 0;
  background-color: #f0595a;
  opacity: 0.3;
}

.modal-close::before {
  transform: rotate(45deg);
}

.modal-close::after {
  transform: rotate(-45deg);
}

.modal-close:hover::before,
.modal-close:hover::after {
  opacity: 1;
}

.modal-close:focus::before,
.modal-close:focus::after {
  opacity: 1;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  clip: rect(0, 0, 0, 0);
  margin: -1px;
  overflow: hidden;  
}

<button class="modal-close" type="button">
   <span class="visually-hidden">Закрыть</span>
</button>

БЛОГ НА HUSL

Фокус на кнопке

Ответы (2 шт):