Application Passwords: Allow enter key to submit profile form.

Fix the enter key in profile form fields moving focus to the application password input instead of submitting the profile update for. Replace the submit button type used for application passwords with `button type="button"` and ensure that the enter key's native behavior isn't overwritten.

props audrasjb, alexstine, promz, sabernhardt.
Fixes #52849.
Built from https://develop.svn.wordpress.org/trunk@51086


git-svn-id: http://core.svn.wordpress.org/trunk@50695 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/includes/class-wp-application-passwords-list-table.php

@@ -110,15 +110,13 @@ class WP_Application_Passwords_List_Table extends WP_List_Table {
 	 * @param array $item The current application password item.
 	 */
 	public function column_revoke( $item ) {
-		submit_button(
-			__( 'Revoke' ),
-			'delete',
-			'revoke-application-password-' . $item['uuid'],
-			false,
-			array(
+		$name = 'revoke-application-password-' . $item['uuid'];
+		printf(
+			'<button type="button" name="%1$s" id="%1$s" class="button delete" aria-label="%2$s">%3$s</button>',
+			esc_attr( $name ),
 			/* translators: %s: the application password's given name. */
-				'aria-label' => sprintf( __( 'Revoke "%s"' ), $item['name'] ),
-			)
+			esc_attr( sprintf( __( 'Revoke "%s"' ), $item['name'] ) ),
+			__( 'Revoke' )
 		);
 	}
 
@@ -156,7 +154,7 @@ class WP_Application_Passwords_List_Table extends WP_List_Table {
 		<div class="tablenav <?php echo esc_attr( $which ); ?>">
 			<?php if ( 'bottom' === $which ) : ?>
 				<div class="alignright">
-					<?php submit_button( __( 'Revoke all application passwords' ), 'delete', 'revoke-all-application-passwords', false ); ?>
+					<button type="button" name="revoke-all-application-passwords" id="revoke-all-application-passwords" class="button delete"><?php _e( 'Revoke all application passwords' ); ?></button>
 				</div>
 			<?php endif; ?>
 			<div class="alignleft actions bulkactions">
@@ -235,10 +233,10 @@ class WP_Application_Passwords_List_Table extends WP_List_Table {
 					break;
 				case 'revoke':
 					printf(
-						'<input type="submit" class="button delete" value="%1$s" aria-label="%2$s">',
-						esc_attr__( 'Revoke' ),
+						'<button type="button" class="button delete" aria-label="%1$s">%2$s</button>',
 						/* translators: %s: the application password's given name. */
-						esc_attr( sprintf( __( 'Revoke "%s"' ), '{{ data.name }}' ) )
+						esc_attr( sprintf( __( 'Revoke "%s"' ), '{{ data.name }}' ) ),
+						esc_html__( 'Revoke' )
 					);
 					break;
 				default:

wp-admin/js/application-passwords.js

@@ -150,6 +150,13 @@
 		} );
 	} );
 
