From 1baafc33d0c8a2b7628eb9955b35631c1df28f9e Mon Sep 17 00:00:00 2001
From: Fabian Salomon <4098510+fsalomon@users.noreply.github.com>
Date: Mon, 27 Apr 2026 11:05:13 +0200
Subject: [PATCH] Use sr-only to hide state labels visually

---
 library/Icingadb/Util/PluginOutput.php        | 14 ++++++-------
 public/css/common.less                        |  6 ------
 .../Icingadb/Util/PluginOutputTest.php        | 20 +++++++++----------
 3 files changed, 17 insertions(+), 23 deletions(-)

diff --git a/library/Icingadb/Util/PluginOutput.php b/library/Icingadb/Util/PluginOutput.php
index 782d1a41..d66e35f5 100644
--- a/library/Icingadb/Util/PluginOutput.php
+++ b/library/Icingadb/Util/PluginOutput.php
@@ -34,13 +34,13 @@ class PluginOutput extends HtmlString
     protected const TEXT_REPLACEMENTS = [
         "\t",
         "\n",
-        '<span class="state-ball ball-size-m state-ok">[OK]</span>',
-        '<span class="state-ball ball-size-m state-warning">[WARNING]</span>',
-        '<span class="state-ball ball-size-m state-critical">[CRITICAL]</span>',
-        '<span class="state-ball ball-size-m state-unknown">[UNKNOWN]</span>',
-        '<span class="state-ball ball-size-m state-up">[UP]</span>',
-        '<span class="state-ball ball-size-m state-down">[DOWN]</span>',
-        '<span class="state-ball ball-size-m state-info">[INFO]</span>',
+        '<span class="state-ball ball-size-m state-ok"><i class="sr-only">[OK]</i></span>',
+        '<span class="state-ball ball-size-m state-warning"><i class="sr-only">[WARNING]</i></span>',
+        '<span class="state-ball ball-size-m state-critical"><i class="sr-only">[CRITICAL]</i></span>',
+        '<span class="state-ball ball-size-m state-unknown"><i class="sr-only">[UNKNOWN]</i></span>',
+        '<span class="state-ball ball-size-m state-up"><i class="sr-only">[UP]</i></span>',
+        '<span class="state-ball ball-size-m state-down"><i class="sr-only">[DOWN]</i></span>',
+        '<span class="state-ball ball-size-m state-info"><i class="sr-only">[INFO]</i></span>',
         '@@@@@@'
     ];
 
diff --git a/public/css/common.less b/public/css/common.less
index d8d9a483..1bb85b0d 100644
--- a/public/css/common.less
+++ b/public/css/common.less
@@ -13,12 +13,6 @@
 .plugin-output {
   .monospace();
   word-break: break-word;
-
-  .state-ball {
-    color: transparent;
-    overflow: hidden;
-    white-space: nowrap;
-  }
 }
 
 div.show-more {
diff --git a/test/php/library/Icingadb/Util/PluginOutputTest.php b/test/php/library/Icingadb/Util/PluginOutputTest.php
index 9d7aeaf8..f8eac877 100644
--- a/test/php/library/Icingadb/Util/PluginOutputTest.php
+++ b/test/php/library/Icingadb/Util/PluginOutputTest.php
@@ -38,9 +38,9 @@ class PluginOutputTest extends TestCase
 INPUT;
 
         $expectedOutput = <<<'EXPECTED_OUTPUT'
-<span class="state-ball ball-size-m state-ok">[OK]</span> Dummy state
-    \_ <span class="state-ball ball-size-m state-ok">[OK]</span> Fake &quot;state&quot;
-    \_ <span class="state-ball ball-size-m state-warning">[WARNING]</span> Fake state again
+<span class="state-ball ball-size-m state-ok"><i class="sr-only">[OK]</i></span> Dummy state
+    \_ <span class="state-ball ball-size-m state-ok"><i class="sr-only">[OK]</i></span> Fake &quot;state&quot;
+    \_ <span class="state-ball ball-size-m state-warning"><i class="sr-only">[WARNING]</i></span> Fake state again
 EXPECTED_OUTPUT;
 
         $this->checkOutput($expectedOutput, $input);
@@ -55,7 +55,7 @@ EXPECTED_OUTPUT;
 INPUT;
 
         $expectedOutput = <<<'EXPECTED_OUTPUT'
-<span class="state-ball ball-size-m state-ok">[OK]</span> Dummy
+<span class="state-ball ball-size-m state-ok"><i class="sr-only">[OK]</i></span> Dummy
 EXPECTED_OUTPUT;
 
         $this->checkOutput($expectedOutput, $input, 10);
@@ -86,9 +86,9 @@ INPUT;
 
         $expectedOutput = <<<'EXPECTED_OUTPUT'
 Hello <h3>World</h3>, this "is" a <strong>test</strong>.
-<span class="state-ball ball-size-m state-ok">[OK]</span> Dummy state
-    \_ <span class="state-ball ball-size-m state-ok">[OK]</span> Fake "state"
-    \_ <span class="state-ball ball-size-m state-warning">[WARNING]</span> Fake state again
+<span class="state-ball ball-size-m state-ok"><i class="sr-only">[OK]</i></span> Dummy state
+    \_ <span class="state-ball ball-size-m state-ok"><i class="sr-only">[OK]</i></span> Fake "state"
+    \_ <span class="state-ball ball-size-m state-warning"><i class="sr-only">[WARNING]</i></span> Fake state again
 text <span> ends </span> here
 EXPECTED_OUTPUT;
 
@@ -106,7 +106,7 @@ INPUT;
 
         $expectedOutput = <<<'EXPECTED_OUTPUT'
 Hello <h3>World</h3>, this "is" a <strong>test</strong>.
-<span class="state-ball ball-size-m state-ok">[OK]</span> Dummy state
+<span class="state-ball ball-size-m state-ok"><i class="sr-only">[OK]</i></span> Dummy state
     special chars: !@#$%^&amp;*()_+{}|:"&lt;&gt;?`-=[]\;',&#8203;./
 text <span> ends </span> here
 EXPECTED_OUTPUT;
@@ -150,7 +150,7 @@ EXPECTED_OUTPUT;
 
             $input = sprintf('[%s] Test', $s);
             $expectedOutput = sprintf(
-                '<span class="state-ball ball-size-m state-%s">[%s]</span> Test',
+                '<span class="state-ball ball-size-m state-%s"><i class="sr-only">[%s]</i></span> Test',
                 $l,
                 $s
             );
@@ -172,7 +172,7 @@ EXPECTED_OUTPUT;
 
             $input = sprintf('%s [%s] Test', $dummyHtml, $s);
             $expectedOutput = sprintf(
-                '%s <span class="state-ball ball-size-m state-%s">[%s]</span> Test',
+                '%s <span class="state-ball ball-size-m state-%s"><i class="sr-only">[%s]</i></span> Test',
                 $dummyHtml,
                 $l,
                 $s