Модуль 7 · урок 10 з 10
Практика модуля
Практика модуля коротка: більшість станів ти вже зробив по дорозі в модулях 4–6. Тут треба звести їх докупи, довести до ладу й перевірити — щоб на демо не виявилось, що якийсь екран у певному стані виглядає порожньою сторінкою.
КРОК 1Стан як одне значення
Перероби екран списку на розрізнюваний union: loading, error,
empty, no-results, data. Пріоритет опиши в одному
місці — чистою функцією. Перевір, що при збої запиту показується помилка,
а не «нічого не знайдено».
КРОК 2Скелетон
Зроби скелетон, який повторює макет рядка таблиці: ті самі висоти й ширини колонок.
Затримка 200 мс перед показом. Оновлення наявних даних — тонка смужка, а не повний
скелетон. Анімація вимикається при prefers-reduced-motion.
КРОК 3Помилки на трьох рівнях
Інтерсептор для загального (немає звʼязку, 500), обробка на екрані з людським
повідомленням і кнопкою «Спробувати ще раз», глобальний ErrorHandler
як остання сітка. Мок із модуля 4 уже вміє падати кожен N-й раз — скористайся цим
для перевірки.
КРОК 4Два порожні стани
Різні заголовки, підказки й дії для «даних ще немає» і «фільтр нічого не знайшов». У другому — покажи, які саме фільтри активні. Порожні комірки таблиці — прочерк, а не порожнеча.
КРОК 5Імена й стани
Кожна іконкова кнопка отримує aria-label. Поля повʼязані з підписами
через for, помилки — через aria-describedby.
Заголовки колонок отримують aria-sort. Декоративні іконки —
aria-hidden.
КРОК 6Клавіатура
Skip link на початку сторінки. Видимий :focus-visible скрізь.
Рядок таблиці фокусований і відкривається Enter та пробілом. Модалка тримає фокус,
закривається Escape і повертає фокус на кнопку.
КРОК 7Живі області
Додай приховану область із aria-live="polite": завантаження, кількість
знайдених, зміна сортування, збереження. Помилки збереження — assertive.
Не забудь скидання перед повторним однаковим повідомленням.
КРОК 8Аудит
Lighthouse в обох темах, axe DevTools, клавіатурний прогін основного сценарію,
режим протанопії для статусів, prefers-reduced-motion для анімацій.
Виправ знайдене й збережи скріншоти до і після.
- Кожен екран має всі чотири стани, і помилка не маскується під порожнечу.
- Скелетон повторює макет; при оновленні даних екран не блимає.
- Помилки обробляються на трьох рівнях, скрізь є дія «повторити».
- Два різні порожні стани з різними діями.
- Основний сценарій повністю проходиться з клавіатури.
- Фокус видно завжди; модалка тримає й повертає фокус.
- Контраст ≥ 4.5:1 для тексту в обох темах.
- Статуси розрізняються без кольору.
- Зміни стану оголошуються через
aria-live.
Що сказати ліду на демо
«Стан екрана — одне значення, тож неможливо показати одночасно скелетон і помилку. Пріоритет такий: завантаження, помилка, порожнеча, дані — і помилка стоїть перед порожнечею навмисно, бо інакше при збої користувач вирішить, що даних немає. Скелетон повторює макет, зʼявляється лише після 200 мс і не блимає при швидкій відповіді; оновлення показується смужкою, а не повним скелетоном. Порожніх станів два з різними діями. Увесь сценарій — від пошуку до збереження в модалці — проходиться з клавіатури, фокус повертається на місце. Контраст перевірив в обох темах, статуси розрізняються в режимі протанопії.»
Далі — модуль 8. Юніт-тести: пʼять тестів, які просить лід. Це найдешевша ціль плану
за співвідношенням зусиль і враження — і майже все, що треба протестувати, ти вже написав
чистими функціями: applyState, компаратор, валідатори, pickState.