mirror of
https://github.com/Icinga/icingaweb2.git
synced 2025-07-23 22:04:25 +02:00
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:
parent
0111fdf78e
commit
6d81a194ab
@ -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;
|
||||
}
|
||||
|
||||
|
93
library/Icinga/Web/Form/Decorator/Help.php
Normal file
93
library/Icinga/Web/Form/Decorator/Help.php
Normal 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;
|
||||
}
|
||||
}
|
@ -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;
|
||||
}
|
@ -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 {
|
||||
|
Loading…
x
Reference in New Issue
Block a user