Use sr-only to hide state labels visually

This commit is contained in:
Fabian Salomon 2026-04-27 11:05:13 +02:00
parent 38ec7e06cb
commit 1baafc33d0
3 changed files with 17 additions and 23 deletions

View file

@ -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>',
'@@@@@@'
];

View file

@ -13,12 +13,6 @@
.plugin-output {
.monospace();
word-break: break-word;
.state-ball {
color: transparent;
overflow: hidden;
white-space: nowrap;
}
}
div.show-more {

View file

@ -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