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

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>';
     }

public/css/icinga/layout-structure.less

@@ -145,17 +145,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