Fix accessibility of buttons in the external storage configuration

Note that there is no keyboard only way to close the dropdown

Signed-off-by: Christopher Ng <chrng8@gmail.com>

Author: tyrylu

apps/files_external/css/settings.css

@@ -52,6 +52,9 @@
 		width: 44px;
 		[class^='icon-'],
 		[class*=' icon-'] {
+			width: 44px;
+			height: 44px;
+			margin: 3px;
 			opacity: 0.5;
 			padding: 14px;
 			vertical-align: text-bottom;

apps/files_external/css/settings.css.map

@@ -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'));
 		});
 
@@ -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);
 		});
 	}

apps/files_external/css/settings.scss

@@ -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>
+					<button type="button" class="icon-more" aria-expanded="false" title="<?php p($l->t('Advanced settings')); ?>"></button>
 					<input type="hidden" class="mountOptions" value="" />
 				</td>
 				<td class="save hidden">
-					<div class="icon-checkmark" title="<?php p($l->t('Save')); ?>"></div>
+					<button type="button" class="icon-checkmark" title="<?php p($l->t('Save')); ?>"></button>
 				</td>
 			</tr>
 		</tbody>