Improves accessibility in categories filter for submissions

js/pages/submission/SubmissionCategoriesFilterHandler.js

@@ -0,0 +1,101 @@
+/**
+ * @defgroup js_pages_submission
+ */
+/**
+ * @file js/pages/submission/SubmissionCategoriesFilterHandler.js
+ *
+ * Copyright (c) 2014-2021 Simon Fraser University
+ * Copyright (c) 2000-2021 John Willinsky
+ * Distributed under the GNU GPL v3. For full terms see the file docs/COPYING.
+ *
+ * @class SubmissionCategoriesFilterHandler
+ * @ingroup js_pages_submission
+ *
+ * @brief A handler for the categories filter for submissions
+ */
+(function($) {
+
+	/** @type {Object} */
+	$.pkp.pages.submission =
+			$.pkp.pages.submission || {};
+
+
+
+	/**
+	 * @constructor
+	 *
+	 * @extends $.pkp.classes.Handler
+	 *
+	 * @param {jQueryObject} $widgetWrapper An HTML element that contains the
+	 *   widget.
+	 * @param {Object} options Handler options.
+	 */
+	$.pkp.pages.submission.SubmissionCategoriesFilterHandler =
+			function($widgetWrapper, options) {
+
+		this.parent($widgetWrapper, options);
+		var self = this;
+
+		$('input:checkbox', $widgetWrapper).on('click',
+				self.callbackWrapper(self.assignCategory));
+
+		$('input:text', $widgetWrapper).on('keyup',
+				self.callbackWrapper(self.searchCategories));
+	};
+	$.pkp.classes.Helper.inherits(
+			$.pkp.pages.submission.SubmissionCategoriesFilterHandler,
+			$.pkp.classes.Handler);
+
+
+	//
+	// Public methods
+	//
+
+	/**
+	 * Assign/Unassign the category item and move it to correct element
+	 *
+	 * @param {HTMLElement} sourceElement The element that
+	 *  issued the event.
+	 * @param {Event} event The triggering event.
+	 */
+	$.pkp.pages.submission.SubmissionCategoriesFilterHandler.
+			prototype.assignCategory = function(sourceElement, event) {
+		if ($(sourceElement).is(':checked')) {
+			$(sourceElement).parents('li').appendTo('.assigned_categories ul');
+		} else {
+			$(sourceElement).parents('li').appendTo('.unassigned_categories ul');
+		}
+	};
+
+	/**
+	 * Search categories by text
+	 *
+	 * @param {HTMLElement} sourceElement The element that
+	 *  issued the event.
+	 * @param {Event} event The triggering event.
+	 */
+	$.pkp.pages.submission.SubmissionCategoriesFilterHandler.
+			prototype.searchCategories = function(sourceElement, event) {
+		var self = this,
+				filter = self.formatText(
+						$(sourceElement).val());
+		$('.unassigned_categories ul li').filter(function() {
+			var category = self.formatText(
+					$('label', this).text());
+			$(this).toggle(category.indexOf(filter) > -1);
+		});
+	};
+
+	/**
+	 * Remove accents for text and converts to uppercase
+	 *
+	 * @param {string} text The text that will be formatted
+	 * for the categories search
+	 * @return {string} The text formatted without accents and in uppercase.
+	 */
+	$.pkp.pages.submission.SubmissionCategoriesFilterHandler.
+			prototype.formatText = function(text) {
+		return text.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toUpperCase();
+	};
+
+}(jQuery));

styles/pages/submission.less

@@ -13,4 +13,22 @@
 	#submission-files-container {
 		margin-bottom: 1rem;
 	}
-}
+
+	#categoriesList {
+		height: 250px;
+		overflow: hidden;
+		overflow-y: scroll;
+		border: @bg-border;
+		padding: 5px 10px;
+		display: flex;
+
+		.assigned_categories,
+		.unassigned_categories {
+			flex: 1;
+		}
+
+		.assigned_categories li label {
+			font-weight: @bold;
+		}
+	}
+}

templates/submission/form/categories.tpl

@@ -7,20 +7,26 @@
  *
  * Include categories for submissions.
  *}
+
 {if count($categories)}
-	{if $readOnly}
-		{fbvFormSection title="grid.category.categories" list=true}
+    {if $readOnly}
+        {fbvFormSection title="grid.category.categories" list=true}
 			{foreach from=$categories item="category" key="id"}
 				{if in_array($id, $assignedCategories)}
 					<li>{$category->getLocalizedTitle()|escape}</li>
 				{/if}
 			{/foreach}
-		{/fbvFormSection}
-	{else}
-		{fbvFormSection list=true title="grid.category.categories"}
-			{foreach from=$categories item="category" key="id"}
-				{fbvElement type="checkbox" id="categories[]" value=$id checked=in_array($id, $assignedCategories) label=$category translate=false}
-			{/foreach}
-		{/fbvFormSection}
-	{/if}
+        {/fbvFormSection}
+    {else}
+
+        {if count($categories) > 10}
+            {include file="submission/form/categoriesFilter.tpl"}
+        {else}
+            {fbvFormSection title="grid.category.categories" list=true}
+                {foreach from=$categories item="category" key="id"}
+                    {fbvElement type="checkbox" id="categories[]" value=$id checked=in_array($id, $assignedCategories) label=$category translate=false}
+                {/foreach}
+            {/fbvFormSection}
+        {/if}
+    {/if}
 {/if}

templates/submission/form/categoriesFilter.tpl

@@ -0,0 +1,39 @@
+{**
+ * templates/submission/form/categoriesFilter.tpl
+ *
+ * Copyright (c) 2014-2021 Simon Fraser University
+ * Copyright (c) 2003-2021 John Willinsky
+ * Distributed under the GNU GPL v3. For full terms see the file docs/COPYING.
+ *
+ * Categories filter for submissions.
+ *}
+<script>
+	// Initialise JS handler.
+	$(function() {ldelim}
+		$('#pkp_submissionCategories').pkpHandler(
+			'$.pkp.pages.submission.SubmissionCategoriesFilterHandler'
+		);
+	{rdelim});
+</script>
+
+{fbvFormArea title="grid.category.categories" id="pkp_submissionCategories"}
+    {fbvFormSection}
+        {fbvElement type="text" label="common.search" multilingual="true" name="searchCategories" id="searchCategories" value=$searchCategories maxlength="255" aria-controls="categoriesList"}
+    {/fbvFormSection}
+    <div class="categories_list" id="categoriesList" aria-live="true">
+        {fbvFormSection class="unassigned_categories" list="true"}
+            {foreach from=$categories item="category" key="id"}
+                {if !in_array($id, $assignedCategories)}
+                    {fbvElement type="checkbox" id="categories[]" value=$id checked=in_array($id, $assignedCategories) label=$category translate=false}
+                {/if}
+            {/foreach}
+        {/fbvFormSection}   
+        {fbvFormSection class="assigned_categories" list="true"}
+            {foreach from=$categories item="category" key="id"}
+                {if in_array($id, $assignedCategories)}
+                    {fbvElement type="checkbox" id="categories[]" value=$id checked=in_array($id, $assignedCategories) label=$category translate=false}
+                {/if}
+            {/foreach}
+        {/fbvFormSection}
+    </div>
+{/fbvFormArea}