Handle keyboard navigation in the file picker

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

3 files changed, 26 insertions, 18 deletions

diff --git a/core/src/OC/dialogs.js b/core/src/OC/dialogs.js
index bd65ce90c43..ef923d44f0d 100644
--- a/core/src/OC/dialogs.js
+++ b/core/src/OC/dialogs.js
@@ -443,17 +443,23 @@ const Dialogs = {
 				self.$filelist = self.$filePicker.find('.filelist tbody')
 				self.$filelistContainer = self.$filePicker.find('.filelist-container')
 				self.$dirTree = self.$filePicker.find('.dirtree')
-				self.$dirTree.on('click', 'div:not(:last-child)', self, function(event) {
-					self._handleTreeListSelect(event, type)
+				self.$dirTree.on('click keydown', 'div:not(:last-child)', self, function(event) {
+					if (event.type === 'click' || (event.type === 'keydown' && event.key === 'Enter')) {
+						self._handleTreeListSelect(event, type)
+					}
 				})
-				self.$filelist.on('click', 'tr', function(event) {
-					self._handlePickerClick(event, $(this), type)
+				self.$filelist.on('click keydown', 'tr', function(event) {
+					if (event.type === 'click' || (event.type === 'keydown' && event.key === 'Enter')) {
+						self._handlePickerClick(event, $(this), type)
+					}
 				})
-				self.$fileListHeader.on('click', 'a', function(event) {
-					var dir = self.$filePicker.data('path')
-					self.filepicker.sortField = $(event.currentTarget).data('sort')
-					self.filepicker.sortOrder = self.filepicker.sortOrder === 'asc' ? 'desc' : 'asc'
-					self._fillFilePicker(dir)
+				self.$fileListHeader.on('click keydown', 'a', function(event) {
+					if (event.type === 'click' || (event.type === 'keydown' && event.key === 'Enter')) {
+						var dir = self.$filePicker.data('path')
+						self.filepicker.sortField = $(event.currentTarget).data('sort')
+						self.filepicker.sortOrder = self.filepicker.sortOrder === 'asc' ? 'desc' : 'asc'
+						self._fillFilePicker(dir)
+					}
 				})
 				self._fillFilePicker(path)
 			})
@@ -1272,7 +1278,7 @@ const Dialogs = {
 
 		var dir
 		var path = this.$filePicker.data('path')
-		var $template = $('<div data-dir="{dir}"><a>{name}</a></div>').addClass('crumb')
+		var $template = $('<div data-dir="{dir}" tabindex="0"><a>{name}</a></div>').addClass('crumb')
 		if (path) {
 			var paths = path.split('/')
 			$.each(paths, function(index, dir) {
diff --git a/core/src/jquery/ocdialog.js b/core/src/jquery/ocdialog.js
index 51a1c479e99..4579f420625 100644
--- a/core/src/jquery/ocdialog.js
+++ b/core/src/jquery/ocdialog.js
@@ -171,11 +171,13 @@ $.widget('oc.ocdialog', {
 			break
 		case 'closeButton':
 			if (value) {
-				const $closeButton = $('<a class="oc-dialog-close"></a>')
+				const $closeButton = $('<a class="oc-dialog-close" tabindex="0"></a>')
 				this.$dialog.prepend($closeButton)
-				$closeButton.on('click', function() {
-					self.options.closeCallback && self.options.closeCallback()
-					self.close()
+				$closeButton.on('click keydown', function(event) {
+					if (event.type === 'click' || (event.type === 'keydown' && event.key === 'Enter')) {
+						self.options.closeCallback && self.options.closeCallback()
+						self.close()
+					}
 				})
 			} else {
 				this.$dialog.find('.oc-dialog-close').remove()
diff --git a/core/templates/filepicker.html b/core/templates/filepicker.html
index 91514010cb3..124bc081ecf 100644
--- a/core/templates/filepicker.html
+++ b/core/templates/filepicker.html
@@ -25,26 +25,26 @@
 				<tr>
 					<th id="headerName" class="column-name">
 						<div id="headerName-container">
-							<a class="name sort columntitle" data-sort="name">
+							<a class="name sort columntitle" data-sort="name" tabindex="0">
 								<span>{nameCol}</span>
 								<span class="sort-indicator hidden icon-triangle-n"></span>
 							</a>
 						</div>
 					</th>
 					<th id="headerSize" class="column-size">
-						<a class="size sort columntitle" data-sort="size">
+						<a class="size sort columntitle" data-sort="size" tabindex="0">
 							<span>{sizeCol}</span>
 							<span class="sort-indicator hidden icon-triangle-n"></span></a>
 					</th>
 					<th id="headerDate" class="column-mtime">
-						<a id="modified" class="columntitle" data-sort="mtime">
+						<a id="modified" class="columntitle" data-sort="mtime" tabindex="0">
 							<span>{modifiedCol}</span>
 							<span class="sort-indicator hidden icon-triangle-n"></span></a>
 					</th>
 				</tr>
 			</thead>
 			<tbody>
-				<tr data-entryname="{filename}" data-type="{type}">
+				<tr data-entryname="{filename}" data-type="{type}" tabindex="0">
 					<td class="filename"
 						style="background-image:url({icon})">
 						<span class="filename-parts">