accessibility updates

This commit is contained in:
Roland Gruber 2023-06-16 15:23:23 +02:00
parent 50c9e1b637
commit c70fe30ea1
3 changed files with 41 additions and 8 deletions

View file

@ -1273,7 +1273,7 @@ class htmlAccountPageButton extends htmlButton {
class htmlSelect extends htmlElement { class htmlSelect extends htmlElement {
/** name of select field */ /** name of select field */
private $name; protected $name;
/** size */ /** size */
private $size; private $size;
/** allows multi-selection */ /** allows multi-selection */
@ -1388,7 +1388,7 @@ class htmlSelect extends htmlElement {
echo '<div class="hidden">'; echo '<div class="hidden">';
} }
// print select box // print select box
echo '<select' . $this->getDataAttributesAsString() . $class . $style echo '<select' . $this->getDataAttributesAsString() . $this->getAccessibilityMarkup() . $class . $style
. $name . $size . $multi . $disabled . $onchange . $name . $size . $multi . $disabled . $onchange
. ' tabindex="' . $tabindex . "\">\n"; . ' tabindex="' . $tabindex . "\">\n";
$tabindex++; $tabindex++;
@ -2078,6 +2078,8 @@ class htmlInputCheckbox extends htmlElement {
protected $elementsToDisable = array(); protected $elementsToDisable = array();
/** onclick event code */ /** onclick event code */
private $onClick; private $onClick;
/** title */
private ?string $title = null;
/** /**
@ -2115,6 +2117,10 @@ class htmlInputCheckbox extends htmlElement {
if ($this->checked) { if ($this->checked) {
$checked = ' checked'; $checked = ' checked';
} }
$title = '';
if ($this->title !== null) {
$title = ' title="' . $this->title . '"';
}
$tabindexValue = ' tabindex="' . $tabindex . '"'; $tabindexValue = ' tabindex="' . $tabindex . '"';
$tabindex++; $tabindex++;
$disabled = ''; $disabled = '';
@ -2210,7 +2216,7 @@ class htmlInputCheckbox extends htmlElement {
$onClick = ' onclick="' . $this->onClick . '"'; $onClick = ' onclick="' . $this->onClick . '"';
} }
echo '<input type="checkbox" id="' . $this->name . '" name="' . $this->name . '"' . $classes . $tabindexValue echo '<input type="checkbox" id="' . $this->name . '" name="' . $this->name . '"' . $classes . $tabindexValue
. $this->getAccessibilityMarkup() . $onChange . $onClick . $checked . $disabled . '>'; . $this->getAccessibilityMarkup() . $onChange . $onClick . $title . $checked . $disabled . '>';
echo $script; echo $script;
if ($this->transient) { if ($this->transient) {
return array(); return array();
@ -2311,6 +2317,15 @@ class htmlInputCheckbox extends htmlElement {
return $this->name; return $this->name;
} }
/**
* Sets the title.
*
* @param string|null $title title
*/
public function setTitle(?string $title): void {
$this->title = $title;
}
} }
/** /**
@ -4367,7 +4382,7 @@ class htmlResponsiveSelect extends htmlSelect {
$row = new htmlResponsiveRow(); $row = new htmlResponsiveRow();
// label text // label text
$labelGroup = new htmlGroup(); $labelGroup = new htmlGroup();
$labelGroup->addElement(new htmlOutputText($this->label)); $labelGroup->addElement(new htmlLabel($this->name, $this->label));
if (!empty($this->helpID)) { if (!empty($this->helpID)) {
$helpLinkLabel = new htmlHelpLink($this->helpID, $this->helpModule); $helpLinkLabel = new htmlHelpLink($this->helpID, $this->helpModule);
$helpLinkLabel->setCSSClasses(array('hide-on-tablet', 'margin-left5')); $helpLinkLabel->setCSSClasses(array('hide-on-tablet', 'margin-left5'));

View file

@ -370,6 +370,7 @@ class lamList {
$navInput->setMinimumAndMaximumNumber(1, $pageCount); $navInput->setMinimumAndMaximumNumber(1, $pageCount);
$navInput->setCSSClasses(array('listPageInput')); $navInput->setCSSClasses(array('listPageInput'));
$navInput->setOnKeyPress('listPageNumberKeyPress(\'' . $url . '\', event);'); $navInput->setOnKeyPress('listPageNumberKeyPress(\'' . $url . '\', event);');
$navInput->setAccessibilityLabel(_('Page'));
$navGroup->addElement($navInput); $navGroup->addElement($navInput);
} }
else { else {
@ -453,26 +454,32 @@ class lamList {
if ($this->sortDirection < 0) { if ($this->sortDirection < 0) {
$down = new htmlLink(null, $link . '&sortdirection=1', '../../graphics/pan-down.svg'); $down = new htmlLink(null, $link . '&sortdirection=1', '../../graphics/pan-down.svg');
$down->setCSSClasses(array('icon noMarginSides')); $down->setCSSClasses(array('icon noMarginSides'));
$down->setTitle(_('Sort ascending'));
$buttons->addElement($down); $buttons->addElement($down);
$up = new htmlLink(null, $link . '&sortdirection=-1', '../../graphics/pan-up.svg'); $up = new htmlLink(null, $link . '&sortdirection=-1', '../../graphics/pan-up.svg');
$up->setCSSClasses(array('icon icon-active noMarginSides')); $up->setCSSClasses(array('icon icon-active noMarginSides'));
$up->setTitle(_('Sort descending'));
$buttons->addElement($up); $buttons->addElement($up);
} }
else { else {
$down = new htmlLink(null, $link . '&sortdirection=1', '../../graphics/pan-down.svg'); $down = new htmlLink(null, $link . '&sortdirection=1', '../../graphics/pan-down.svg');
$down->setCSSClasses(array('icon icon-active noMarginSides')); $down->setCSSClasses(array('icon icon-active noMarginSides'));
$down->setTitle(_('Sort ascending'));
$buttons->addElement($down); $buttons->addElement($down);
$up = new htmlLink(null, $link . '&sortdirection=-1', '../../graphics/pan-up.svg'); $up = new htmlLink(null, $link . '&sortdirection=-1', '../../graphics/pan-up.svg');
$up->setCSSClasses(array('icon noMarginSides')); $up->setCSSClasses(array('icon noMarginSides'));
$up->setTitle(_('Sort descending'));
$buttons->addElement($up); $buttons->addElement($up);
} }
} }
else { else {
$down = new htmlLink(null, $link . '&sortdirection=1', '../../graphics/pan-down.svg'); $down = new htmlLink(null, $link . '&sortdirection=1', '../../graphics/pan-down.svg');
$down->setCSSClasses(array('icon noMarginSides')); $down->setCSSClasses(array('icon noMarginSides'));
$down->setTitle(_('Sort ascending'));
$buttons->addElement($down); $buttons->addElement($down);
$up = new htmlLink(null, $link . '&sortdirection=-1', '../../graphics/pan-up.svg'); $up = new htmlLink(null, $link . '&sortdirection=-1', '../../graphics/pan-up.svg');
$up->setCSSClasses(array('icon noMarginSides')); $up->setCSSClasses(array('icon noMarginSides'));
$up->setTitle(_('Sort descending'));
$buttons->addElement($up); $buttons->addElement($up);
} }
$sortElements[] = $buttons; $sortElements[] = $buttons;
@ -490,6 +497,7 @@ class lamList {
$selectAll = new htmlInputCheckbox('tableSelectAll', false); $selectAll = new htmlInputCheckbox('tableSelectAll', false);
$selectAll->setCSSClasses(array('align-middle')); $selectAll->setCSSClasses(array('align-middle'));
$selectAll->setOnClick('list_switchAccountSelection();'); $selectAll->setOnClick('list_switchAccountSelection();');
$selectAll->setTitle(_('Select all'));
$actionElement->addElement($selectAll); $actionElement->addElement($selectAll);
$actionElement->addElement(new htmlSpacer('1rem', null)); $actionElement->addElement(new htmlSpacer('1rem', null));
$actionElement->addElement(new htmlOutputText(_('Filter'))); $actionElement->addElement(new htmlOutputText(_('Filter')));
@ -534,6 +542,7 @@ class lamList {
$filterInput = new htmlInputField('filter' . $attrName, $value, null); $filterInput = new htmlInputField('filter' . $attrName, $value, null);
$filterInput->setOnKeyPress("SubmitForm('apply_filter', event);"); $filterInput->setOnKeyPress("SubmitForm('apply_filter', event);");
$filterInput->setFieldSize(null); $filterInput->setFieldSize(null);
$filterInput->setTitle(_('Filter'));
return $filterInput; return $filterInput;
} }
@ -558,6 +567,7 @@ class lamList {
$filterInput->setCSSClasses(array($this->type->getScope() . '-bright')); $filterInput->setCSSClasses(array($this->type->getScope() . '-bright'));
$filterInput->setHasDescriptiveElements(true); $filterInput->setHasDescriptiveElements(true);
$filterInput->setOnchangeEvent('document.getElementsByName(\'apply_filter\')[0].click();'); $filterInput->setOnchangeEvent('document.getElementsByName(\'apply_filter\')[0].click();');
$filterInput->setAccessibilityLabel(_('Filter'));
return $filterInput; return $filterInput;
} }
@ -608,6 +618,7 @@ class lamList {
$checkbox = new htmlInputCheckbox($rowID, false); $checkbox = new htmlInputCheckbox($rowID, false);
$checkbox->setOnClick("list_click('" . $rowID . "');"); $checkbox->setOnClick("list_click('" . $rowID . "');");
$checkbox->setCSSClasses(array('accountBoxUnchecked align-middle')); $checkbox->setCSSClasses(array('accountBoxUnchecked align-middle'));
$checkbox->setTitle(_('Select'));
$actionElement->addElement($checkbox); $actionElement->addElement($checkbox);
$actionElement->addElement(new htmlSpacer('0.5rem', null)); $actionElement->addElement(new htmlSpacer('0.5rem', null));
$rowNumber = $i - $table_begin + 2; $rowNumber = $i - $table_begin + 2;
@ -975,6 +986,7 @@ class lamList {
$suffixSelect->setRightToLeftTextDirection(true); $suffixSelect->setRightToLeftTextDirection(true);
$suffixSelect->setSortElements(false); $suffixSelect->setSortElements(false);
$suffixSelect->setHasDescriptiveElements(true); $suffixSelect->setHasDescriptiveElements(true);
$suffixSelect->setAccessibilityLabel(_('Suffix'));
$group->addElement($suffixSelect); $group->addElement($suffixSelect);
} }
return $group; return $group;

View file

@ -1,6 +1,7 @@
<?php <?php
namespace LAM\LOGIN; namespace LAM\LOGIN;
use htmlLabel; use htmlLabel;
use htmlResponsiveSelect;
use LAM\ENV\LAMLicenseValidator; use LAM\ENV\LAMLicenseValidator;
use LAM\LIB\TWO_FACTOR\TwoFactorProviderService; use LAM\LIB\TWO_FACTOR\TwoFactorProviderService;
use \LAMConfig; use \LAMConfig;
@ -405,10 +406,9 @@ function display_LoginPage(?LAMLicenseValidator $licenseValidator, ?string $erro
$serverUrlDiv = new htmlDiv(null, $serverUrl); $serverUrlDiv = new htmlDiv(null, $serverUrl);
$serverUrlDiv->setCSSClasses(array('text-left', 'margin3')); $serverUrlDiv->setCSSClasses(array('text-left', 'margin3'));
$row->addField($serverUrlDiv); $row->addField($serverUrlDiv);
$row->addLabel(new htmlOutputText(_("Server profile"))); $profileSelect = new htmlResponsiveSelect('profile', $profiles, array($_SESSION['config']->getName()), _("Server profile"));
$profileSelect = new htmlSelect('profile', $profiles, array($_SESSION['config']->getName()));
$profileSelect->setOnchangeEvent('loginProfileChanged(this)'); $profileSelect->setOnchangeEvent('loginProfileChanged(this)');
$row->addField($profileSelect); $row->add($profileSelect);
parseHtml(null, $row, array(), true, $tabindex, 'user'); parseHtml(null, $row, array(), true, $tabindex, 'user');
?> ?>
@ -461,10 +461,16 @@ function displayLoginHeader() : void {
?> ?>
</span> </span>
</a> </a>
<?php
if (!isLAMProVersion()) {
?>
<span class="hide-on-mobile lam-margin-small"> <span class="hide-on-mobile lam-margin-small">
&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;
<a href="http://www.ldap-account-manager.org/lamcms/lamPro"> <?php if (!isLAMProVersion()) { echo _("Want more features? Get LAM Pro!");} ?> </a> <a href="http://www.ldap-account-manager.org/lamcms/lamPro"><?php echo _("Want more features? Get LAM Pro!"); ?></a>
</span> </span>
<?php
}
?>
</div> </div>
<a class="lam-header-right lam-menu-icon hide-on-tablet" href="javascript:void(0);" class="icon" onclick="window.lam.topmenu.toggle();"> <a class="lam-header-right lam-menu-icon hide-on-tablet" href="javascript:void(0);" class="icon" onclick="window.lam.topmenu.toggle();">
<img class="align-middle" width="16" height="16" alt="menu" src="../graphics/menu.svg"> <img class="align-middle" width="16" height="16" alt="menu" src="../graphics/menu.svg">