tyler.durden
/
icingaweb2
mirror of https://github.com/Icinga/icingaweb2.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'feature/mark-required-form-elements-as-required-8349' 

resolves #8349
This commit is contained in:
Johannes Meyer 2015-02-05 13:22:21 +01:00
parent d8c40d40a0 423025b3fe
commit bdc05ec5f1
5 changed files with 84 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
doc/accessibility/required-form-elements.html Normal file
View File

@ -0,0 +1,19 @@
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Accessibility: Required form elements</title>
<meta name="description" content="Required form elements">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<form>
<label>
Enter some text:&nbsp;
<input type="text" name="some_text" value="" aria-required="true" required>
</label>
<input type="submit" name="btn_submit" value="Submit">
</form>
</body>
</html>

20
library/Icinga/Web/Form.php
View File

@ -6,6 +6,7 @@ namespace Icinga\Web;
use LogicException;
use Zend_Config;
use Zend_Form;
use Zend_Form_Element;
use Zend_View_Interface;
use Icinga\Application\Icinga;
use Icinga\Authentication\Manager;
@ -550,7 +551,24 @@ class Form extends Zend_Form
unset($el->autosubmit);
}
return $el;
return $this->ensureElementAccessibility($el);
}
/**
* Add accessibility related attributes
*
* @param Zend_Form_Element $element
*
* @return Zend_Form_Element
*/
public function ensureElementAccessibility(Zend_Form_Element $element)
{
if ($element->isRequired() && strpos(strtolower($element->getType()), 'checkbox') === false) {
$element->setAttrib('aria-required', 'true'); // ARIA
$element->setAttrib('required', ''); // HTML5
}
return $element;
}
/**

44
modules/setup/application/forms/AdminAccountPage.php
View File

@ -78,7 +78,7 @@ class AdminAccountPage extends Form
'text',
'by_name',
array(
'required' => isset($formData['user_type']) && $formData['user_type'] === 'by_name',
'required' => !isset($formData['user_type']) || $formData['user_type'] === 'by_name',
'value' => $this->getUsername(),
'label' => $this->translate('Username'),
'description' => $this->translate(
@ -87,6 +87,12 @@ class AdminAccountPage extends Form
)
)
);
if (! $this->request->isXmlHttpRequest()) {
// In case JS is disabled we must not provide client side validation as
// the user is required to input data even he has changed his mind
$this->getElement('by_name')->setAttrib('required', null);
$this->getElement('by_name')->setAttrib('aria-required', null);
}
}
if ($this->backendConfig['backend'] === 'db' || $this->backendConfig['backend'] === 'ldap') {
@ -111,6 +117,12 @@ class AdminAccountPage extends Form
'multiOptions' => array_combine($users, $users)
)
);
if (! $this->request->isXmlHttpRequest()) {
// In case JS is disabled we must not provide client side validation as
// the user is required to input data even he has changed his mind
$this->getElement('existing_user')->setAttrib('required', null);
$this->getElement('existing_user')->setAttrib('aria-required', null);
}
}
}
@ -149,6 +161,14 @@ class AdminAccountPage extends Form
)
)
);
if (! $this->request->isXmlHttpRequest()) {
// In case JS is disabled we must not provide client side validation as
// the user is required to input data even he has changed his mind
foreach (array('new_user', 'new_user_password', 'new_user_2ndpass') as $elementName) {
$this->getElement($elementName)->setAttrib('aria-required', null);
$this->getElement($elementName)->setAttrib('required', null);
}
}
}
if (count($choices) > 1) {
@ -157,6 +177,8 @@ class AdminAccountPage extends Form
'user_type',
array(
'required' => true,
'autosubmit' => true,
'value' => key($choices),
'multiOptions' => $choices
)
);
@ -218,6 +240,26 @@ class AdminAccountPage extends Form
return true;
}
/**
* Return whether the given values (possibly incomplete) are valid
*
* Unsets all empty text-inputs so that they are not being validated when auto-submitting the form.
*
* @param array $formData
*
* @return type
*/
public function isValidPartial(array $formData)
{
foreach (array('by_name', 'new_user', 'new_user_password', 'new_user_2ndpass') as $elementName) {
if (isset($formData[$elementName]) && $formData[$elementName] === '') {
unset($formData[$elementName]);
}
}
return parent::isValidPartial($formData);
}
/**
* Return the name of the externally authenticated user
*

6
modules/setup/application/views/scripts/form/setup-admin-account.phtml
View File

@ -17,7 +17,7 @@ $showRadioBoxes = strpos(strtolower(get_class($radioElem)), 'radio') !== false;
<?php if ($showRadioBoxes): ?>
<div class="radiobox">
<label>
<input type="radio" name="user_type" value="by_name"<?= $radioElem->getValue() === 'by_name' ? ' checked' : ''; ?>>
<input type="radio" name="user_type" value="by_name"<?= $radioElem->getValue() === 'by_name' ? ' checked' : ''; ?> class="autosubmit" aria-required="true" required>
<?= $radioElem->getMultiOption('by_name'); ?>
</label>
</div>
@ -32,7 +32,7 @@ $showRadioBoxes = strpos(strtolower(get_class($radioElem)), 'radio') !== false;
<?php if ($showRadioBoxes): ?>
<div class="radiobox">
<label>
<input type="radio" name="user_type" value="existing_user"<?= $radioElem->getValue() === 'existing_user' ? ' checked' : ''; ?>>
<input type="radio" name="user_type" value="existing_user"<?= $radioElem->getValue() === 'existing_user' ? ' checked' : ''; ?> class="autosubmit" aria-required="true" required>
<?= $radioElem->getMultiOption('existing_user'); ?>
</label>
</div>
@ -49,7 +49,7 @@ $showRadioBoxes = strpos(strtolower(get_class($radioElem)), 'radio') !== false;
<?php if ($showRadioBoxes): ?>
<div class="radiobox">
<label>
<input type="radio" name="user_type" value="new_user"<?= $radioElem->getValue() === 'new_user' ? ' checked' : ''; ?>>
<input type="radio" name="user_type" value="new_user"<?= $radioElem->getValue() === 'new_user' ? ' checked' : ''; ?> class="autosubmit" aria-required="true" required>
<?= $radioElem->getMultiOption('new_user'); ?>
</label>
</div>

2
public/js/icinga/events.js
View File

@ -118,8 +118,6 @@
// Select a table row
$(document).on('click', 'table.multiselect tr[href]', { self: this }, this.rowSelected);
$(document).on('click', 'button', { self: this }, this.submitForm);
// We catch all form submit events
$(document).on('submit', 'form', { self: this }, this.submitForm);