Merge pull request #10310 from nextcloud/accessibility-header

Accessibility fixes for header and global elements

6 files changed, 60 insertions, 24 deletions

diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js
index fd20ebe8321..f44a36435a1 100644
--- a/apps/files/js/filelist.js
+++ b/apps/files/js/filelist.js
@@ -678,7 +678,7 @@
 				this.updateSelectionSummary();
 			} else {
 				// clicked directly on the name
-				if (!this._detailsView || $(event.target).is('.nametext') || $(event.target).closest('.nametext').length) {
+				if (!this._detailsView || $(event.target).is('.nametext, .name') || $(event.target).closest('.nametext').length) {
 					var filename = $tr.attr('data-file');
 					var renaming = $tr.data('renaming');
 					if (!renaming) {
diff --git a/apps/files/js/newfilemenu.js b/apps/files/js/newfilemenu.js
index a340b8b6218..0ad7312c985 100644
--- a/apps/files/js/newfilemenu.js
+++ b/apps/files/js/newfilemenu.js
@@ -15,7 +15,7 @@
 	var TEMPLATE_MENU =
 		'<ul>' +
 		'<li>' +
-		'<label for="file_upload_start" class="menuitem" data-action="upload" title="{{uploadMaxHumanFilesize}}"><span class="svg icon icon-upload"></span><span class="displayname">{{uploadLabel}}</span></label>' +
+		'<label for="file_upload_start" class="menuitem" data-action="upload" title="{{uploadMaxHumanFilesize}}" tabindex="0"><span class="svg icon icon-upload"></span><span class="displayname">{{uploadLabel}}</span></label>' +
 		'</li>' +
 		'{{#each items}}' +
 		'<li>' +
@@ -235,6 +235,13 @@
 				items: this._menuItems
 			}));
 			OC.Util.scaleFixForIE8(this.$('.svg'));
+
+			// Trigger upload action also with keyboard navigation on enter
+			this.$el.find('[for="file_upload_start"]').on('keyup', function(event) {
+				if (event.key === " " || event.key === "Enter") {
+					$('#file_upload_start').trigger('click');
+				}
+			});
 		},
 
 		/**
diff --git a/apps/files/tests/js/filelistSpec.js b/apps/files/tests/js/filelistSpec.js
index 1261e468afa..7947dd91f2d 100644
--- a/apps/files/tests/js/filelistSpec.js
+++ b/apps/files/tests/js/filelistSpec.js
@@ -2429,7 +2429,7 @@ describe('OCA.Files.FileList tests', function() {
 			);
 			fileList.fileActions.setDefault('text/plain', 'Test');
 			var $tr = fileList.findFileEl('One.txt');
-			$tr.find('td.filename>a.name').click();
+			$tr.find('td.filesize').click();
 			expect(actionStub.calledOnce).toEqual(true);
 			expect(updateDetailsViewStub.notCalled).toEqual(true);
 			updateDetailsViewStub.restore();
@@ -2437,14 +2437,14 @@ describe('OCA.Files.FileList tests', function() {
 		it('highlights current file when clicked and updates sidebar', function() {
 			fileList.fileActions.setDefault('text/plain', 'Test');
 			var $tr = fileList.findFileEl('One.txt');
-			$tr.find('td.filename>a.name').click();
+			$tr.find('td.filesize').click();
 			expect($tr.hasClass('highlighted')).toEqual(true);
 
 			expect(fileList._detailsView.getFileInfo().id).toEqual(1);
 		});
 		it('keeps the last highlighted file when clicking outside', function() {
 			var $tr = fileList.findFileEl('One.txt');
-			$tr.find('td.filename>a.name').click();
+			$tr.find('td.filesize').click();
 
 			fileList.$el.find('tfoot').click();
 
@@ -2455,12 +2455,12 @@ describe('OCA.Files.FileList tests', function() {
 			var $tr = fileList.findFileEl('One.txt');
 
 			// select
-			$tr.find('td.filename>a.name').click();
+			$tr.find('td.filesize').click();
 			$tr.find('input:checkbox').click();
 			expect($tr.hasClass('highlighted')).toEqual(false);
 
 			// deselect
-			$tr.find('td.filename>a.name').click();
+			$tr.find('td.filesize').click();
 			$tr.find('input:checkbox').click();
 			expect($tr.hasClass('highlighted')).toEqual(false);
 
@@ -2470,12 +2470,12 @@ describe('OCA.Files.FileList tests', function() {
 			var $tr = fileList.findFileEl('One.txt');
 
 			// select
-			$tr.find('td.filename>a.name').click();
+			$tr.find('td.filesize').click();
 			fileList.$el.find('.select-all.checkbox').click();
 			expect($tr.hasClass('highlighted')).toEqual(false);
 
 			// deselect
-			$tr.find('td.filename>a.name').click();
+			$tr.find('td.filesize').click();
 			fileList.$el.find('.select-all.checkbox').click();
 			expect($tr.hasClass('highlighted')).toEqual(false);
 
@@ -2484,7 +2484,7 @@ describe('OCA.Files.FileList tests', function() {
 		it('closes sidebar whenever the currently highlighted file was removed from the list', function() {
 			jQuery.fx.off = true;
 			var $tr = fileList.findFileEl('One.txt');
-			$tr.find('td.filename>a.name').click();
+			$tr.find('td.filesize').click();
 			expect($tr.hasClass('highlighted')).toEqual(true);
 
 			expect(fileList._detailsView.getFileInfo().id).toEqual(1);
@@ -2497,7 +2497,7 @@ describe('OCA.Files.FileList tests', function() {
 		});
 		it('returns the currently selected model instance when calling getModelForFile', function() {
 			var $tr = fileList.findFileEl('One.txt');
-			$tr.find('td.filename>a.name').click();
+			$tr.find('td.filesize').click();
 
 			var model1 = fileList.getModelForFile('One.txt');
 			var model2 = fileList.getModelForFile('One.txt');
@@ -2512,7 +2512,7 @@ describe('OCA.Files.FileList tests', function() {
 		it('closes the sidebar when switching folders', function() {
 			jQuery.fx.off = true;
 			var $tr = fileList.findFileEl('One.txt');
-			$tr.find('td.filename>a.name').click();
+			$tr.find('td.filesize').click();
 
 			expect($('#app-sidebar').hasClass('disappear')).toEqual(false);
 			fileList.changeDirectory('/another');
@@ -2561,7 +2561,7 @@ describe('OCA.Files.FileList tests', function() {
 			// not set.
 			fileList.fileActions.currentFile = null;
 			var $tr = fileList.findFileEl('One.txt');
-			$tr.find('td.filename a.name').click();
+			$tr.find('td.filesize').click();
 			expect(detailsActionStub.calledOnce).toEqual(true);
 			expect(detailsActionStub.getCall(0).args[0]).toEqual('One.txt');
 			var context = detailsActionStub.getCall(0).args[1];
diff --git a/core/css/header.scss b/core/css/header.scss
index b7565281218..1e962461da1 100644
--- a/core/css/header.scss
+++ b/core/css/header.scss
@@ -345,17 +345,13 @@ nav[role='navigation'] {
 		opacity: 1; /* override icon opacity */
 		padding-right: 12px;
 
