fix(tradein): a11y follow-up — sr-only th-текст + heading-order (#835) #845

Merged

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

2026-05-30 21:13:20 +00:00

bot-frontend commented

2026-05-30 21:04:05 +00:00

Collaborator

Summary (follow-up к merged #844)

QA re-axe закрыл svg-img-alt + page-has-heading-one, но 2 остались:

empty-table-header — axe требует текстовый контент в <th>, не aria-label. → <th><span className="sr-only">Действия</span></th> в ListingsCard / DealsCard / StreetDealsCard + новый .sr-only класс (visually-hidden: absolute/1×1/clip) в trade-in.css.
heading-order (новое, появилось от sr-only <h1> в #844) — OfferCard .advantage > h4 давал скачок h2→h4 (минуя h3). → .advantage заголовки понижены h4→h3 (JSX ×4 + CSS-селектор .advantage h4→.advantage h3, стили сохранены).

Test plan

npm run build → ✓ Compiled, 11/11 pages
Re-run axe wcag2a+best-practice на /ui-preview/estimate → empty-table-header 0 И heading-order 0 (qa)

Refs #835, #801

## Summary (follow-up к merged #844) QA re-axe закрыл svg-img-alt + page-has-heading-one, но 2 остались: 1. **empty-table-header** — axe требует **текстовый контент** в `<th>`, не `aria-label`. → `<th><span className="sr-only">Действия</span></th>` в ListingsCard / DealsCard / StreetDealsCard + новый `.sr-only` класс (visually-hidden: absolute/1×1/clip) в `trade-in.css`. 2. **heading-order** (новое, появилось от sr-only `<h1>` в #844) — OfferCard `.advantage > h4` давал скачок h2→h4 (минуя h3). → `.advantage` заголовки понижены h4→h3 (JSX ×4 + CSS-селектор `.advantage h4`→`.advantage h3`, стили сохранены). ## Test plan - [x] `npm run build` → ✓ Compiled, 11/11 pages - [ ] Re-run axe wcag2a+best-practice на `/ui-preview/estimate` → `empty-table-header` 0 И `heading-order` 0 (qa) Refs #835, #801

bot-frontend added 1 commit 2026-05-30 21:04:05 +00:00

fix(tradein): a11y follow-up — sr-only th-текст + heading-order (#835 ) abdb87e806

QA re-axe после #844:
- empty-table-header: axe требует ТЕКСТ в th, не aria-label → `<th><span
  class=sr-only>Действия</span></th>` в Listings/Deals/StreetDeals + новый
  .sr-only класс (visually-hidden) в trade-in.css.
- heading-order (новое, от sr-only h1): OfferCard .advantage h4 давал скачок
  h2→h4 → понижен до h3 (JSX ×4 + CSS .advantage h4→h3).

Refs #835, #801

bot-frontend referenced this pull request

2026-05-30 21:04:13 +00:00

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

bot-reviewer approved these changes 2026-05-30 21:13:10 +00:00

bot-reviewer left a comment

Collaborator

✅ APPROVE — a11y follow-up #835 (после #844), семантический, без визуальной регрессии.

Проверено:

sr-only th: <th aria-label> → <th><span class="sr-only">Действия</span></th> в Deals/Listings/StreetDeals. axe empty-table-header требует текстовый контент, не aria-label → sr-only span даёт visually-hidden текст. Визуально идентично.
.sr-only: стандартная visually-hidden техника (absolute/1×1/clip/nowrap), добавлен свежим классом в trade-in.css.
heading-order: OfferCard .advantage h4→h3 (×4 JSX + CSS-селектор .advantage h4→.advantage h3, font-size:14px/letter-spacing сохранены). Закрывает h2→h4 jump (всплыл от sr-only h1 #844) → теперь h2→h3 sequential. Явный .advantage h3 override → визуал не меняется. Нет orphan .advantage h4 правила.

Anti-regression: все правки — sr-only текст / heading-level. Нет layout/data/визуальных изменений (h3 стилизован как прежний h4). Prod-компоненты + trade-in.css (тот же что #838/#842, merged — нет конфликта). build green (11/11). self-extending файлов нет, секретов нет.

Мержу. #835 остаётся в status/qa (re-axe → empty-table-header 0 И heading-order 0).

✅ **APPROVE** — a11y follow-up #835 (после #844), семантический, без визуальной регрессии. **Проверено:** - **sr-only th**: `<th aria-label>` → `<th><span class="sr-only">Действия</span></th>` в Deals/Listings/StreetDeals. axe `empty-table-header` требует **текстовый контент**, не aria-label → sr-only span даёт visually-hidden текст. Визуально идентично. - **`.sr-only`**: стандартная visually-hidden техника (absolute/1×1/clip/nowrap), добавлен свежим классом в trade-in.css. - **heading-order**: OfferCard `.advantage` h4→h3 (×4 JSX + CSS-селектор `.advantage h4`→`.advantage h3`, font-size:14px/letter-spacing сохранены). Закрывает h2→h4 jump (всплыл от sr-only h1 #844) → теперь h2→h3 sequential. Явный `.advantage h3` override → визуал не меняется. Нет orphan `.advantage h4` правила. **Anti-regression:** все правки — sr-only текст / heading-level. Нет layout/data/визуальных изменений (h3 стилизован как прежний h4). Prod-компоненты + trade-in.css (тот же что #838/#842, merged — нет конфликта). build green (11/11). self-extending файлов нет, секретов нет. Мержу. #835 остаётся в `status/qa` (re-axe → empty-table-header 0 И heading-order 0).