Fix keyboard accessibility and tab order for inputs with "more icon"

classes/helpers/FrmAppHelper.php

@@ -1291,6 +1291,7 @@ public static function kses_icon( $icon ) {
 	public static function add_allowed_icon_tags( $allowed_html ) {
 		$allowed_html['svg']['data-open'] = true;
 		$allowed_html['svg']['title']     = true;
+		$allowed_html['svg']['tabindex']  = true;
 		return $allowed_html;
 	}
 

classes/models/fields/FrmFieldType.php

@@ -534,10 +534,11 @@ public function show_default_value_setting( $field, $field_obj, $default_value_t
 	public function display_smart_values_modal_trigger_icon( $field ) {
 		$special_default = ( isset( $field['post_field'] ) && $field['post_field'] === 'post_category' ) || $field['type'] === 'data';
 		FrmAppHelper::icon_by_class(
-			'frm_icon_font frm_more_horiz_solid_icon frm-show-inline-modal',
+			'frm_icon_font frm_more_horiz_solid_icon frm-show-inline-modal frm-input-icon',
 			array(
 				'data-open' => $special_default ? 'frm-tax-box-' . $field['id'] : 'frm-smart-values-box',
 				'title'     => esc_attr__( 'Toggle Options', 'formidable' ),
+				'tabindex'  => '0',
 			)
 		);
 	}

classes/views/frm-fields/back-end/combo-field/sub-field-options.php

@@ -43,14 +43,6 @@ class="<?php echo esc_attr( $wrapper_classes ); ?>"
 						<?php echo esc_html( $labels[ $option ] ); ?>
 					</label>
 					<span class="frm-with-right-icon">
-						<?php
-						FrmAppHelper::icon_by_class(
-							'frm_icon_font frm_more_horiz_solid_icon frm-show-inline-modal',
-							array(
-								'data-open' => 'frm-smart-values-box',
-							)
-						);
-						?>
 						<input
 							type="text"
 							name="<?php echo esc_attr( $input_name ); ?>"
@@ -59,6 +51,15 @@ class="<?php echo esc_attr( $wrapper_classes ); ?>"
 							data-changeme="field_<?php echo esc_attr( $field_key . '_' . $sub_field['name'] ); ?>"
 							data-changeatt="value"
 						/>
+						<?php
+						FrmAppHelper::icon_by_class(
+							'frm_icon_font frm_more_horiz_solid_icon frm-show-inline-modal frm-input-icon',
+							array(
+								'data-open' => 'frm-smart-values-box',
+								'tabindex'  => '0',
+							)
+						);
+						?>
 					</span>
 				</p>
 				<?php

classes/views/frm-fields/back-end/default-value-setting.php

@@ -15,18 +15,17 @@ class="frm-has-modal frm-default-value-wrapper default-value-section-<?php echo
 
 	<span class="frm-flex-col frm-with-right-icon">
 		<?php
-		$field_obj->display_smart_values_modal_trigger_icon( $field );
-
 		if ( isset( $display['default_value'] ) && $display['default_value'] ) {
 			$default_name  = 'field_options[dyn_default_value_' . $field['id'] . ']';
 			$default_value = isset( $field['dyn_default_value'] ) ? $field['dyn_default_value'] : '';
 		} else {
 			$default_name  = 'default_value_' . $field['id'];
 			$default_value = $field['default_value'];
 		}
-		$field_obj->default_value_to_string( $default_value );
 
+		$field_obj->default_value_to_string( $default_value );
 		$field_obj->show_default_value_field( $field, $default_name, $default_value );
+		$field_obj->display_smart_values_modal_trigger_icon( $field );
 		?>
 	</span>
 </p>

classes/views/frm-fields/back-end/settings.php

@@ -147,13 +147,6 @@
 				</label>
 				<span class="frm-with-right-icon">
 					<?php
-					FrmAppHelper::icon_by_class(
-						'frm_icon_font frm_more_horiz_solid_icon frm-show-inline-modal',
-						array(
-							'data-open' => 'frm-layout-classes-box',
-							'title'     => esc_attr__( 'Toggle Options', 'formidable' ),
-						)
-					);
 					$css_layout_classes_attrs = array(
 						'type'           => 'text',
 						'name'           => 'field_options[classes_' . $field['id'] . ']',
@@ -167,6 +160,16 @@
 					);
 					?>
 					<input <?php FrmAppHelper::array_to_html_params( $css_layout_classes_attrs, true ); ?> />
+					<?php
+					FrmAppHelper::icon_by_class(
+						'frm_icon_font frm_more_horiz_solid_icon frm-show-inline-modal frm-input-icon',
+						array(
+							'data-open' => 'frm-layout-classes-box',
+							'title'     => esc_attr__( 'Toggle Options', 'formidable' ),
+							'tabindex'  => '0',
+						)
+					);
+					?>
 				</span>
 			</p>
 			<?php

classes/views/frm-fields/back-end/value-format.php

@@ -8,15 +8,16 @@
 		<?php esc_html_e( 'Format', 'formidable' ); ?>
 	</label>
 	<span class="frm-with-right-icon">
+		<input type="text" class="frm_long_input frm_format_opt" value="<?php echo esc_attr( $field['format'] ); ?>" name="field_options[format_<?php echo absint( $field['id'] ); ?>]" id="frm_format_<?php echo absint( $field['id'] ); ?>" data-fid="<?php echo intval( $field['id'] ); ?>" />
 		<?php
 		FrmAppHelper::icon_by_class(
-			'frm_icon_font frm_more_horiz_solid_icon frm-show-inline-modal',
+			'frm_icon_font frm_more_horiz_solid_icon frm-show-inline-modal frm-input-icon',
 			array(
 				'data-open' => 'frm-input-mask-box',
 				'title'     => esc_attr__( 'Toggle Options', 'formidable' ),
+				'tabindex'  => '0',
 			)
 		);
 		?>
-		<input type="text" class="frm_long_input frm_format_opt" value="<?php echo esc_attr( $field['format'] ); ?>" name="field_options[format_<?php echo absint( $field['id'] ); ?>]" id="frm_format_<?php echo absint( $field['id'] ); ?>" data-fid="<?php echo intval( $field['id'] ); ?>" />
 	</span>
 </p>

js/src/admin/admin.js

@@ -6671,10 +6671,10 @@ window.frmAdminBuildJS = function() {
 	function maybeShowInlineModal( e ) {
 		/*jshint validthis:true */
 		e.preventDefault();
-		showInlineModal( this );
+		showInlineModal( this, undefined, e );
 	}
 
-	function showInlineModal( icon, input ) {
+	function showInlineModal( icon, input, event ) {
 		const box = document.getElementById( icon.getAttribute( 'data-open' ) ),
 			container = jQuery( icon ).closest( 'p,ul' ),
 			inputTrigger = ( typeof input !== 'undefined' );
@@ -6688,7 +6688,10 @@ window.frmAdminBuildJS = function() {
 			}
 			if ( input !== null ) {
 				if ( ! inputTrigger ) {
-					input.focus();
+					const { key } = event;
+					if ( key !== 'Enter' && key !== ' ' ) {
+						input.focus();
+					}
 				}
 				container.after( box );
 				box.setAttribute( 'data-fills', input.id.replace( '-proxy-input', '' ) );
@@ -8447,12 +8450,6 @@ window.frmAdminBuildJS = function() {
 		result.innerHTML = '[' + code + '[/if ' + field + ']';
 	}
 
-	function showBuilderModal() {
-		/*jshint validthis:true */
-		const moreIcon = getIconForInput( this );
-		showInlineModal( moreIcon, this );
-	}
-
 	function maybeShowModal( input ) {
 		let moreIcon;
 		if ( input.parentNode.parentNode.classList.contains( 'frm_has_shortcodes' ) ) {
@@ -8812,6 +8809,10 @@ window.frmAdminBuildJS = function() {
 	 * @return {Element} The associated input or textarea
 	 */
 	function getInputForIcon( moreIcon ) {
+		if ( moreIcon.classList.contains( 'frm-input-icon' ) ) {
+			return moreIcon.previousElementSibling;
+		}
+
 		// For regular fields
 		let input = moreIcon.nextElementSibling;
 		while ( input !== null && (
@@ -8832,6 +8833,10 @@ window.frmAdminBuildJS = function() {
 	 * Get the ... icon for the selected input box.
 	 */
 	function getIconForInput( input ) {
+		if ( input.nextElementSibling?.classList.contains( 'frm-input-icon' ) ) {
+			return input.nextElementSibling;
+		}
+
 		let moreIcon = input.previousElementSibling;
 
 		while ( moreIcon !== null && moreIcon.tagName !== 'I' && moreIcon.tagName !== 'svg' ) {
@@ -10820,7 +10825,6 @@ window.frmAdminBuildJS = function() {
 			$builderForm.on( 'change', '.frm_single_option input', resetOptOnChange );
 			$builderForm.on( 'change', '.frm_image_id', resetOptOnChange );
 			$builderForm.on( 'change', '.frm_toggle_mult_sel', toggleMultSel );
-			$builderForm.on( 'focusin', '.frm_classes + .frm-token-proxy-input', showBuilderModal );
 
 			$newFields.on( 'click', '.frm_primary_label', clickLabel );
 			$newFields.on( 'click', '.frm_description', clickDescription );
@@ -10832,6 +10836,13 @@ window.frmAdminBuildJS = function() {
 			$builderForm.on( 'change', '.frm_get_field_selection', getFieldSelection );
 
 			$builderForm.on( 'click', '.frm-show-inline-modal', maybeShowInlineModal );
+			$builderForm.on( 'keydown', '.frm-show-inline-modal', function( event ) {
+				const { key } = event;
+				if ( key === 'Enter' || key === ' ' ) {
+					event.preventDefault();
+					maybeShowInlineModal.call( this, event );
+				}
+			} );
 
 			$builderForm.on( 'click', '.frm-inline-modal .dismiss', dismissInlineModal );
 			jQuery( document ).on( 'change', '[data-frmchange]', changeInputtedValue );

js/src/settings-components/components/toggle-group/toggle-group.js

@@ -124,6 +124,9 @@ function applyToggleState( toggleButton, toggleGroup ) {
 				element.querySelectorAll( 'input, select, textarea' ).forEach(
 					formElement => formElement.disabled = isChecked
 				);
+				element.querySelectorAll( '.frm-show-inline-modal[tabindex]' ).forEach(
+					inlineModal => inlineModal.tabIndex = isChecked ? -1 : 0
+				);
 			} );
 	}
 

resources/scss/admin/components/form/_input-icons.scss

@@ -84,4 +84,8 @@ i.frm-show-inline-modal {
 	z-index: 1;
 	cursor: pointer;
 	pointer-events: initial;
+
+	&:focus {
+		outline: 1px solid var(--primary-500);
+	}
 }

tests/cypress/e2e/Applications/validateApplicationsPage.cy.js

@@ -26,7 +26,8 @@ describe( 'Applications page', () => {
 							t.includes( 'upgrade today to unlock the full power of formidable forms' ) ||
 							t.includes( 'the most advanced wordpress form builder' ) ||
 							t.includes( 'more than just a wordpress form builder' ) ||
-							t.includes( 'get more done in less time with better wordpress forms' )
+							t.includes( 'get more done in less time with better wordpress forms' ) ||
+							t.includes( 'power your wordpress site like never before' )
 						);
 					} );
 				} );

tests/cypress/e2e/Forms/formPageDataValidation.cy.js

@@ -29,7 +29,7 @@ describe( 'Forms page', () => {
 								'the most advanced wordpress form builder',
 								'more than just a wordpress form builder',
 								'get more done in less time with better wordpress forms',
-
+								'power your wordpress site like never before',
 							] ).to.include( headingText );
 						} );
 					} );

tests/phpunit/misc/test_FrmAppHelper.php

@@ -361,7 +361,7 @@ public function test_kses_icon() {
 		$icon = '<svg class="frmsvg frm_zapier_icon frm_show_upgrade" style="--primary-700:#efefef"><use xlink:href="#frm_zapier_icon" /></svg>';
 		$this->assertEquals( $icon, FrmAppHelper::kses_icon( $icon ) );
 
-		$icon = '<svg class="frmsvg frm_more_horiz_solid_icon frm-show-inline-modal" data-open="frm-layout-classes-box" title="Toggle Options"><use xlink:href="#frm_more_horiz_solid_icon" /></svg>';
+		$icon = '<svg class="frmsvg frm_more_horiz_solid_icon frm-show-inline-modal" data-open="frm-layout-classes-box" title="Toggle Options" tabindex="0"><use xlink:href="#frm_more_horiz_solid_icon" /></svg>';
 		$this->assertEquals( $icon, FrmAppHelper::kses_icon( $icon ) );
 
 		$icon = '<svg class="frmsvg" aria-label="WordPress" style="width:90px;height:90px"><use xlink:href="#frm_wordpress_icon" /></svg>';