Skip to content

Commit

Permalink
Fix accessibility of buttons in the external storage configuration
Browse files Browse the repository at this point in the history
This means adding the button role and a tabindex attribute,
it also tries to handle the expanded state for the advanced options dropdown.
Note, however, that there is no keyboard only way how to close the dropdown.
  • Loading branch information
tyrylu committed Jul 27, 2022
1 parent 9746229 commit 7f82051
Show file tree
Hide file tree
Showing 2 changed files with 4 additions and 2 deletions.
2 changes: 2 additions & 0 deletions apps/files_external/js/settings.js
Original file line number Diff line number Diff line change
Expand Up @@ -715,6 +715,7 @@ MountConfigListView.prototype = _.extend({
});

this.$el.on('click', 'td.mountOptionsToggle>.icon-more', function() {
$(this).attr('aria-expanded', 'true');
self._showMountOptionsDropdown($(this).closest('tr'));
});

Expand Down Expand Up @@ -1343,6 +1344,7 @@ MountConfigListView.prototype = _.extend({
var mountOptions = dropDown.getOptions();
$('body').off('mouseup.mountOptionsDropdown');
$tr.find('input.mountOptions').val(JSON.stringify(mountOptions));
$tr.find('td.mountOptionsToggle>.icon-more').attr('aria-expanded', 'false');
self.saveStorageConfig($tr);
});
}
Expand Down
4 changes: 2 additions & 2 deletions apps/files_external/templates/settings.php
Original file line number Diff line number Diff line change
Expand Up @@ -173,11 +173,11 @@ function writeParameterInput($parameter, $options, $classes = []) {
</td>
<?php endif; ?>
<td class="mountOptionsToggle hidden">
<div class="icon-more" title="<?php p($l->t('Advanced settings')); ?>"></div>
<div class="icon-more" title="<?php p($l->t('Advanced settings')); ?>" role="button" tabindex=0 aria-expanded=false></div>
<input type="hidden" class="mountOptions" value="" />
</td>
<td class="save hidden">
<div class="icon-checkmark" title="<?php p($l->t('Save')); ?>"></div>
<div class="icon-checkmark" title="<?php p($l->t('Save')); ?>" role="button" tabindex=0></div>
</td>
</tr>
</tbody>
Expand Down

0 comments on commit 7f82051

Please sign in to comment.