Дмитрий
fff2dff499
Phase 10 audit Pa11y нашёл WCAG2AA G18 contrast Fail на 404 ErrorView support link: `<a class="text-primary">support@liderra.app</a>`. Diagnosis через Playwright browser_evaluate computed-style: - Link color: rgb(15, 110, 86) = #0F6E56 (Vuetify text-primary = Forest teal) - Parent `.v-main.error-main` bg: rgb(1, 32, 25) = #012019 (теало-нуар) - Contrast: 2.77:1 < 4.5:1 → WCAG2AA Fail Pa11y предложил `#fcfffe` (white-on-white false-suggest). Реальный fix — заменить teal на light color, читаемый на noir. Изменения ErrorMeta.vue:56,98: - class="text-primary" → class="err-help__link" - + локальный CSS class: .err-help__link { color: #d3dad8; text-decoration: underline; } .err-help__link:hover { color: #ffffff; } Color #d3dad8 vs #012019 = contrast ~12:1 (passes WCAG AAA). Verify (после `npx vite build` чтобы Laravel переключился на production assets; dev HMR через :5175 продолжал отдавать cached chunk): - npx pa11y --standard WCAG2AA http://127.0.0.1:8000/no-such-path-404 → **No issues found** ✅ - npx vue-tsc --noEmit → 0 errors - npx vitest run → 79/79 files, 614/614 + 3 skipped (0 regression) Forgot-alert contrast (другие 2 Pa11y errors на /forgot) — Vuetify info-variant theme, требует design-decision Платон/брендбук; defer в Q.DEFER.002 (A). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
110 lines
2.8 KiB
Vue
110 lines
2.8 KiB
Vue
<script setup lang="ts">
|
||
/**
|
||
* ErrorMeta — мета-блоки ErrorView: status-list (только для 500),
|
||
* RequestId/IncidentId с кнопкой копирования, и помощь-mailto (только 404).
|
||
*
|
||
* Sprint 4 Phase B/3 — split ErrorView (audit O-refactor-04 закрытие).
|
||
*/
|
||
defineProps<{
|
||
code: '404' | '403' | '500';
|
||
showStatusList?: boolean;
|
||
showRequestId?: boolean;
|
||
requestIdLabel?: string;
|
||
requestId?: string;
|
||
}>();
|
||
|
||
const statusList = [
|
||
{ name: 'API', status: 'ok' },
|
||
{ name: 'Telegram', status: 'degraded' },
|
||
{ name: 'YooKassa', status: 'ok' },
|
||
];
|
||
|
||
async function copyRequestId(id: string | undefined) {
|
||
if (id) {
|
||
await navigator.clipboard.writeText(id);
|
||
}
|
||
}
|
||
|
||
function statusColor(s: string): string {
|
||
return s === 'ok' ? '#2E8B57' : s === 'degraded' ? '#D9A441' : '#B83A3A';
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div v-if="showStatusList" class="status-list">
|
||
<span v-for="s in statusList" :key="s.name" class="status-item">
|
||
<span class="dot" :style="{ background: statusColor(s.status) }" />
|
||
{{ s.name }} ·
|
||
{{ s.status === 'ok' ? 'OK' : s.status === 'degraded' ? 'деградация' : 'недоступен' }}
|
||
</span>
|
||
</div>
|
||
|
||
<div v-if="showRequestId" class="err-id">
|
||
<span class="text-caption text-medium-emphasis">{{ requestIdLabel }}</span>
|
||
<span class="request-id">{{ requestId }}</span>
|
||
<v-btn
|
||
icon="mdi-content-copy"
|
||
variant="text"
|
||
size="x-small"
|
||
:aria-label="`Скопировать ID ${requestIdLabel}`"
|
||
@click="copyRequestId(requestId)"
|
||
/>
|
||
</div>
|
||
|
||
<p v-if="code === '404'" class="err-help text-caption">
|
||
Что-то не так? Напишите в
|
||
<a href="mailto:support@liderra.app" class="err-help__link">support@liderra.app</a>
|
||
</p>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.status-list {
|
||
display: flex;
|
||
gap: 16px;
|
||
margin-bottom: 16px;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
}
|
||
.status-item {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
font-size: 12px;
|
||
color: #b1c2bd;
|
||
font-family: 'JetBrains Mono', ui-monospace, monospace;
|
||
}
|
||
.status-item .dot {
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.err-id {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
background: rgba(255, 255, 255, 0.05);
|
||
padding: 6px 10px;
|
||
border-radius: 6px;
|
||
margin-bottom: 12px;
|
||
}
|
||
.request-id {
|
||
font-family: 'JetBrains Mono', ui-monospace, monospace;
|
||
font-size: 12px;
|
||
color: #fff;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.err-help {
|
||
color: #7a8c87;
|
||
margin-top: 16px;
|
||
}
|
||
.err-help__link {
|
||
color: #d3dad8;
|
||
text-decoration: underline;
|
||
}
|
||
.err-help__link:hover {
|
||
color: #ffffff;
|
||
}
|
||
</style>
|