Merge pull request #33357 from nextcloud/external_storage_buttons_a11y

Fix accessibility of buttons in the external storage configuration

apps/files_external/css/settings.css

@@ -68,6 +68,9 @@
 #externalStorage td.mountOptionsToggle [class*=" icon-"], #externalStorage td.remove [class^=icon-],
 #externalStorage td.remove [class*=" icon-"], #externalStorage td.save [class^=icon-],
 #externalStorage td.save [class*=" icon-"] {
+  width: 44px;
+  height: 44px;
+  margin: 3px;
   opacity: 0.5;
   padding: 14px;
   vertical-align: text-bottom;

apps/files_external/css/settings.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["settings.scss"],"names":[],"mappings":"AAAA;EACC;;;AAGD;EACC;;AAEA;EACC;;;AAKD;EACC;;;AAIF;AACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGA;EACC;EACA;;;AAGF;EAA0B;EAAiB;;;AAC3C;EAAgC;EAAiB;EAAgB;;;AACjE;EAAoB;;;AACpB;EAA+B;;;AAC/B;EAA2B;;;AAE3B;EACC;;AACA;EAGC;EACA;EACA;;AACA;AAAA;AAAA;AAAA;EAEC;EACA;EACA;EACA;;AACA;AAAA;AAAA;AAAA;EACC;;;AAMJ;EACC;EACA;;;AAGD;AAAA;EAEC;;;AAED;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;;;AAID;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;;;AAED;EACC;EACA;;;AAED;EACC;;;AAED;EACC;EACA;EACA;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;AACA;EACC;EACA;EACA;EACA;;;AAIF;EACC;;;AAGD;EACC","file":"settings.css"}
+{"version":3,"sourceRoot":"","sources":["settings.scss"],"names":[],"mappings":"AAAA;EACC;;;AAGD;EACC;;AAEA;EACC;;;AAKD;EACC;;;AAIF;AACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGA;EACC;EACA;;;AAGF;EAA0B;EAAiB;;;AAC3C;EAAgC;EAAiB;EAAgB;;;AACjE;EAAoB;;;AACpB;EAA+B;;;AAC/B;EAA2B;;;AAE3B;EACC;;AACA;EAGC;EACA;EACA;;AACA;AAAA;AAAA;AAAA;EAEC;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;AAAA;AAAA;AAAA;EACC;;;AAMJ;EACC;EACA;;;AAGD;AAAA;EAEC;;;AAED;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;;;AAID;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;;;AAED;EACC;EACA;;;AAED;EACC;;;AAED;EACC;EACA;EACA;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;AACA;EACC;EACA;EACA;EACA;;;AAIF;EACC;;;AAGD;EACC","file":"settings.css"}

apps/files_external/css/settings.scss

@@ -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/js/settings.js

@@ -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/templates/settings.php

@@ -173,11 +173,11 @@ $canCreateMounts = $_['visibilityType'] === BackendService::VISIBILITY_ADMIN ||
 					</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>