From 1ef96662a332e9a2f8133fb583ebaeae40fce983 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Sat, 2 Sep 2023 10:48:02 +0200
Subject: [PATCH] Make DeleteServerButton more accessible

---
 src/index.scss                                |  4 ---
 src/servers/DeleteServerButton.tsx            |  5 ++--
 src/servers/helpers/ServerError.scss          |  2 +-
 .../DeleteServerButton.test.tsx.snap          | 28 +++++++++++++------
 4 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/src/index.scss b/src/index.scss
index eb43b270..5256dff4 100644
--- a/src/index.scss
+++ b/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;
-}
diff --git a/src/servers/DeleteServerButton.tsx b/src/servers/DeleteServerButton.tsx
index 651f6561..9955aaa0 100644
--- a/src/servers/DeleteServerButton.tsx
+++ b/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} />
     </>
diff --git a/src/servers/helpers/ServerError.scss b/src/servers/helpers/ServerError.scss
index 6aed0332..b968043e 100644
--- a/src/servers/helpers/ServerError.scss
+++ b/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 {
diff --git a/test/servers/__snapshots__/DeleteServerButton.test.tsx.snap b/test/servers/__snapshots__/DeleteServerButton.test.tsx.snap
index 4f590482..392d4342 100644
--- a/test/servers/__snapshots__/DeleteServerButton.test.tsx.snap
+++ b/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>
 `;