Add Related Item button keyboard accessibility (#1259)

* make related item button keyboard accessible

* open the related item option on enter press

* hide the menu when focusout from add related items menu

---------

Co-authored-by: Jagdish Kunwar <[email protected]>

Author: jkunwar

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

@@ -112,9 +112,15 @@ if( typeof $.widget === 'function' ){
 			var text = this.element.find('option').first().text();
 			this.button = $('<select>')
 				.appendTo(this.wrapper)
-				.mousedown(function(e){
+				.on('mousedown', function(e) {
 					_this._toggleMenu();
 					return false;
+				})
+				.on('keydown', function(e) {
+					if (e.key === 'Enter' || e.keyCode === 13) {
+						_this._toggleMenu();
+						return false;
+					}
 				});
 			if( classes ){
 				this.button.attr('class',classes);
@@ -130,9 +136,15 @@ if( typeof $.widget === 'function' ){
 				.css('top','0px')
 				.css('display','block')
 				.css('z-index',1000)
+				.attr('tabindex',0)
 				.hide()
 				.appendTo(this.wrapper);
-
+			
+			this.menu.on('focusout', function(e) {
+				if (!_this.menu.has(e.relatedTarget).length) {
+					_this.menu.hide();
+				}
+			});
 			this.element.hide();
 		}
 
@@ -182,8 +194,10 @@ if( typeof $.widget === 'function' ){
 				menu.empty();
 				menu.hide();
 			} else {
+				menu.empty();
 				this._createMenu(menu);
 				menu.show();
+				menu.find('a').attr('tabindex', 0);
 				menu.position({
 						my:'left top'
 						,at: 'left bottom'