# Спека: доступность страницы «Тенанты» — имя поля поиска и AA-контраст счётчика активных

## Цель

Привести два компонента админ-страницы «Тенанты» к требованиям WCAG 2.1 AA, под которые уже
написаны (но пока красные) frontend-тесты: поле поиска должно иметь программно-доступное имя
(`<label>`), а счётчик активных — цвет с контрастом ≥ 4.5:1 на тёплом ivory-фоне вместо
низкоконтрастной утилиты. Результат: оба теста зелёные, вся frontend-сюита зелёная.

## Контракт доступности компонентов {#D1}

`TenantsFilters.vue` — поле поиска (`v-text-field` с классом `search-input`):

- обязано иметь видимое и программно-доступное имя — `<label>`, текст которого содержит подстроку
  `ИНН` (главный критерий поиска по тенантам);
- сейчас у поля только `placeholder` — для скринридера это НЕ доступное имя; добавляется prop
  `label`, и Vuetify рендерит элемент `<label>` внутри поля;
- соседние выпадающие списки фильтра уже имеют свой `label` — они не трогаются.

`TenantsStatsHeader.vue` — счётчик активных тенантов (`<span class="num …">`):

- число активных должно подаваться классом `stat-success` (локальный AA-класс), а не
  Vuetify-утилитой `text-success`;
- класс `text-success` на этом `<span>` исчезает; визуально остаётся зелёный акцент, но с
  контрастом ≥ 4.5:1;
- остальные счётчики строки — вне объёма этой правки (тест их не покрывает).

## Текущее красное состояние {#D2}

Перед реализацией два теста падают, и это ожидаемо:

- `tests/Frontend/TenantsFilters.spec.ts` — `w.find('.search-input label')` не находит элемент
  (`exists()` ложно), потому что у поля нет `label`;
- `tests/Frontend/TenantsStatsHeader.spec.ts` — `w.find('.stat-success')` не находит элемент,
  потому что счётчик активных размечен `num text-success`.

Падение по причине «нет реализации», а не из-за опечатки/ошибки импорта — это фиксируется
запуском обоих тестов до правки.

## Критерий приёмки {#D3}

- оба указанных теста проходят (label с подстрокой `ИНН`; `.stat-success` с текстом `5`;
  отсутствие `.num.text-success`);
- полная frontend-сюита (`tests/Frontend/**`) зелёная — ранее наблюдалось 944 passed /
  3 skipped / 2 failed; целевое — те же 2 теста переходят в passed, прочие не регрессируют.

## Конвенция локального AA-класса {#D4}

В `TenantsStatsHeader.vue` уже есть прецедент локального WCAG-фикса: класс `.sep` получил цвет
`#6b6356` (≈ 5.33:1 на ivory) взамен низкоконтрастного, с пояснительным комментарием. Класс
`stat-success` следует той же конвенции: цвет `#1B5E20`, замеренный контраст ≈ 7.1:1 на
ivory-фоне `#F6F3EC` (выше порога AA с запасом), с комментарием о контрасте. Сохраняется
моноширинная разметка числа (наследуется от класса `num`: JetBrains Mono, `tnum`).

```verified-context-json
[
  {"id":"C1","kind":"EXTRACTED","ref":"app/tests/Frontend/TenantsStatsHeader.spec.ts","anchor":"const active = w.find('.stat-success');"},
  {"id":"C2","kind":"EXTRACTED","ref":"app/resources/js/components/admin/tenants/TenantsStatsHeader.vue","anchor":"class=\"num text-success\""},
  {"id":"C3","kind":"EXTRACTED","ref":"app/tests/Frontend/TenantsFilters.spec.ts","anchor":"w.find('.search-input label')"},
  {"id":"C4","kind":"EXTRACTED","ref":"app/resources/js/components/admin/tenants/TenantsFilters.vue","anchor":"class=\"search-input\""}
]
```
