diff --git a/nunaliit2-js/src/main/js/nunaliit2/css/basic/n2.schema.css b/nunaliit2-js/src/main/js/nunaliit2/css/basic/n2.schema.css index e9d9b27d0..3cdfbcf66 100644 --- a/nunaliit2-js/src/main/js/nunaliit2/css/basic/n2.schema.css +++ b/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 { diff --git a/nunaliit2-js/src/main/js/nunaliit2/n2.couchModule.js b/nunaliit2-js/src/main/js/nunaliit2/n2.couchModule.js index e12e4f351..adf305831 100644 --- a/nunaliit2-js/src/main/js/nunaliit2/n2.couchModule.js +++ b/nunaliit2-js/src/main/js/nunaliit2/n2.couchModule.js @@ -717,6 +717,7 @@ var ModuleDisplay = $n2.Class({ _this.sidePanelName = $n2.getUniqueId(); var $sidePanel = $('
') .attr('id',_this.sidePanelName) + .attr('tabindex', 0) .addClass('n2_content_text'); // Add side panel inside content panel or after content panel diff --git a/nunaliit2-js/src/main/js/nunaliit2/n2.help.js b/nunaliit2-js/src/main/js/nunaliit2/n2.help.js index decddf2d2..339498d1f 100644 --- a/nunaliit2-js/src/main/js/nunaliit2/n2.help.js +++ b/nunaliit2-js/src/main/js/nunaliit2/n2.help.js @@ -110,6 +110,7 @@ var HelpDisplay = $n2.Class({ var $dialog = $('
') .attr('id',this.helpDialogId) + .attr('tabindex', 0) .addClass('n2help_content') .appendTo( $('body') ); diff --git a/nunaliit2-js/src/main/js/nunaliit2/n2.schema.js b/nunaliit2-js/src/main/js/nunaliit2/n2.schema.js index f1f2b327f..0d3f362d1 100644 --- a/nunaliit2-js/src/main/js/nunaliit2/n2.schema.js +++ b/nunaliit2-js/src/main/js/nunaliit2/n2.schema.js @@ -531,20 +531,20 @@ function _arrayField() { r.push('
'); - r.push('
'); + r.push('
'); - r.push('
'); + r.push( options.fn(item,{data:{n2_selector:completeSelectors}}) ); - r.push('
'); + r.push('
'); - r.push('
'); - - r.push('
'); // close buttons - - r.push('
'); + r.push('
'); - r.push( options.fn(item,{data:{n2_selector:completeSelectors}}) ); + r.push(''); + r.push(''); + + r.push(''); + r.push('
'); }; }; @@ -561,11 +561,11 @@ function _arrayField() { }; if( arraySelector ){ var arrayClass = createClassStringFromSelector(arraySelector); - r.push('
'); + r.push('>'); }; r.push('
'); @@ -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(); + } + } }; }, diff --git a/nunaliit2-js/src/main/js/nunaliit2/n2.widgetSelectableFilter.js b/nunaliit2-js/src/main/js/nunaliit2/n2.widgetSelectableFilter.js index 992d7b00c..643a14256 100644 --- a/nunaliit2-js/src/main/js/nunaliit2/n2.widgetSelectableFilter.js +++ b/nunaliit2-js/src/main/js/nunaliit2/n2.widgetSelectableFilter.js @@ -1010,6 +1010,7 @@ var MultiFilterSelectionDropDownWidget = $n2.Class('MultiFilterSelectionDropDown $('') .text(_loc(label)) .attr('data-n2-choiceId',choiceId) + .attr('href', '#') .appendTo($div) .click(function(){ var $a = $(this);