fix(ui): use button instead of anchor for Quick Create

Replace <a href="#"> anti-pattern with a semantic
<button> element. Reset button styles via CSS,
add aria-label for accessibility, and replace the
button with an <a> edit link on success.

Author: apermo

assets/css/msls.css

@@ -12,11 +12,11 @@ abstract class Component {
 	const INPUT_PREFIX = 'msls_input_';
 
 	const ALLOWED_HTML = array(
-		'a'      => array(
-			'href'                => true,
-			'title'               => true,
+		'button' => array(
+			'type'                => true,
 			'class'               => true,
-			'target'              => true,
+			'title'               => true,
+			'aria-label'          => true,
 			'data-target-blog-id' => true,
 			'data-source-post-id' => true,
 			'data-source-blog-id' => true,

assets/js/msls-quick-create.js

@@ -245,7 +245,7 @@ protected function get_quick_create_a(): string {
 		$title  = sprintf( $format, $this->language );
 
 		return sprintf(
-			'<a class="msls-quick-create" href="#" title="%1$s" data-target-blog-id="%2$d" data-source-post-id="%3$d" data-source-blog-id="%4$d">%5$s</a>&nbsp;',
+			'<button type="button" class="msls-quick-create" title="%1$s" aria-label="%1$s" data-target-blog-id="%2$d" data-source-post-id="%3$d" data-source-blog-id="%4$d">%5$s</button>&nbsp;',
 			esc_attr( $title ),
 			$target_blog_id,
 			$this->id,

includes/Component/Component.php

@@ -3,36 +3,37 @@ jQuery( document ).ready(
 		$( document ).on(
 			'click',
 			'.msls-quick-create',
-			function ( e ) {
-				e.preventDefault();
+			function () {
+				var $button = $( this );
 
-				var $link = $( this );
-
-				if ( $link.hasClass( 'msls-loading' ) ) {
+				if ( $button.hasClass( 'msls-loading' ) ) {
 					return;
 				}
 
-				$link.addClass( 'msls-loading' );
-				$link.find( '.dashicons' ).removeClass( 'dashicons-plus' ).addClass( 'dashicons-update' );
+				$button.addClass( 'msls-loading' );
+				$button.find( '.dashicons' ).removeClass( 'dashicons-plus' ).addClass( 'dashicons-update' );
 
 				wp.apiFetch(
 					{
 						path: '/msls/v1/create-translation',
 						method: 'POST',
 						data: {
-							source_post_id: parseInt( $link.data( 'source-post-id' ), 10 ),
-							source_blog_id: parseInt( $link.data( 'source-blog-id' ), 10 ),
-							target_blog_id: parseInt( $link.data( 'target-blog-id' ), 10 )
+							source_post_id: parseInt( $button.data( 'source-post-id' ), 10 ),
+							source_blog_id: parseInt( $button.data( 'source-blog-id' ), 10 ),
+							target_blog_id: parseInt( $button.data( 'target-blog-id' ), 10 )
 						}
 					}
 				).then(
 					function ( response ) {
-						$link.removeClass( 'msls-quick-create msls-loading' );
-						$link.removeAttr( 'data-target-blog-id data-source-post-id data-source-blog-id' );
-						$link.attr( 'href', response.edit_url );
-						$link.attr( 'title', $link.attr( 'title' ).replace( /Create/, 'Edit' ) );
+						var $link = $( '<a>' )
+							.attr( 'href', response.edit_url )
+							.attr( 'title', $button.attr( 'title' ).replace( /Create/, 'Edit' ) )
+							.html( $button.html() );
+
 						$link.find( '.dashicons' ).removeClass( 'dashicons-update dashicons-plus' ).addClass( 'dashicons-edit' );
 
+						$button.replaceWith( $link );
+
 						var $container = $link.closest( 'li' );
 						if ( ! $container.length ) {
 							return;
@@ -52,8 +53,8 @@ jQuery( document ).ready(
 					}
 				).catch(
 					function () {
-						$link.removeClass( 'msls-loading' );
-						$link.find( '.dashicons' ).removeClass( 'dashicons-update' ).addClass( 'dashicons-plus' );
+						$button.removeClass( 'msls-loading' );
+						$button.find( '.dashicons' ).removeClass( 'dashicons-update' ).addClass( 'dashicons-plus' );
 					}
 				);
 			}