From a245e06dc700c8e3027b5f9b0bc0e7c5406f8cb1 Mon Sep 17 00:00:00 2001
From: Zefir Kirilov <contact@zefir.pro>
Date: Fri, 13 Mar 2026 16:49:53 +0200
Subject: [PATCH] Hidden SVGs from ARIA and applied consistent use of `fill`

---
 src/components/AppHeader.ts       |  4 ++--
 src/components/ServiceGroupRow.ts |  1 +
 src/components/ServiceRow.ts      | 12 ++++++------
 src/components/StatusOverview.ts  |  1 +
 4 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/components/AppHeader.ts b/src/components/AppHeader.ts
index 3e5421f..a30354d 100644
--- a/src/components/AppHeader.ts
+++ b/src/components/AppHeader.ts
@@ -56,9 +56,9 @@ export class AppHeader extends Component {
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
-              class="size-6"
-              fill="currentColor"
+              class="size-6 fill-current"
               viewBox="0 0 256 256"
+              aria-hidden="true"
             >
               <path
                 d="M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM40,72H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16ZM216,184H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z"
diff --git a/src/components/ServiceGroupRow.ts b/src/components/ServiceGroupRow.ts
index 6602936..867b650 100644
--- a/src/components/ServiceGroupRow.ts
+++ b/src/components/ServiceGroupRow.ts
@@ -36,6 +36,7 @@ export class ServiceGroupRow extends ServiceRow {
         xmlns="http://www.w3.org/2000/svg"
         class="size-5 fill-neutral-300 transition-transform ease-out group-open/services:rotate-90"
         viewBox="0 0 256 256"
+        aria-hidden="true"
       >
         <path
           d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm29.66,109.66-40,40a8,8,0,0,1-11.32-11.32L140.69,128,106.34,93.66a8,8,0,0,1,11.32-11.32l40,40A8,8,0,0,1,157.66,133.66Z"
diff --git a/src/components/ServiceRow.ts b/src/components/ServiceRow.ts
index 9e545f1..5bd0787 100644
--- a/src/components/ServiceRow.ts
+++ b/src/components/ServiceRow.ts
@@ -12,35 +12,35 @@ export class ServiceRow extends Component {
     { color: string; bar: string; label: string; icon: string }
   > = {
     [ServiceStatus.OPERATIONAL]: {
-      color: "text-emerald-400",
+      color: "fill-emerald-400",
       bar: "bg-emerald-400",
       label: "Operational",
       icon:
         `<path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm45.66,85.66-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32Z"></path>`,
     },
     [ServiceStatus.UNDER_MAINTENANCE]: {
-      color: "text-indigo-400",
+      color: "fill-indigo-400",
       bar: "bg-indigo-400",
       label: "Under Maintenance",
       icon:
         `<path d="M128 24a104 104 0 1 0 104 104A104.13 104.13 0 0 0 128 24m14.052 54.734a34.2 34.2 0 0 1 9.427 1.006 3.79 3.79 0 0 1 1.865 6.25l-17.76 19.265 2.682 12.485 12.484 2.677 19.266-17.782a3.79 3.79 0 0 1 6.25 1.865 34.4 34.4 0 0 1 1.02 8.333 34.122 34.122 0 0 1-47.833 31.282l-24.672 28.536a4 4 0 0 1-.187.203 15.168 15.168 0 0 1-21.448-21.453q.098-.095.203-.182l28.542-24.667a34.155 34.155 0 0 1 30.161-47.818" />`,
     },
     [ServiceStatus.DEGRADED_PERFORMANCE]: {
-      color: "text-yellow-400",
+      color: "fill-yellow-400",
       bar: "bg-yellow-400",
       label: "Degraded Performance",
       icon:
         `<path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm-8,56a8,8,0,0,1,16,0v56a8,8,0,0,1-16,0Zm8,104a12,12,0,1,1,12-12A12,12,0,0,1,128,184Z"></path>`,
     },
     [ServiceStatus.PARTIAL_OUTAGE]: {
-      color: "text-orange-400",
+      color: "fill-orange-400",
       bar: "bg-orange-400",
       label: "Partial Outage",
       icon:
         `<path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm-8,56a8,8,0,0,1,16,0v56a8,8,0,0,1-16,0Zm8,104a12,12,0,1,1,12-12A12,12,0,0,1,128,184Z"></path>`,
     },
     [ServiceStatus.MAJOR_OUTAGE]: {
-      color: "text-red-400",
+      color: "fill-red-400",
       bar: "bg-red-400",
       label: "Major Outage",
       icon:
@@ -122,8 +122,8 @@ export class ServiceRow extends Component {
         <svg
           xmlns="http://www.w3.org/2000/svg"
           class="size-5 ${style.color}"
-          fill="currentColor"
           viewBox="0 0 256 256"
+          aria-hidden="true"
           .innerHTML="${style.icon}"
         >
         </svg>
diff --git a/src/components/StatusOverview.ts b/src/components/StatusOverview.ts
index fca2805..916aab3 100644
--- a/src/components/StatusOverview.ts
+++ b/src/components/StatusOverview.ts
@@ -179,6 +179,7 @@ export class StatusOverview extends Component {
             xmlns="http://www.w3.org/2000/svg"
             class="size-6 ${style.color}"
             viewBox="0 0 256 256"
+            aria-hidden="true"
             .innerHTML="${style.icon}"
           >
           </svg>