Дмитрий
6387706be6
A11y rescan Pattern B — scoped CSS `.sep { color: #92907b; }` повторяется
в 8 компонентах (page-stats / page-meta / hero-meta containers с точкой-
разделителем `·`). На ivory page background #f6f3ec даёт contrast
2.92:1, ниже WCAG 2.1 AA 4.5:1 threshold.
Fix: #92907b → #6b6356 — same warm-grey hue, darker tone, gives
5.33:1 contrast. 8 files:
- views/{DealsView,BillingView,KanbanView,ReportsView}.vue
- components/dashboard/DashboardPageHead.vue
- components/deals/DealDetailHero.vue
- components/admin/tenants/TenantsStatsHeader.vue
- components/admin/tenant-detail/TenantDetailHeader.vue
Closes Pa11y «color-contrast» violations на /dashboard /billing /reports
(8 .sep elements total flagged).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
67 lines
2.2 KiB
Vue
67 lines
2.2 KiB
Vue
<script setup lang="ts">
|
||
/**
|
||
* DashboardPageHead — приветствие + meta-строка (новые лиды / средняя стоимость) +
|
||
* range-toggle (Сегодня / 7 дней / 30 дней / Период…). Использует Vue 3.5
|
||
* `defineModel` для двусторонней привязки range.
|
||
*
|
||
* Sprint 4 Phase B/3 — split DashboardView (audit O-refactor-04 закрытие).
|
||
*/
|
||
const range = defineModel<'today' | '7d' | '30d' | 'custom'>({ required: true });
|
||
</script>
|
||
|
||
<template>
|
||
<header class="page-head">
|
||
<div>
|
||
<h1 class="text-h4 mb-2 page-greet">Доброе утро, <em class="text-primary">Иван</em></h1>
|
||
<div class="page-meta text-body-2 text-medium-emphasis">
|
||
<span><span class="num text-primary">+3</span> новых лида с утра</span>
|
||
<span class="sep">·</span>
|
||
<span>сегодня <span class="num">11</span> · вчера <span class="num">38</span></span>
|
||
<span class="sep">·</span>
|
||
<span>средняя стоимость <span class="num">2 248 ₽</span></span>
|
||
</div>
|
||
</div>
|
||
<v-btn-toggle v-model="range" mandatory color="primary" density="comfortable" variant="outlined">
|
||
<v-btn value="today" size="small">Сегодня</v-btn>
|
||
<v-btn value="7d" size="small">7 дней</v-btn>
|
||
<v-btn value="30d" size="small">30 дней</v-btn>
|
||
<v-btn value="custom" size="small">Период…</v-btn>
|
||
</v-btn-toggle>
|
||
</header>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.page-head {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
gap: 16px;
|
||
}
|
||
|
||
.page-greet {
|
||
font-variation-settings: 'opsz' 28;
|
||
letter-spacing: -0.018em;
|
||
}
|
||
.page-greet em {
|
||
font-style: normal;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.page-meta {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 6px;
|
||
align-items: center;
|
||
}
|
||
.page-meta .sep {
|
||
/* WCAG2AA 4.5:1 fix (was #92907b → 2.92:1 on ivory; #6b6356 → 5.33:1). */
|
||
color: #6b6356;
|
||
}
|
||
.num {
|
||
font-family: 'JetBrains Mono', ui-monospace, monospace;
|
||
font-feature-settings: 'tnum';
|
||
font-weight: 500;
|
||
}
|
||
</style>
|