ENH Use button element for delete button

Author: emteknetnz

client/dist/js/bundle.js

@@ -144,18 +144,6 @@ const LinkPickerTitle = ({
           </small>
         )}
       </div>
-      {(canDelete && !readonly && !disabled) &&
-        // This is a <span> rather than a <Button> because we're inside a <Button> and
-        // trigger an error when you attempt to nest a <Button> inside a <Button>.
-        <span
-          aria-label={deleteText}
-          role="button"
-          tabIndex="0"
-          className="link-picker__delete btn btn-link"
-          onKeyDown={handleDeleteKeyDown}
-          onClick={stopPropagation(() => !loading ? onDelete(id) : null)}
-        >{deleteText}</span>
-      }
     </Button>
     { (isMulti && !readonly && !disabled) && <div className="link-picker__drag-handle"
         {...attributes}
@@ -170,6 +158,17 @@ const LinkPickerTitle = ({
         focusable="false"
       ></i>
     </div> }
+    {(canDelete && !readonly && !disabled) &&
+      // Intentionally using a regular button element rather than a Button react component
+      // so that we do not end up with unwanted extra css classes
+      <button
+        aria-label={deleteText}
+        tabIndex="0"
+        className="link-picker__delete btn btn-link"
+        onKeyDown={handleDeleteKeyDown}
+        onClick={stopPropagation(() => !loading ? onDelete(id) : null)}
+      >{deleteText}</button>
+    }
   </Tag>
 };
 

client/src/components/LinkPicker/LinkPickerTitle.js

@@ -120,7 +120,6 @@ Feature: Accessibility Tests
     And I should see "External Link" in the "[data-field-id='Form_EditForm_HasManyLinks'] .link-picker__link--is-last" element
     When I press the "Tab" key globally
     When I press the "Tab" key globally
-    When I press the "Tab" key globally
     Then the active element should be "[data-field-id='Form_EditForm_HasManyLinks'] .link-picker__drag-handle"
     Then I press the "Enter" key globally
     And I press the "Down" key globally
@@ -132,7 +131,7 @@ Feature: Accessibility Tests
 
     # Test user can delete the link
 
-    Then I press the "Shift-Tab" key globally
+    Then I press the "Tab" key globally
     Then the active element should be "[data-field-id='Form_EditForm_HasManyLinks'] .link-picker__link:nth-of-type(3) .link-picker__delete"
     And I press the "Enter" key and confirm the dialog
     And I wait for 3 seconds