-		img {
-			opacity: .7;
-			margin-bottom: -2px;
-		}
 		&:hover,
 		&:focus,
 		&:active {
 			color: var(--color-primary-text);
 
 			img, #expandDisplayName {
-				opacity: 1;
+				opacity: .57 !important;
 			}
 		}
 
@@ -482,7 +478,8 @@ nav[role='navigation'] {
 	}
 
 	li:hover span,
-	li:focus span {
+	li:focus span,
+	li a:focus span {
 		display: inline-block;
 	}
 
@@ -562,7 +559,7 @@ nav[role='navigation'] {
 	padding: 11px;
 	position: absolute;
 	overflow: hidden;
-	z-index: 1000;
+	z-index: 9999;
 	top: -999px;
 	left: 3px;
 	/* Force primary color, otherwise too light focused color */
diff --git a/core/css/styles.scss b/core/css/styles.scss
index ee524d336f5..7a66ab47846 100644
--- a/core/css/styles.scss
+++ b/core/css/styles.scss
@@ -794,7 +794,12 @@ span.ui-icon {
 		background-size: 16px 16px;
 		padding: 14px;
 		cursor: pointer;
-		opacity: .6;
+
+		&:hover,
+		&:focus,
+		&:active {
+			opacity: 1 !important;
+		}
 	}
 }
 
@@ -1026,6 +1031,8 @@ div.crumb {
 		}
 	}
 	&:hover, &:focus, a:focus, &:active {
+		opacity: 1;
+
 		> a,
 		> span {
 			opacity: .7;
diff --git a/core/js/js.js b/core/js/js.js
index ef80186b985..2812cba988c 100644
--- a/core/js/js.js
+++ b/core/js/js.js
@@ -684,10 +684,15 @@ var OCP = {},
 	registerMenu: function($toggle, $menuEl, toggle, headerMenu) {
 		var self = this;
 		$menuEl.addClass('menu');
-		$toggle.on('click.menu', function(event) {
+		$toggle.on('click.menu keyup.menu', function(event) {
 			// prevent the link event (append anchor to URL)
 			event.preventDefault();
 
+			// allow enter key as a trigger
+			if (event.key && event.key !== "Enter") {
+				return;
+			}
+
 			if ($menuEl.is(OC._currentMenu)) {
 				self.hideMenus();
 				return;
@@ -1422,7 +1427,14 @@ function initCore() {
 	OC.registerMenu($('#expand'), $('#expanddiv'), false, true);
 
 	// toggle for menus
+	//$(document).on('mouseup.closemenus keyup', function(event) {
 	$(document).on('mouseup.closemenus', function(event) {
+
+		// allow enter as a trigger
+		// if (event.key && event.key !== "Enter") {
+		// 	return;
+		// }
+
 		var $el = $(event.target);
 		if ($el.closest('.menu').length || $el.closest('.menutoggle').length) {
 			// don't close when clicking on the menu directly or a menu toggle
@@ -1617,14 +1629,27 @@ function initCore() {
 			maxPosition: 300, // $navigation-width
 			minDragDistance: 100
 		});
-		$('#app-content').prepend('<div id="app-navigation-toggle" class="icon-menu" style="display:none;"></div>');
-		$('#app-navigation-toggle').click(function(){
+
+		$('#app-content').prepend('<div id="app-navigation-toggle" class="icon-menu" style="display:none;" tabindex="0"></div>');
+
+		var toggleSnapperOnButton = function(){
 			if(snapper.state().state == 'left'){
 				snapper.close();
 			} else {
 				snapper.open('left');
 			}
+		};
+
+		$('#app-navigation-toggle').click(function(){
+			toggleSnapperOnButton();
 		});
+
+		$('#app-navigation-toggle').keypress(function(e) {
+			if(e.which == 13) {
+				toggleSnapperOnButton();
+			}
+		});
+
 		// close sidebar when switching navigation entry
 		var $appNavigation = $('#app-navigation');
 		$appNavigation.delegate('a, :button', 'click', function(event) {