Подсветка строки таблицы при фокусе на ссылке
В таблице со ссылками подсветка текущей строки помогает удерживать связь между действием и соседними данными. При этом сама строка не обязана становиться отдельной остановкой клавиатуры.
Назначение
В таблице со ссылками подсветка текущей строки помогает удерживать связь между действием и соседними данными. При этом сама строка не обязана становиться отдельной остановкой клавиатуры.
Как это работает
Псевдокласс focus-within применяется к строке, когда фокус находится на одном из её потомков. Контур ссылки сохраняется, чтобы было видно не только строку, но и точную цель действия.
Пример
<style>.files{border-collapse:collapse;width:100%}.files th,.files td{padding:.7rem;text-align:start;border-bottom:1px solid #bbc8bf}.files tbody tr:focus-within{background:#e1f5e9}.files a:focus-visible{outline:2px solid #176b50;outline-offset:3px}</style>
<table class="files"><caption>Учебные разделы</caption><thead><tr><th scope="col">Название</th><th scope="col">Действие</th></tr></thead><tbody>
<tr><th scope="row">Разметка</th><td><a href="#html-topic">Перейти к HTML</a></td></tr>
<tr><th scope="row">Оформление</th><td><a href="#css-topic">Перейти к CSS</a></td></tr>
</tbody></table><h2 id="html-topic">HTML</h2><h2 id="css-topic">CSS</h2>Что должно получиться
При перемещении Tab подсвечивается строка выбранной ссылки. Текст ссылки указывает конкретный раздел, а подписи строк и колонок остаются элементами таблицы.
Граница применения и частая ошибка
Не добавляйте tabindex="0" каждой строке ради подсветки: лишние остановки замедляют навигацию. Обработчик клика на всей строке также требует продуманной семантики и не должен мешать выделению текста.
Самостоятельная проверка
Пройдите обе ссылки клавиатурой и повторите проверку без мыши. Измените цвет фона: контур фокуса должен оставаться различимым. Убедитесь, что обычная строка без ссылки не получает лишний фокус.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.