From 1b9461a62ea9474e04f63df3737584b0e6414715 Mon Sep 17 00:00:00 2001
From: Johannes Meyer <johannes.meyer@icinga.com>
Date: Thu, 1 Jul 2021 11:15:40 +0200
Subject: [PATCH] IcingaCheckbox: Use css class `sr-only` again

`hidden=true` also hides elements from screen readers.
`sr-only` is now fixed for chrome.
`aria-hidden` true has been added because it suits
and was previosly missing.

fixes #4411

(cherry picked from commit ff30bf2393e71b143414244fa841d021a56fff14)
---
 library/Icinga/Web/View/Helper/IcingaCheckbox.php | 6 +++---
 public/css/icinga/layout-structure.less           | 7 +++++--
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/library/Icinga/Web/View/Helper/IcingaCheckbox.php b/library/Icinga/Web/View/Helper/IcingaCheckbox.php
index 5031265ae..07cf01fee 100644
--- a/library/Icinga/Web/View/Helper/IcingaCheckbox.php
+++ b/library/Icinga/Web/View/Helper/IcingaCheckbox.php
@@ -11,8 +11,7 @@ class IcingaCheckbox extends \Zend_View_Helper_FormCheckbox
             $attribs['id'] = $this->view->protectId('icingaCheckbox_' . $name);
         }
 
-        $attribs['class'] = (isset($attribs['class']) ? $attribs['class'] : '');
-        $attribs['hidden'] = true;
+        $attribs['class'] = (isset($attribs['class']) ? $attribs['class'] . ' ' : '') . 'sr-only';
         $html = parent::formCheckbox($name, $value, $attribs, $checkedOptions);
 
         $class = 'toggle-switch';
@@ -23,7 +22,8 @@ class IcingaCheckbox extends \Zend_View_Helper_FormCheckbox
         return $html
             . '<label for="'
             . $attribs['id']
-            . '" class="'
+            . '" aria-hidden="true"'
+            . ' class="'
             . $class
             . '"><span class="toggle-slider"></span></label>';
     }
diff --git a/public/css/icinga/layout-structure.less b/public/css/icinga/layout-structure.less
index 97fa5b2b6..9b8cefb50 100644
--- a/public/css/icinga/layout-structure.less
+++ b/public/css/icinga/layout-structure.less
@@ -133,17 +133,20 @@ body {
 
 /*
  * Class to hide content from users but available for screen reader
- * @todo(mh): Replace .audible class
+ * Based on: https://cloudfour.com/thinks/see-no-evil-hidden-content-and-accessibility/
  */
 .sr-only {
   border: 0;
   clip: rect(0 0 0 0);
+  clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
+  -webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
   height: 1px;
   margin: -1px;
   overflow: hidden;
   padding: 0;
-  position: absolute;
+  position: fixed; // absolute causes view port glitches in chrome (#4310)
   width: 1px;
+  white-space: nowrap;
 }
 
 // Hide non-javascript elements if javascript is enabled