Чеклист: SEO-условия и требования к реализации

SEO критично

Смысл всей схемы: краулер получает полный список фильтров в первом HTML, скрытие — только косметика на клиенте.

• Полный список фильтров рендерится на SSR.Сервер никогда не «отрезает» лишние — он не знает ширину экрана. Все 100% популярных фильтров в HTML-ответе.
• Каждый фильтр — <a href> на реальный URL фильтра.Не <button onClick> и не <div>. SPA-переход можно перехватывать через onClick + preventDefault, но href обязан быть — иначе краулеру нечего обходить и SSR теряет смысл.
• Скрытие — CSS-классами на тех же DOM-узлах.Хвост → visibility:hidden, жертва ради активного → display:none. Оба варианта остаются в DOM: контент индексируется, ссылки краулятся (вес скрытого текста у Google ниже — для задачи «найти страницы фильтров» этого достаточно).
• Запрещён условный рендер {visible && <Chip/>}.После гидрации ссылки исчезнут из DOM. Скрытие только через data-state/класс, элемент рендерится всегда.
• Запрещён skeleton вместо фильтров до замера.Первый кадр обязан быть финальным: CSS-клэмп (одна строка, overflow:hidden) уже прячет лишнее без JS. Никакого CLS.
• Проверка приёмки: curl / view-source содержит все <a> фильтров; с отключённым JS строка выглядит корректно (одна строка, ничего не торчит).

Слот кнопки «Очистить»

Кнопка живёт вне измеряемого списка и резервирует место всегда — её появление не двигает чипсы. Визуально она прижата к последнему видимому чипсу через transform: слот и резерв остаются в потоке, а свободный воздух собирается справа от кнопки.

Резерв мягкий. План А: когда активные чипсы расширяются, сначала они съедают эти 0,5 ширины — ни один фильтр не пропадает. План Б (схлопывание неактивных) включается только после исчерпания резерва. Неактивный хвост в резерв не пускаем: он клипуется по границе «ширина − резерв».

• Стелс-режим: visibility:hidden + disabled, пока нет активных.Не opacity:0 (остаётся кликабельной и в дереве доступности) и не display:none (слот схлопнется, появление кнопки сдвинет чипсы, замер станет нестабильным).
• Отступ 0,5 ширины — реализация.Текст кнопки статичный, ширина известна → проще всего зафиксировать в CSS (например, кнопка ≈110px → margin-left:55px). Динамический вариант — один замер при маунте и на fonts.ready:

  const w = clearRef.current.getBoundingClientRect().width; // работает и при visibility:hidden
  clearRef.current.style.marginLeft = `${Math.round(w * 0.5)}px`;

• Не закладывать «запас на активации» чипсов.Сколько фильтров активируют и насколько они распухнут — не предсказать. Рост активных сначала съедает резерв 0,5×, и только дальше пересчёт скрывает последний неактивный.

Раскладка и замер

Ширины не суммируем — браузер уже разложил чипсы, JS только читает результат.

• Список: flex-wrap:wrap + max-height одного ряда + overflow:hidden.Плюс min-width:0 и align-content:flex-start. Невлезшие чипсы переносятся на обрезанную вторую строку — целиком, без полусрезанных.
• Замер по offsetTop: перенёсся — значит не влез.Триггеры: маунт (useLayoutEffect), ResizeObserver контейнера, изменение [activeFilters], document.fonts.ready.
• Скрытым чипсам — aria-hidden="true" + tabindex="-1".Иначе Tab ходит по невидимым ссылкам.
• Активный фильтр не скрывается никогда.Если за границу вылетел активный — сначала отдать ему резерв 0,5× у «Очистить» (план А); если и этого мало — схлопнуть (display:none) последний неактивный перед ним и померить снова (план Б), активный поднимется в первый ряд.
• Предел паттерна зафиксирован.Если одни активные не помещаются в строку — это следующий этап («отдельная строка применённых фильтров»), сейчас достаточно не скрывать активные и не падать.

Приёмка QA-сценарии

• Ресайз окна туда-обратно: чипсы скрываются/возвращаются без мерцаний и бесконечных пересчётов.
• Активация последнего видимого фильтра: он остаётся видимым и расширяется, схлопывается его неактивный сосед.
• Первая активация: «Очистить» появляется, ни один чипс не сдвигается ни на пиксель.
• «Очистить» стоит вплотную к последнему видимому чипсу при любой ширине; без давления активных воздух справа от кнопки ≥ 0,5 её ширины, при расширении активных он ужимается вплоть до нуля — и только после этого схлопываются неактивные.
• Активировать все видимые фильтры по одному значению: ни один чипс не должен пропасть, пока резерв 0,5× не исчерпан.
• Tab-навигация не попадает на скрытые чипсы; скринридер их не читает.
• View-source (до JS): все ссылки фильтров в HTML; с отключённым JS строка выглядит как финальная.
• Медленный интернет: до загрузки веб-шрифта и после — состав видимых чипсов пересчитывается (fonts.ready), «прыжка» нет.

Мобильная версия живёт по своему паттерну (горизонтальный скролл) — рассинхрон видимости с десктопом не является багом, зафиксировано с дизайном.