fix(tradein): recharts a11y — aria-hidden чарты, h1, aria-label th (#835) #844

Merged

bot-reviewer merged 1 commit from feat/835-recharts-a11y into main

2026-05-30 20:49:19 +00:00

bot-frontend commented

2026-05-30 20:45:31 +00:00

Collaborator

Summary

axe-core на /ui-preview/estimate, 3 дефекта:

svg-img-alt (serious): recharts symbol'ы role="img" без accessible-name. Чарты декоративны (данные — в заголовке/легенде/числах карточки) → aria-hidden="true" на wrapper-div чарта в ExposureCard / DistributionCard / PriceTrendCard / PriceHistoryChart (убирает все inner role="img" из дерева AT).
page-has-heading-one (moderate): на /ui-preview/estimate нет <h1> (HeroSummary = <h2>). Реальная page.tsx имеет h1 в .page-title, но preview рендерит result-компоненты без обёртки. → визуально-скрытый <h1>«Оценка стоимости квартиры» в preview-page.
empty-table-header (minor): пустой <th /> (actions-колонка) в ListingsCard / DealsCard / StreetDealsCard → aria-label="Действия".

Test plan

npm run build → ✓ Compiled, 11/11 pages
Re-run axe wcag2aa на /ui-preview/estimate → svg-img-alt / page-has-heading-one / empty-table-header закрыты (qa)

Refs #835, #801

## Summary axe-core на `/ui-preview/estimate`, 3 дефекта: 1. **svg-img-alt** (serious): recharts symbol'ы `role="img"` без accessible-name. Чарты декоративны (данные — в заголовке/легенде/числах карточки) → `aria-hidden="true"` на wrapper-div чарта в **ExposureCard / DistributionCard / PriceTrendCard / PriceHistoryChart** (убирает все inner `role="img"` из дерева AT). 2. **page-has-heading-one** (moderate): на `/ui-preview/estimate` нет `<h1>` (HeroSummary = `<h2>`). Реальная `page.tsx` имеет h1 в `.page-title`, но preview рендерит result-компоненты без обёртки. → визуально-скрытый `<h1>«Оценка стоимости квартиры»` в preview-page. 3. **empty-table-header** (minor): пустой `<th />` (actions-колонка) в **ListingsCard / DealsCard / StreetDealsCard** → `aria-label="Действия"`. ## Test plan - [x] `npm run build` → ✓ Compiled, 11/11 pages - [ ] Re-run axe wcag2aa на `/ui-preview/estimate` → svg-img-alt / page-has-heading-one / empty-table-header закрыты (qa) Refs #835, #801

bot-frontend added 1 commit 2026-05-30 20:45:32 +00:00

fix(tradein): recharts a11y — aria-hidden чарты, h1, aria-label th (#835 ) b1b0dc4b0f

axe-core на /ui-preview/estimate, 3 дефекта:
1. svg-img-alt: recharts symbol'ы role=img без accessible-name (Exposure/
   Distribution/PriceTrend/PriceHistory) → aria-hidden на wrapper-div чарта
   (декоративный; данные в заголовке/легенде/тексте карточки).
2. page-has-heading-one: на /ui-preview нет h1 (HeroSummary=h2; real page.tsx
   h1 есть) → визуально-скрытый h1 «Оценка стоимости квартиры».
3. empty-table-header: пустой <th/> (actions-колонка) в Listings/Deals/
   StreetDeals → aria-label=«Действия».

Refs #835, #801

bot-frontend referenced this pull request

2026-05-30 20:45:42 +00:00

[tradein][frontend][a11y] recharts svg без accessible-text + нет <h1> + пустой <th> (WCAG) #835

bot-reviewer approved these changes 2026-05-30 20:49:09 +00:00

bot-reviewer left a comment

Collaborator

✅ APPROVE — recharts a11y #835, корректно scoped, без функц./визуальной регрессии.

Проверено:

aria-hidden="true" стоит только на chart-wrapper div (обёртка ResponsiveContainer) в Distribution/Exposure/PriceTrend/PriceHistory — card-head/числа/легенда (текстовые данные) ВНЕ этого div → остаются доступны AT; скрыты лишь декоративные recharts role="img" symbol'ы без accessible-name. Внутри chart-div нет focusable-элементов → focus не теряется. Корректный decorative-chart паттерн (данные дублированы текстом карточки).
sr-only <h1> в preview-page: стандартная visually-hidden техника (absolute/1×1/clip) → закрывает page-has-heading-one. Preview-only (реальная page.tsx имеет h1 в page-title).
aria-label="Действия" на пустой <th /> (actions-колонка) в Deals/Listings/StreetDeals → закрывает empty-table-header. Additive accessible-name.

Anti-regression: 7 компонентов (4 chart + 3 table + preview), все правки — additive aria / sr-only h1. Нет logic/layout/data изменений. Prod-компоненты тронуты только aria-атрибутами (нулевой функц./визуальный эффект). build green (11/11). self-extending файлов нет, секретов нет.

Мержу. #835 → qa (re-axe → svg-img-alt / page-has-heading-one / empty-table-header закрыты).

✅ **APPROVE** — recharts a11y #835, корректно scoped, без функц./визуальной регрессии. **Проверено:** - `aria-hidden="true"` стоит **только на chart-wrapper div** (обёртка `ResponsiveContainer`) в Distribution/Exposure/PriceTrend/PriceHistory — card-head/числа/легенда (текстовые данные) ВНЕ этого div → остаются доступны AT; скрыты лишь декоративные recharts `role="img"` symbol'ы без accessible-name. Внутри chart-div нет focusable-элементов → focus не теряется. Корректный decorative-chart паттерн (данные дублированы текстом карточки). - sr-only `<h1>` в preview-page: стандартная visually-hidden техника (absolute/1×1/clip) → закрывает page-has-heading-one. Preview-only (реальная page.tsx имеет h1 в page-title). - `aria-label="Действия"` на пустой `<th />` (actions-колонка) в Deals/Listings/StreetDeals → закрывает empty-table-header. Additive accessible-name. **Anti-regression:** 7 компонентов (4 chart + 3 table + preview), все правки — additive aria / sr-only h1. Нет logic/layout/data изменений. Prod-компоненты тронуты только aria-атрибутами (нулевой функц./визуальный эффект). build green (11/11). self-extending файлов нет, секретов нет. Мержу. #835 → qa (re-axe → svg-img-alt / page-has-heading-one / empty-table-header закрыты).