Make form element descriptions accessible

Re-added the Help decorator to make sure an element's description
is being added in an accessible way.
This commit is contained in:
Johannes Meyer 2015-02-27 08:10:25 +01:00
parent 0111fdf78e
commit 6d81a194ab
4 changed files with 105 additions and 40 deletions

View File

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

View File

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

View File

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

View File

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