Клавиша Tab ломает спойлер. Как исправить?

Question

[Даниил]

При разработке случайно нажал клавишу Tab и вот что выяснилось:

Я накидал простенький пример со спойлером:
JsFiddle

Чтобы понять суть проблемы нажмите на любое место на вёрстке, после чего нажмите клавишу Tab...
Спойлер сломается от того, что в фокусе благодаря табу оказалась ссылка с номером.

Как исправить?

Спасибо откликнувшимся!

Comments

[iBird Rose]

ну тк сделай нормальную реализацию спойлера, а не костыль через height. тогда и проблемы не будет твоей

[Даниил]

iBird Rose, каким методом спойлер считается нормальным?

[iBird Rose]

Даниил Хачатурян, через скрытие и показ блока. гугли примеры https://codepen.io/tag/spoiler

[Даниил]

iBird Rose, делают через jQuery слайд
я хочу без JQuery написать, пока не вижу вариантов
К тому же, скрытие блока не позволяет сделать его плавное появление, -- на display не работает transition, а opacity вместе с display не работает...

Не мог бы ты показать, пожалуйста, пример, который ты считаешь правильным?

[WbICHA]

Даниил Хачатурян, жсом меняй высоту элемента.
От нуля до

scrollHeight - [padding элемента top / bottom (не помню какой точно)]

.

[dmitry-toster]

Даниил Хачатурян, правильный пример

[Антон Литвиненко]

Добавлю, что с помощью табов не только ничего не должно ломаться, а наоборот, должны работать фокусы на интерактивных елементах, это часть темы про доступность

[Даниил]

Антон Литвиненко, да, я поэтому и обеспокоился этим) Потому что не буду же я отключать таб из-за такой мелочи, как раз недавно читал про юзабилити и доступность...

Answer 1

[Даниил Чистяков]

Не совсем понял вопроса? Лично у меня ничего не ломается (если Вы про придание вёрстке читабельного вида)

Comments

[Даниил]

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

[Даниил Чистяков]

Если Вас действительно, это заботит, то поясню, что клавиша tab используется для переключения между элементами, если Вас не устраивает, что нарушен порядок, то Вы можете проставить свойства tabindex, хотя сомневаюсь, что на это стоит тратить время. В любом случае, код Вас ждёт ниже:

<div class="spoiler" tabindex="0">
  <div class="spoiler__btn">Spoiler</div>
  <ul class="spoiler__list" tabindex="0">
    <li class="spoiler__item" tabindex="0">First</li>
    <li class="spoiler__item" tabindex="0"><a href="tel:+782123">+782123</a></li>
    <li class="spoiler__item" tabindex="0">Third</li>
  </ul>
</div>

<div class="another">
  <h3>Another Section</h3>
</div>

[Даниил Чистяков]

Даниил, а этот код отключит эту возможность:

<div class="spoiler">
  <div class="spoiler__btn">Spoiler</div>
  <ul class="spoiler__list">
    <li class="spoiler__item" tabindex="-1">First</li>
    <li class="spoiler__item" tabindex="-1"><a tabindex="-1" href="tel:+782123">+782123</a></li>
    <li class="spoiler__item" tabindex="-1">Third</li>
  </ul>
</div>

<div class="another">
  <h3>Another Section</h3>
</div>