Исправляет управление фокусом в карточках «На практике»

[kotoyama]

Привет!

Заметила, что код предполагает, что в свёрнутом состоянии все интерактивные элементы карточки должны быть недоступны через таб, но на деле якоря заголовков остаются интерактивными. Погуляла по сайту ещё и заметила, что то же самое касается <iframe> и <details>, поэтому добавила их в getActiveElements. Возможно, в карточках может встречаться что-то ещё из такого интерактивного, что в теории легко упустить. Поправьте если что :)

Ещё из изменений:

• Сделала так, чтобы tabindex полностью снимался вместо проставления ему нулевого значения. Сделано это было в частности потому что details получал "двойной" фокус из-за summary, поэтому так мы как бы восстанавливаем нативное поведение.
• Добавила фокус на контент при раскрытии карточки. Вот эта статья хорошо объясняет, почему это важно.

P.S. В процессе ещё обнаружила баг, связанный с фокусом, но не хочу слишком сильно раздувать этот PR, да и обсудила бы это сперва, потому что лично мне недостаёт понимания, почему именно так было реализовано. Но вообще я заметила, что getActiveElements зачем-то группирует элементы по типу, из-за чего таб внутри раскрытой карточки ходит не в том порядке, в каком элементы по факту идут на странице. Лично меня такое поведение как постоянного клавопользователя сбило с толку. Вдобавок это приводит к ошибке, когда, например, блоков с кодом в карточке нет, и фокусу дальше некуда уйти (вот тут это можно увидеть в действии). В чём идея такой группировки я тоже, честно говоря, не поняла. Предлагаю решить это через квери селектор, чтобы сохранить порядок.
P.P.S. Я уже чуть позже это заметила, но иногда зацикливание фокуса происходит, а иногда — нет. Так-то не до конца уверена, как правильно тут должно быть 🤔 Наверное, зацикливания вообще быть не должно т.к. мы не в модалке находимся, но послушала бы и другие мнения.

[github-actions]

Превью контента из опубликовано.