support for dom element accessibility (#1250)

* email templates for document creation and user registration notification

* Revert "email templates for document creation and user registration notification"

This reverts commit 229e3a9.

* dispatch an editDocumentWKTReceived event after document is updated with nunaliit_geom

* add href to multiselect checkbox to make it accessible via keyboard

* add tabindex to map overview dispaly container to make it focusable with tab key

* add tabindex to help content container to make if focusable with tab key

* add appropriate tag for array inputs plus/grabage button to make them interactable with tab

* Fix focus handling in jQuery dialog when adding/removing form elements

---------

Co-authored-by: Jagdish Kunwar <jkunwar@luageo.com>

nunaliit2-js/src/main/js/nunaliit2/css/basic/n2.schema.css

@@ -12,7 +12,9 @@
 
 .n2schema_array_item {
 	position: relative;
-	min-height: 58px;
+	display: flex;
+	align-items: center;
+	margin-bottom: 12px;
 }
 
 .n2_tag_element {
@@ -108,11 +110,8 @@
 }
 
 .n2schema_array_item_buttons {
-	position: absolute;
-	right: 0px;
-	top: 0px;
-	width: 16px;
-	z-index: 1;
+	display: flex;
+	flex-direction: column;
 }
 
 .n2schema_array_item_delete {
@@ -144,6 +143,7 @@
 
 .n2schema_array_item_wrapper {
 	margin-right: 16px;
+	width: 100%;
 }
 
 .n2schema_referenceDelete {

nunaliit2-js/src/main/js/nunaliit2/n2.couchModule.js

@@ -717,6 +717,7 @@ var ModuleDisplay = $n2.Class({
 				_this.sidePanelName = $n2.getUniqueId();
 				var $sidePanel = $('<div></div>')
 					.attr('id',_this.sidePanelName)
+					.attr('tabindex', 0)
 					.addClass('n2_content_text');
 
 				// Add side panel inside content panel or after content panel

nunaliit2-js/src/main/js/nunaliit2/n2.help.js

@@ -110,6 +110,7 @@ var HelpDisplay = $n2.Class({
 
 		var $dialog = $('<div>')
 			.attr('id',this.helpDialogId)
+			.attr('tabindex', 0)
 			.addClass('n2help_content')
 			.appendTo( $('body') );
 

nunaliit2-js/src/main/js/nunaliit2/n2.schema.js

@@ -531,20 +531,20 @@ function _arrayField() {
 
 			r.push('<div class="n2schema_array_item">');
 
-			r.push('<div class="n2schema_array_item_buttons">');
+			r.push('<div class="n2schema_array_item_wrapper">');
 
-			r.push('<div class="n2schema_array_item_delete '+cl+'"></div>');
+			r.push( options.fn(item,{data:{n2_selector:completeSelectors}}) );
 
-			r.push('<div class="n2schema_array_item_up '+cl+'"></div>');
+			r.push('</div>');
 
-			r.push('<div class="n2schema_array_item_down '+cl+'"></div>');
-
-			r.push('</div>'); // close buttons
-
-			r.push('<div class="n2schema_array_item_wrapper">');
+			r.push('<div class="n2schema_array_item_buttons">');
 
-			r.push( options.fn(item,{data:{n2_selector:completeSelectors}}) );
+			r.push('<button class="n2schema_array_item_delete '+cl+'"></button>');
 
+			r.push('<button class="n2schema_array_item_up '+cl+'"></button>');
+
+			r.push('<button class="n2schema_array_item_down '+cl+'"></button>');
+
 			r.push('</div></div>');
 		};
 	};
@@ -561,11 +561,11 @@ function _arrayField() {
 	};
 	if( arraySelector ){
 		var arrayClass = createClassStringFromSelector(arraySelector);
-		r.push('<div class="n2schema_array_add '+arrayClass+'"');
+		r.push('<button class="n2schema_array_add '+arrayClass+'"');
 		if( newType ) {
 			r.push('n2_array_new_type="'+newType+'"');
 		};
-		r.push('></div>');
+		r.push('></button>');
 	};
 
 	r.push('</div>');
@@ -1928,6 +1928,24 @@ var Form = $n2.Class({
 					};
 				});
 			};
+
+			/**
+			 * When adding or removing form elements within a jQuery dialog, the focus may
+			 * shift to the body tag, preventing keyboard users from navigating back to 
+			 * the dialog. To handle this scenario, we check for any visible jQuery dialogs,
+			 * search for focusable elements within the dialog, and set the focus to the first 
+			 * visible one.
+			 */
+			var $openDialog = $('.ui-dialog-content:visible');
+			if ($openDialog.length) {
+				var $focusableElements = $openDialog
+					.find('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])')
+					.filter(':visible');
+
+				if ($focusableElements.length) {
+					$focusableElements.first().focus();
+				}
+			}
 		};
 	},
 

nunaliit2-js/src/main/js/nunaliit2/n2.widgetSelectableFilter.js

@@ -1010,6 +1010,7 @@ var MultiFilterSelectionDropDownWidget = $n2.Class('MultiFilterSelectionDropDown
 			$('<a>')
 				.text(_loc(label))
 				.attr('data-n2-choiceId',choiceId)
+				.attr('href', '#')
 				.appendTo($div)
 				.click(function(){
 					var $a = $(this);