Merge pull request #10310 from nextcloud/accessibility-header

Accessibility fixes for header and global elements

3 files changed, 20 insertions, 13 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];