From 18bf4141e9be62e7a1210dc7b4aacaa846f73bbf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9?=
 <donnalee11681676@gmail.com>
Date: Thu, 14 May 2026 10:07:35 +0300
Subject: [PATCH] fix(a11y): Vuetify tonal alert/chip + text-warning contrast
 overrides (Patterns C+D+E)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A11y rescan Patterns C+D+E — Vuetify default theme colours для tonal-variant
.v-alert .v-alert__content (4.18:1) и tonal .v-chip__content (success 4.25:1
/ warning 2.25:1), плюс `.text-warning` utility used в count badges (2.03:1
на ivory) — все ниже WCAG 2.1 AA 4.5:1.

Global CSS overrides in app/resources/css/app.css:

Pattern C — alert tonal content (2 URLs: billing, admin/system):
  .v-alert--variant-tonal .v-alert__content {
      color: #0a0700;   /* near-black, 16:1 on ivory */
  }

Pattern D — chip tonal success/warning content (4 URLs: billing,
admin/{tenants,billing,incidents,system}):
  .v-chip--variant-tonal.bg-success .v-chip__content { color: #1f5e3a }
  .v-chip--variant-tonal.bg-warning .v-chip__content { color: #6a4504 }

Pattern E — .text-warning utility (2 URLs: admin/billing «5», admin/incidents
«1»). Critical specificity fix: Vuetify defines selector as
`.v-theme--liderraForest .text-warning { color: rgb(var(--v-theme-warning))
!important }` (specificity 0,2,0 + !important). Naive `.text-warning
!important` (0,1,0) loses on specificity even with !important. Match Vuetify
selector exactly so override wins on cascade order (loaded after Vuetify CSS):

  .v-theme--liderraForest .text-warning,
  .v-theme--liderraForest.text-warning,
  .text-warning {
      color: #6a4504 !important;
  }

Closes 4+11+2 = 17 color-contrast violations across 5 distinct URLs.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 app/resources/css/app.css | 40 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)

diff --git a/app/resources/css/app.css b/app/resources/css/app.css
index 22fea661..6a792ddc 100644
--- a/app/resources/css/app.css
+++ b/app/resources/css/app.css
@@ -34,3 +34,43 @@ body {
 .v-field-label {
     --v-medium-emphasis-opacity: 0.7;
 }
+
+/*
+ * A11y rescan 2026-05-14: Vuetify tonal-variant default text color produces
+ * 2.0-4.4:1 contrast on ivory page background (#f6f3ec) — below WCAG 2.1 AA
+ * 4.5:1 threshold. Pa11y rescan flagged across /billing /admin/billing
+ * /admin/incidents /admin/system. Fix: darken text color inside .v-alert and
+ * .v-chip tonal variants; also darken .text-warning utility used in count
+ * badges (text-h6 text-warning «5» on ivory was 2.03:1).
+ */
+.v-alert--variant-tonal .v-alert__content,
+.v-alert--variant-tonal .v-alert__content strong,
+.v-alert--variant-tonal .v-alert__content code {
+    color: #0a0700;
+}
+
+.v-chip--variant-tonal.bg-success .v-chip__content,
+.v-chip--variant-tonal.text-success .v-chip__content {
+    /* deep forest green, ≥4.5:1 on tonal pale-success bg */
+    color: #1f5e3a;
+}
+
+.v-chip--variant-tonal.bg-warning .v-chip__content,
+.v-chip--variant-tonal.text-warning .v-chip__content {
+    /* dark amber, ≥4.5:1 on tonal pale-warning bg + on ivory page bg */
+    color: #6a4504;
+}
+
+/*
+ * .text-warning is used both inside chips (covered above) and standalone
+ * (text-h6 count badges on ivory background). Vuetify defines the utility as
+ * `.v-theme--liderraForest .text-warning { color: rgb(var(--v-theme-warning)) !important }`
+ * which has specificity 0,2,0 + !important — plain `.text-warning !important`
+ * (0,1,0) loses on specificity even with !important. Match Vuetify's selector
+ * exactly so our override wins on cascade-order (loaded after Vuetify CSS).
+ */
+.v-theme--liderraForest .text-warning,
+.v-theme--liderraForest.text-warning,
+.text-warning {
+    color: #6a4504 !important;
+}