Make form element descriptions accessible

Re-added the Help decorator to make sure an element's description
is being added in an accessible way.

library/Icinga/Web/Form.php

@@ -134,6 +134,7 @@ class Form extends Zend_Form
     public static $defaultElementDecorators = array(
         array('ViewHelper', array('separator' => '')),
         array('Errors', array('separator' => '')),
+        array('Help'),
         array('Label', array('separator' => '')),
         array('HtmlTag', array('tag' => 'div', 'class' => 'element'))
     );
@@ -538,13 +539,6 @@ class Form extends Zend_Form
             )
         ));
 
-        if (($description = $el->getDescription()) !== null && ($label = $el->getDecorator('label')) !== false) {
-            $label->setOptions(array(
-                'title' => $description,
-                'class' => 'has-feedback'
-            ));
-        }
-
         if ($el->getAttrib('autosubmit')) {
             $noScript = new NoScriptApply(); // Non-JS environments
             $decorators = $el->getDecorators();
@@ -590,6 +584,10 @@ class Form extends Zend_Form
             }
         }
 
+        if ($element->getDescription() !== null && ($help = $element->getDecorator('help')) !== false) {
+            $element->setAttrib('aria-describedby', $help->setAccessible()->getDescriptionId($element));
+        }
+
         return $element;
     }
 

library/Icinga/Web/Form/Decorator/Help.php

@@ -0,0 +1,93 @@
+<?php
+/* Icinga Web 2 | (c) 2013-2015 Icinga Development Team | GPLv2+ */
+
+namespace Icinga\Web\Form\Decorator;
+
+use Zend_Form_Element;
+use Zend_Form_Decorator_Abstract;
+use Icinga\Application\Icinga;
+use Icinga\Web\View;
+
+/**
+ * Decorator to add helptext to a form element
+ */
+class Help extends Zend_Form_Decorator_Abstract
+{
+    /**
+     * Whether a hidden <span> should be created to describe the decorated form element
+     *
+     * @var bool
+     */
+    protected $accessible = false;
+
+    /**
+     * The id used to identify the description associated with the decorated form element
+     *
+     * @var string
+     */
+    protected $descriptionId;
+
+    /**
+     * Set whether a hidden <span> should be created to describe the decorated form element
+     *
+     * @param   bool    $state
+     *
+     * @return  Feedback
+     */
+    public function setAccessible($state = true)
+    {
+        $this->accessible = (bool) $state;
+        return $this;
+    }
+
+    /**
+     * Return the id used to identify the description associated with the decorated element
+     *
+     * @param   Zend_Form_Element   $element    The element for which to generate a id
+     *
+     * @return  string
+     */
+    public function getDescriptionId(Zend_Form_Element $element = null)
+    {
+        if ($this->descriptionId === null) {
+            $element = $element ?: $this->getElement();
+            $this->descriptionId = $this->getView()->protectId($element->getId() . '_desc');
+        }
+
+        return $this->descriptionId;
+    }
+
+    /**
+     * Return the current view
+     *
+     * @return  View
+     */
+    protected function getView()
+    {
+        return Icinga::app()->getViewRenderer()->view;
+    }
+
+    /**
+     * Add a help icon to the left of an element
+     *
+     * @param   string      $content    The html rendered so far
+     *
+     * @return  string                  The updated html
+     */
+    public function render($content = '')
+    {
+        if ($content && ($description = $this->getElement()->getDescription()) !== null) {
+            if ($this->accessible) {
+                $content = '<span id="'
+                    . $this->getDescriptionId()
+                    . '" class="sr-only">'
+                    . $description
+                    . '</span>' . $content;
+            }
+
+            $content = $this->getView()->icon('help', $description) . $content;
+        }
+
+        return $content;
+    }
+}

public/css/icinga/forms.less

@@ -190,38 +190,11 @@ form .description {
   display: block;
 }
 
-form label.has-feedback:after {
-  content: '\e85b';
-  font-family: "ifont";
-  font-style: normal;
-  font-weight: normal;
-  speak: none;
-
-  text-decoration: inherit;
-  width: 1em;
-  margin-right: .2em;
-  text-align: center;
-  /* opacity: .8; */
-
-  /* For safety - reset parent styles, that can break glyph codes*/
-  font-variant: normal;
-  text-transform: none;
-
-  /* fix buttons height, for twitter bootstrap */
-  line-height: 1em;
-
-  /* Animation center compensation - margins should be symmetric */
-  /* remove if not needed */
-  margin-left: .2em;
-
-  /* you can be more comfortable with increased icons size */
-  /* font-size: 120%; */
-
-  /* Uncomment for 3D effect */
-  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
-}
-
 select.grant-permissions {
   height: 20em;
   width: auto;
 }
+
+label + input, label + select, label + input + input {
+  margin-left: 1.6em;
+}

public/css/icinga/login.less

@@ -79,9 +79,10 @@
   form input {
     width: 18em;
     padding: 0.5em;
-	background: #ddd;
-	color: #333;
+    background: #ddd;
+    color: #333;
     border: 1px solid #ddd;
+    margin-left: 0;
   }
 
   form input:focus {