# План: доступность страницы «Тенанты» (F-2) — TDD до зелёного (clean)

## Цель

Реализовать минимальные правки в двух Vue-компонентах админ-страницы «Тенанты», чтобы два уже
написанных красных a11y-теста стали зелёными, не сломав остальную frontend-сюиту. Поле поиска
получает `<label>` с подстрокой «ИНН»; счётчик активных переходит с `text-success` на локальный
AA-класс `stat-success` с заранее выбранным и проверенным по контрасту цветом `#1B5E20`.

## Выбранный цвет stat-success (зафиксирован до правки)

Цвет: `#1B5E20` (тёмно-зелёный). Замер контраста на фоне ivory `#F6F3EC`: яркость текста ≈ 0.0834,
фона ≈ 0.8975 → контраст ≈ **7.1 : 1**, выше порога WCAG 2.1 AA (4.5 : 1) с запасом. CSS-правило
`.stat-success { color: #1B5E20; }` добавляется в scoped-блок `TenantsStatsHeader.vue` рядом с
прецедентным локальным фиксом `.sep`, с комментарием о контрасте.

```skills-json
["test-driven-development"]
```

```steps-json
[
  {"op":"Bash","object":"npx vitest run --root app --config app/vitest.config.ts TenantsFilters TenantsStatsHeader","ref":"D2"},
  {"op":"Edit","object":"app/resources/js/components/admin/tenants/TenantsFilters.vue","ref":"D1"},
  {"op":"Edit","object":"app/resources/js/components/admin/tenants/TenantsStatsHeader.vue","ref":"D4"},
  {"op":"Bash","object":"npx vitest run --root app --config app/vitest.config.ts TenantsFilters TenantsStatsHeader","ref":"D3"},
  {"op":"Bash","object":"npx vitest run --root app --config app/vitest.config.ts","ref":"D3"}
]
```

Порядок отражает цикл TDD:

1. убедиться, что оба теста красные по причине отсутствия реализации;
2. `TenantsFilters.vue` — добавить prop `label="ИНН, юр. лицо, email админа…"` в `v-text-field`
   с классом `search-input`, чтобы Vuetify отрендерил элемент `<label>` с подстрокой «ИНН»;
3. `TenantsStatsHeader.vue` — заменить класс счётчика активных `num text-success` на
   `num stat-success` И добавить в scoped-стиль правило `.stat-success { color: #1B5E20; }`
   (контраст ≈ 7.1 : 1 на `#F6F3EC`) с пояснительным комментарием;
4. убедиться, что оба теста зелёные;
5. прогнать всю frontend-сюиту на отсутствие регрессий.

```verified-context-json
[
  {"id":"C1","kind":"EXTRACTED","ref":"app/resources/js/components/admin/tenants/TenantsStatsHeader.vue","anchor":"class=\"num text-success\""},
  {"id":"C2","kind":"EXTRACTED","ref":"app/resources/js/components/admin/tenants/TenantsFilters.vue","anchor":"class=\"search-input\""}
]
```

## Переговоры

### Круг 1

Цвет `stat-success` выбран и проверен ДО правки — `#1B5E20`, контраст ≈ 7.1 : 1 на `#F6F3EC`
(выше порога AA с запасом). Описание шага 3 явно содержит и смену класса, и создание CSS-правила
`.stat-success { color: #1B5E20; }`.

Просьба к наставнику: при одобрении зафиксируй в `recommendation` указание исполнителю —
например «реализовать по шагам 1–5: добавить `label` в `TenantsFilters.vue`; заменить класс на
`stat-success` и добавить правило `.stat-success { color: #1B5E20; }` в `TenantsStatsHeader.vue`;
прогнать оба теста и полную регрессию».
