Add aria-label to dropdown autocomplete without label

This commit is contained in:
Michael Vickers
2020-10-03 10:14:58 +01:00
committed by Frédéric Guillot
parent b8e6157738
commit 87c123bba4
3 changed files with 11 additions and 0 deletions

View File

@@ -1,6 +1,7 @@
<?= $this->app->component('select-dropdown-autocomplete', array( <?= $this->app->component('select-dropdown-autocomplete', array(
'name' => 'boardId', 'name' => 'boardId',
'placeholder' => t('Display another project'), 'placeholder' => t('Display another project'),
'ariaLabel' => t('Display another project'),
'items' => $board_selector, 'items' => $board_selector,
'redirect' => array( 'redirect' => array(
'regex' => 'PROJECT_ID', 'regex' => 'PROJECT_ID',

View File

@@ -4,6 +4,7 @@
'items' => $users, 'items' => $users,
'defaultValue' => $filter['user_id'], 'defaultValue' => $filter['user_id'],
'sortByKeys' => true, 'sortByKeys' => true,
'ariaLabel' => t('User filters'),
'redirect' => array( 'redirect' => array(
'regex' => 'USER_ID', 'regex' => 'USER_ID',
'url' => $this->url->to('ProjectUserOverviewController', $this->app->getRouterAction(), array('user_id' => 'USER_ID')), 'url' => $this->url->to('ProjectUserOverviewController', $this->app->getRouterAction(), array('user_id' => 'USER_ID')),

View File

@@ -235,6 +235,14 @@ KB.component('select-dropdown-autocomplete', function(containerElement, options)
return ''; return '';
} }
function getAriaLabelValue() {
if (options.ariaLabel) {
return options.ariaLabel;
}
return '';
}
this.render = function () { this.render = function () {
KB.on('select.dropdown.loading.start', onLoadingStart); KB.on('select.dropdown.loading.start', onLoadingStart);
KB.on('select.dropdown.loading.stop', onLoadingStop); KB.on('select.dropdown.loading.stop', onLoadingStop);
@@ -264,6 +272,7 @@ KB.component('select-dropdown-autocomplete', function(containerElement, options)
inputElement = KB.dom('input') inputElement = KB.dom('input')
.attr('type', 'text') .attr('type', 'text')
.attr('placeholder', getPlaceholderValue()) .attr('placeholder', getPlaceholderValue())
.attr('aria-label', getAriaLabelValue())
.addClass('select-dropdown-input') .addClass('select-dropdown-input')
.on('focus', toggleDropdownMenu) .on('focus', toggleDropdownMenu)
.on('input', onInputChanged, true) .on('input', onInputChanged, true)