Add aria-expanded value to select2-container om systemtag and f…

…ile tags Add ```aria-expanded``` to color picker Add ```aria-expanded``` to UnifiedSearch.vue Add ```aria-expanded``` to new button on files Add ```aria-expanded``` to action menu Add ```aria-expanded``` to icon .federation-menu Add ```aria-expanded``` to app navigation collapse button Signed-off-by: julia.kirschenheuter <julia.kirschenheuter@nextcloud.com>
nextcloud · Aug 17, 2022 · ea749cb · ea749cb
1 parent 2f538bb
commit ea749cb
Show file tree

Hide file tree

Showing 12 changed files with 36 additions and 4 deletions.
diff --git a/apps/files/js/fileactions.js b/apps/files/js/fileactions.js
@@ -370,6 +370,7 @@
 			var menu;
 			var $trigger = context.$file.closest('tr').find('.fileactions .action-menu');
 			$trigger.addClass('open');
+			$trigger.attr('aria-expanded', 'true');
 
 			menu = new OCA.Files.FileActionsMenu();
 
@@ -378,6 +379,7 @@
 			menu.$el.on('afterHide', function() {
 				context.$file.removeClass('mouseOver');
 				$trigger.removeClass('open');
+				$trigger.attr('aria-expanded', 'false');
 				menu.remove();
 			});
 
@@ -404,6 +406,7 @@
 			}, false, context);
 
 			$el.addClass('permanent');
+			$el.attr('aria-expanded', 'false');
 
 		},
 

diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js
@@ -3853,7 +3853,7 @@
 
 			$actionsContainer.prepend($newButton);
 			$newButton.tooltip({'placement': 'bottom'});
-
+			$newButton.attr('aria-expanded', 'false');
 			$newButton.click(_.bind(this._onClickNewButton, this));
 			this._newButton = $newButton;
 		},
@@ -3864,6 +3864,7 @@
 				$target = $target.closest('.button');
 			}
 			this._newButton.tooltip('hide');
+			$target.attr('aria-expanded', 'true');
 			event.preventDefault();
 			if ($target.hasClass('disabled')) {
 				return false;

diff --git a/apps/files/js/navigation.js b/apps/files/js/navigation.js
@@ -200,6 +200,13 @@
 
 			if ($menu.hasClass('collapsible') && $menu.data('expandedstate')) {
 				$menu.toggleClass('open');
+				var targetAriaExpanded = $target.attr('aria-expanded');
+				if (targetAriaExpanded === 'false') {
+					$target.attr('aria-expanded', 'true');
+				} else if (targetAriaExpanded === 'true') {
+					$target.attr('aria-expanded', 'false');
+				}
+				$menu.toggleAttr('data-expanded', 'true', 'false');
 				var show = $menu.hasClass('open') ? 1 : 0;
 				var key = $menu.data('expandedstate');
 				$.post(OC.generateUrl("/apps/files/api/v1/toggleShowFolder/" + key), {show: show});

diff --git a/apps/files/js/newfilemenu.js b/apps/files/js/newfilemenu.js
@@ -245,7 +245,7 @@
 		 */
 		showAt: function($target) {
 			this.render();
-			OC.showMenu(null, this.$el);
+			OC.showMenu($target, this.$el);
 		}
 	});
 

diff --git a/apps/files/templates/appnavigation.php b/apps/files/templates/appnavigation.php
@@ -90,7 +90,7 @@ class="nav-icon-<?php p(isset($item['icon']) && $item['icon'] !== '' ? $item['ic
 		NavigationElementMenu($item);
 	if (isset($item['sublist'])) {
 		?>
-			<button class="collapse app-navigation-noclose"
+			<button class="collapse app-navigation-noclose" aria-expanded="<?= !empty($item['defaultExpandedState']) ? 'true' : 'false' ?>"
 				aria-label="<?php p($l->t('Toggle %1$s sublist', $item['name'])) ?>"
 				<?php if (sizeof($item['sublist']) == 0) { ?> style="display: none" <?php } ?>>
 			</button>

diff --git a/apps/settings/js/federationsettingsview.js b/apps/settings/js/federationsettingsview.js
@@ -106,6 +106,7 @@
 					self._onScopeChanged(field, scope);
 				});
 				$icon.append(scopeMenu.$el);
