Задача: Исправьте вкладки

Условие: Исправьте вкладки

Цель темы «Исправьте вкладки» — разделить смысловую структуру, раскладку и интерактивное состояние. Для темы «Исправьте вкладки» предметный результат подтверждается так: проверьте компонент с длинными данными, без JavaScript и только клавиатурой. Проверьте «Исправьте вкладки» в компоненте внутри узкого контейнера, а не viewport, выполнив действие: проверьте компонент с длинными данными, без JavaScript и только клавиатурой. Результат задачи «Исправьте вкладки» должен сохранять семантический HTML, адаптивную раскладку и понятные состояния управления.

Стартовый код

<article class="card">
  <h2>Исправьте вкладки</h2>
  <p>Содержимое компонента</p>
</article>

Критерии готовности

• Проверьте компонент с длинными данными, без JavaScript и только клавиатурой применительно к теме «Исправьте вкладки»
• Сопоставьте результат «Исправьте вкладки» с целью «разделить смысловую структуру, раскладку и интерактивное состояние» и объясните каждое использованное условие
• Повторите проверку «Исправьте вкладки» с другими данными и убедитесь, что исключён риск: копирование демонстрационного компонента целиком переносит лишние зависимости и состояния
• Назначение «Исправьте вкладки» понятно без декоративного оформления

Усложнение задачи

Перенесите тему «Исправьте вкладки» в изолированном демо и изменяйте по одному условию. После каждого запуска «Исправьте вкладки» проверяйте: проверьте компонент с длинными данными, без JavaScript и только клавиатурой.

Самопроверка решения

Для «Исправьте вкладки» сначала проверьте компонент с длинными данными, без JavaScript и только клавиатурой. После этого сравните исходное и изменённое состояние «Исправьте вкладки» на одном и том же содержимом. Затем исключите следующие риски: Копирование демонстрационного компонента целиком переносит лишние зависимости и состояния — это предметный риск для «Исправьте вкладки»; Фиксированные размеры, которые перестают вмещать реальное содержимое при использовании «Исправьте вкладки»; Потеря содержимого при печати или отключении фоновых изображений; для «Исправьте вкладки» проверьте это отдельно.