Урок 12. Задания
⚡ Кратко
Три задания на варианты и четыре вопроса.
Задания
Задание 1. Строка списка
Строка файла: при наведении подсвечивается фон и появляется кнопка «Удалить» (в обычном состоянии её не видно). Кнопка должна оставаться доступной с клавиатуры — то есть появляться и при фокусе.
Задание 2. Чекбокс-карточка
Карточка с чекбоксом внутри: когда чекбокс отмечен, карточка получает цветную рамку и галочку в углу. Без JavaScript.
Задание 3. Поле с ошибкой
Поле ввода, у которого при aria-invalid="true" краснеет рамка,
появляется красный текст подсказки и меняется цвет иконки.
Подсказка должна читаться скринридером.
Проверка понимания
Выберите один вариант ответа — правильный подсветится после клика.
Вопрос 1
Что делает класс group-hover:text-sky-600?
Вопрос 2
Где должен стоять элемент с классом peer?
Вопрос 3
Чем focus-visible лучше focus для кнопок?
Вопрос 4
Как подсветить карточку, если внутри неё отмечен чекбокс?