Add a11y utility function

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

3 files changed, 46 insertions, 8 deletions

diff --git a/core/src/OC/dialogs.js b/core/src/OC/dialogs.js
index e32cb6f936e..6f9d7accb6b 100644
--- a/core/src/OC/dialogs.js
+++ b/core/src/OC/dialogs.js
@@ -49,6 +49,7 @@ import $ from 'jquery'
 
 import OC from './index'
 import OCA from '../OCA/index'
+import { isA11yClick } from '../Util/a11y'
 
 /**
  * this class to ease the usage of jquery dialogs
@@ -312,7 +313,7 @@ const Dialogs = {
 
 			self.$showGridView = $('button#picker-showgridview')
 			self.$showGridView.on('click keydown', function(event) {
-				if (event.type === 'click' || (event.type === 'keydown' && event.key === 'Enter')) {
+				if (isA11yClick(event)) {
 					self._onGridviewChange()
 				}
 			})
@@ -352,7 +353,7 @@ const Dialogs = {
 			var $input = $form.find('input[type=\'text\']')
 			var $submit = $form.find('input[type=\'submit\']')
 			$input.on('keydown', function(event) {
-				if (event.key === 'Enter') {
+				if (isA11yClick(event)) {
 					event.stopImmediatePropagation()
 					event.preventDefault()
 					$form.submit()
@@ -444,17 +445,17 @@ const Dialogs = {
 				self.$filelistContainer = self.$filePicker.find('.filelist-container')
 				self.$dirTree = self.$filePicker.find('.dirtree')
 				self.$dirTree.on('click keydown', 'div:not(:last-child)', self, function(event) {
-					if (event.type === 'click' || (event.type === 'keydown' && event.key === 'Enter')) {
+					if (isA11yClick(event)) {
 						self._handleTreeListSelect(event, type)
 					}
 				})
 				self.$filelist.on('click keydown', 'tr', function(event) {
-					if (event.type === 'click' || (event.type === 'keydown' && event.key === 'Enter')) {
+					if (isA11yClick(event)) {
 						self._handlePickerClick(event, $(this), type)
 					}
 				})
 				self.$fileListHeader.on('click keydown', 'a', function(event) {
-					if (event.type === 'click' || (event.type === 'keydown' && event.key === 'Enter')) {
+					if (isA11yClick(event)) {
 						var dir = self.$filePicker.data('path')
 						self.filepicker.sortField = $(event.currentTarget).data('sort')
 						self.filepicker.sortOrder = self.filepicker.sortOrder === 'asc' ? 'desc' : 'asc'
diff --git a/core/src/Util/a11y.js b/core/src/Util/a11y.js
new file mode 100644
index 00000000000..b1eedb3984f
--- /dev/null
+++ b/core/src/Util/a11y.js
@@ -0,0 +1,36 @@
+/**
+ * @copyright 2022 Christopher Ng <chrng8@gmail.com>
+ *
+ * @author Christopher Ng <chrng8@gmail.com>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+/**
+ * @param {Event} event DOM event
+ *
+ * @return {boolean}
+ */
+export const isA11yClick = (event) => {
+	if (event.type === 'click') {
+		return true
+	}
+	if (event.type === 'keydown' && event.key === 'Enter') {
+		return true
+	}
+	return false
+}
diff --git a/core/src/jquery/ocdialog.js b/core/src/jquery/ocdialog.js
index 17f466e7cb1..31fbf3a333a 100644
--- a/core/src/jquery/ocdialog.js
+++ b/core/src/jquery/ocdialog.js
@@ -24,6 +24,7 @@
  */
 
 import $ from 'jquery'
+import { isA11yClick } from '../Util/a11y'
 
 $.widget('oc.ocdialog', {
 	options: {
@@ -60,7 +61,7 @@ $.widget('oc.ocdialog', {
 		if (self.element.find('input').length === 1) {
 			const $input = self.element.find('input')
 			$input.on('keydown', function(event) {
-				if (event.key === 'Enter') {
+				if (isA11yClick(event)) {
 					if (self.$buttonrow) {
 						const $button = self.$buttonrow.find('button.primary')
 						if ($button && !$button.prop('disabled')) {
@@ -157,7 +158,7 @@ $.widget('oc.ocdialog', {
 				}
 				self.$buttonrow.append($button)
 				$button.on('click keydown', function(event) {
-					if (event.type === 'click' || (event.type === 'keydown' && event.key === 'Enter')) {
+					if (isA11yClick(event)) {
 						val.click.apply(self.element[0], arguments)
 					}
 				})
@@ -179,7 +180,7 @@ $.widget('oc.ocdialog', {
 				const $closeButton = $('<a class="oc-dialog-close" tabindex="0"></a>')
 				this.$dialog.prepend($closeButton)
 				$closeButton.on('click keydown', function(event) {
-					if (event.type === 'click' || (event.type === 'keydown' && event.key === 'Enter')) {
+					if (isA11yClick(event)) {
 						self.options.closeCallback && self.options.closeCallback()
 						self.close()
 					}