Make DeleteServerButton more accessible

src/index.scss

@@ -2,7 +2,3 @@
 @import 'node_modules/bootstrap/scss/bootstrap.scss';
 @import 'node_modules/@shlinkio/shlink-frontend-kit/dist/index'; // After bootstrap. Includes CSS overwrites
 @import 'node_modules/@shlinkio/shlink-web-component/dist/index';
-
-* {
-  outline: none !important;
-}

src/servers/DeleteServerButton.tsx

@@ -1,6 +1,7 @@
 import { faMinusCircle as deleteIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useToggle } from '@shlinkio/shlink-frontend-kit';
+import classNames from 'classnames';
 import type { FC, PropsWithChildren } from 'react';
 import type { ServerWithId } from './data';
 import type { DeleteServerModalProps } from './DeleteServerModal';
@@ -18,10 +19,10 @@ export const DeleteServerButton = (DeleteServerModal: FC<DeleteServerModalProps>
 
   return (
     <>
-      <span className={className} onPointerDown={showModal}>
+      <button type="button" className={classNames(className, 'p-0 bg-transparent border-0')} onClick={showModal}>
         {!children && <FontAwesomeIcon fixedWidth icon={deleteIcon} />}
         <span className={textClassName}>{children ?? 'Remove this server'}</span>
-      </span>
+      </button>
 
       <DeleteServerModal server={server} isOpen={isModalOpen} toggle={hideModal} />
     </>

src/servers/helpers/ServerError.scss

@@ -9,7 +9,7 @@
 
 .server-error__delete-btn {
   color: $dangerColor;
-  cursor: pointer;
+  font-weight: inherit;
 }
 
 .server-error__delete-btn:hover {

test/servers/__snapshots__/DeleteServerButton.test.tsx.snap

@@ -1,37 +1,49 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<DeleteServerButton /> > renders expected content 1`] = `
-<span>
+<button
+  class="p-0 bg-transparent border-0"
+  type="button"
+>
   <span
     class="button"
   >
     Foo bar
   </span>
-</span>
+</button>
 `;
 
 exports[`<DeleteServerButton /> > renders expected content 2`] = `
-<span>
+<button
+  class="p-0 bg-transparent border-0"
+  type="button"
+>
   <span
     class="button"
   >
     baz
   </span>
-</span>
+</button>
 `;
 
 exports[`<DeleteServerButton /> > renders expected content 3`] = `
-<span>
+<button
+  class="p-0 bg-transparent border-0"
+  type="button"
+>
   <span
     class="button"
   >
     something
   </span>
-</span>
+</button>
 `;
 
 exports[`<DeleteServerButton /> > renders expected content 4`] = `
-<span>
+<button
+  class="p-0 bg-transparent border-0"
+  type="button"
+>
   <svg
     aria-hidden="true"
     class="svg-inline--fa fa-circle-minus fa-fw "
@@ -52,5 +64,5 @@ exports[`<DeleteServerButton /> > renders expected content 4`] = `
   >
     Remove this server
   </span>
-</span>
+</button>
 `;