+	$newAppPassField.on( 'keypress', function ( e ) {
+		if ( 13 === e.which ) {
+			e.preventDefault();
+			$newAppPassButton.trigger( 'click' );
+		}
+	} );
+
 	// If there are no items, don't display the table yet.  If there are, show it.
 	if ( 0 === $appPassTbody.children( 'tr' ).not( $appPassTrNoItems ).length ) {
 		$appPassTwrapper.hide();

wp-admin/js/application-passwords.min.js

@@ -1,2 +1,2 @@
 /*! This file is auto-generated */
-!function(o){var a=o("#application-passwords-section"),i=a.find(".create-application-password"),t=i.find(".input"),n=i.find(".button"),p=a.find(".application-passwords-list-table-wrapper"),r=a.find("tbody"),d=r.find(".no-items"),e=o("#revoke-all-application-passwords"),l=wp.template("new-application-password"),c=wp.template("application-password-row"),u=o("#user_id").val();function w(e,s,a){f(e.responseJSON&&e.responseJSON.message?e.responseJSON.message:a,"error")}function f(e,s){e=o("<div></div>").attr("role","alert").attr("tabindex","-1").addClass("is-dismissible notice notice-"+s).append(o("<p></p>").text(e)).append(o("<button></button>").attr("type","button").addClass("notice-dismiss").append(o("<span></span>").addClass("screen-reader-text").text(wp.i18n.__("Dismiss this notice."))));return i.after(e),e}function v(){o(".notice",a).remove()}n.on("click",function(e){var s;e.preventDefault(),n.prop("aria-disabled")||(0!==(e=t.val()).length?(v(),n.prop("aria-disabled",!0).addClass("disabled"),s={name:e},s=wp.hooks.applyFilters("wp_application_passwords_new_password_request",s,u),wp.apiRequest({path:"/wp/v2/users/"+u+"/application-passwords?_locale=user",method:"POST",data:s}).always(function(){n.removeProp("aria-disabled").removeClass("disabled")}).done(function(e){t.val(""),n.prop("disabled",!1),i.after(l({name:e.name,password:e.password})),o(".new-application-password-notice").trigger("focus"),r.prepend(c(e)),p.show(),d.remove(),wp.hooks.doAction("wp_application_passwords_created_password",e,s)}).fail(w)):t.trigger("focus"))}),r.on("click",".delete",function(e){var s,a;e.preventDefault(),window.confirm(wp.i18n.__("Are you sure you want to revoke this password? This action cannot be undone."))&&(s=o(this),e=(a=s.closest("tr")).data("uuid"),v(),s.prop("disabled",!0),wp.apiRequest({path:"/wp/v2/users/"+u+"/application-passwords/"+e+"?_locale=user",method:"DELETE"}).always(function(){s.prop("disabled",!1)}).done(function(e){e.deleted&&(0===a.siblings().length&&p.hide(),a.remove(),f(wp.i18n.__("Application password revoked."),"success").trigger("focus"))}).fail(w))}),e.on("click",function(e){var s;e.preventDefault(),window.confirm(wp.i18n.__("Are you sure you want to revoke all passwords? This action cannot be undone."))&&(s=o(this),v(),s.prop("disabled",!0),wp.apiRequest({path:"/wp/v2/users/"+u+"/application-passwords?_locale=user",method:"DELETE"}).always(function(){s.prop("disabled",!1)}).done(function(e){e.deleted&&(r.children().remove(),a.children(".new-application-password").remove(),p.hide(),f(wp.i18n.__("All application passwords revoked."),"success").trigger("focus"))}).fail(w))}),a.on("click",".notice-dismiss",function(e){e.preventDefault();var s=o(this).parent();s.removeAttr("role"),s.fadeTo(100,0,function(){s.slideUp(100,function(){s.remove(),t.trigger("focus")})})}),0===r.children("tr").not(d).length&&p.hide()}(jQuery);
+!function(o){var a=o("#application-passwords-section"),i=a.find(".create-application-password"),t=i.find(".input"),n=i.find(".button"),p=a.find(".application-passwords-list-table-wrapper"),r=a.find("tbody"),d=r.find(".no-items"),e=o("#revoke-all-application-passwords"),l=wp.template("new-application-password"),c=wp.template("application-password-row"),u=o("#user_id").val();function w(e,s,a){f(e.responseJSON&&e.responseJSON.message?e.responseJSON.message:a,"error")}function f(e,s){e=o("<div></div>").attr("role","alert").attr("tabindex","-1").addClass("is-dismissible notice notice-"+s).append(o("<p></p>").text(e)).append(o("<button></button>").attr("type","button").addClass("notice-dismiss").append(o("<span></span>").addClass("screen-reader-text").text(wp.i18n.__("Dismiss this notice."))));return i.after(e),e}function v(){o(".notice",a).remove()}n.on("click",function(e){var s;e.preventDefault(),n.prop("aria-disabled")||(0!==(e=t.val()).length?(v(),n.prop("aria-disabled",!0).addClass("disabled"),s={name:e},s=wp.hooks.applyFilters("wp_application_passwords_new_password_request",s,u),wp.apiRequest({path:"/wp/v2/users/"+u+"/application-passwords?_locale=user",method:"POST",data:s}).always(function(){n.removeProp("aria-disabled").removeClass("disabled")}).done(function(e){t.val(""),n.prop("disabled",!1),i.after(l({name:e.name,password:e.password})),o(".new-application-password-notice").trigger("focus"),r.prepend(c(e)),p.show(),d.remove(),wp.hooks.doAction("wp_application_passwords_created_password",e,s)}).fail(w)):t.trigger("focus"))}),r.on("click",".delete",function(e){var s,a;e.preventDefault(),window.confirm(wp.i18n.__("Are you sure you want to revoke this password? This action cannot be undone."))&&(s=o(this),e=(a=s.closest("tr")).data("uuid"),v(),s.prop("disabled",!0),wp.apiRequest({path:"/wp/v2/users/"+u+"/application-passwords/"+e+"?_locale=user",method:"DELETE"}).always(function(){s.prop("disabled",!1)}).done(function(e){e.deleted&&(0===a.siblings().length&&p.hide(),a.remove(),f(wp.i18n.__("Application password revoked."),"success").trigger("focus"))}).fail(w))}),e.on("click",function(e){var s;e.preventDefault(),window.confirm(wp.i18n.__("Are you sure you want to revoke all passwords? This action cannot be undone."))&&(s=o(this),v(),s.prop("disabled",!0),wp.apiRequest({path:"/wp/v2/users/"+u+"/application-passwords?_locale=user",method:"DELETE"}).always(function(){s.prop("disabled",!1)}).done(function(e){e.deleted&&(r.children().remove(),a.children(".new-application-password").remove(),p.hide(),f(wp.i18n.__("All application passwords revoked."),"success").trigger("focus"))}).fail(w))}),a.on("click",".notice-dismiss",function(e){e.preventDefault();var s=o(this).parent();s.removeAttr("role"),s.fadeTo(100,0,function(){s.slideUp(100,function(){s.remove(),t.trigger("focus")})})}),t.on("keypress",function(e){13===e.which&&(e.preventDefault(),n.trigger("click"))}),0===r.children("tr").not(d).length&&p.hide()}(jQuery);

wp-admin/user-edit.php

@@ -780,7 +780,7 @@ endif;
 				do_action( 'wp_create_application_password_form', $profileuser );
 				?>
 
-				<?php submit_button( __( 'Add New Application Password' ), 'secondary', 'do_new_application_password' ); ?>
+				<button type="button" name="do_new_application_password" id="do_new_application_password" class="button button-secondary"><?php _e( 'Add New Application Password' ); ?></button>
 			</div>
 		<?php } else { ?>
 			<div class="notice notice-error inline">

wp-includes/version.php

@@ -13,7 +13,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '5.8-alpha-51085';
+$wp_version = '5.8-alpha-51086';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.