+				$icon.attr('aria-expanded', 'false');
 				$icon.on('click', _.bind(scopeMenu.show, scopeMenu));
 				$icon.on('keydown', function(e) {
 					if (e.keyCode === 32) {

diff --git a/apps/systemtags/js/admin.js b/apps/systemtags/js/admin.js
@@ -38,6 +38,7 @@
 			this.collection.fetch({
 				success: function() {
 					$('#systemtag').select2(_.extend(self.select2));
+					$('#systemtag').parent().children('.select2-container').attr('aria-expanded', 'false')
 				}
 			});
 
@@ -50,6 +51,12 @@
 			$('#systemtag_submit').on('click', _.bind(this._onClickSubmit, this));
 			$('#systemtag_delete').on('click', _.bind(this._onClickDelete, this));
 			$('#systemtag_reset').on('click', _.bind(this._onClickReset, this));
+			$('#systemtag').select2(_.extend(self.select2)).on('select2-open', () => {
+				$('.select2-container').attr('aria-expanded', 'true')
+			});
+			$('#systemtag').select2(_.extend(self.select2)).on('select2-close', () => {
+				$('.select2-container').attr('aria-expanded', 'false')
+			});
 		},
 
 		/**

diff --git a/apps/systemtags/src/systemtagsfilelist.js b/apps/systemtags/src/systemtagsfilelist.js
@@ -181,6 +181,13 @@
 						return t('systemtags', 'No tags found')
 					},
 				})
+				this.$filterField.parent().children('.select2-container').attr('aria-expanded', 'false')
+				this.$filterField.on('select2-open', () => {
+					this.$filterField.parent().children('.select2-container').attr('aria-expanded', 'true')
+				})
+				this.$filterField.on('select2-close', () => {
+					this.$filterField.parent().children('.select2-container').attr('aria-expanded', 'false')
+				})
 				this.$filterField.on(
 					'change',
 					_.bind(this._onTagsChanged, this)

diff --git a/apps/theming/js/3rdparty/jscolor/jscolor.js b/apps/theming/js/3rdparty/jscolor/jscolor.js
@@ -1354,13 +1354,15 @@ var jsc = {
 
 
 		function detachPicker () {
+			THIS.targetElement.setAttribute('aria-expanded', 'false');
 			jsc.unsetClass(THIS.targetElement, THIS.activeClass);
 			jsc.picker.wrap.parentNode.removeChild(jsc.picker.wrap);
 			delete jsc.picker.owner;
 		}
 
 
 		function drawPicker () {
+			THIS.targetElement.setAttribute('aria-expanded', 'true');
 
 			// At this point, when drawing the picker, we know what the parent elements are
 			// and we can do all related DOM operations, such as registering events on them

diff --git a/apps/theming/js/settings-admin.js b/apps/theming/js/settings-admin.js
@@ -98,6 +98,7 @@ window.addEventListener('DOMContentLoaded', function () {
 
 	// manually instantiate jscolor to work around new Function call which violates strict CSP
 	var colorElement = $('#theming-color')[0];
+	colorElement.setAttribute('aria-expanded', 'false');
 	var jscolor = new window.jscolor(colorElement, {hash: true});
 
 	$('#theming .theme-undo').each(function() {

diff --git a/core/src/OC/menu.js b/core/src/OC/menu.js
@@ -111,6 +111,9 @@ export const hideMenus = function(complete) {
 
 	// Set menu to closed
 	$('.menutoggle').attr('aria-expanded', false)
+	if (currentMenuToggle) {
+		currentMenuToggle.attr('aria-expanded', false)
+	}
 
 	$('.openedMenu').removeClass('openedMenu')
 	currentMenu = null

diff --git a/core/src/components/HeaderMenu.vue b/core/src/components/HeaderMenu.vue
@@ -28,7 +28,7 @@
 			href="#"
 			:aria-label="ariaLabel"
 			:aria-controls="`header-menu-${id}`"
-			:aria-expanded="opened"
+			:aria-expanded="opened.toString()"
 			aria-haspopup="menu"
 			@click.prevent="toggleMenu">
 			<slot name="trigger" />