Convert dialog close button into actual button

This is better for accessibility

Author: tvdeyen

app/assets/builds/alchemy/admin.css

@@ -233,7 +233,7 @@ export class Dialog {
     this.dialog_header = $('<div class="alchemy-dialog-header" />')
     this.dialog_title = $('<div class="alchemy-dialog-title" />')
     this.close_button = $(
-      '<a class="alchemy-dialog-close"><alchemy-icon name="close"></alchemy-icon></a>'
+      '<button class="alchemy-dialog-close"><alchemy-icon name="close"></alchemy-icon></button>'
     )
     this.dialog_title.text(this.options.title)
     this.dialog_header.append(this.dialog_title)

app/javascript/alchemy_admin/dialog.js

@@ -156,6 +156,23 @@
   }
 }
 
+.alchemy-dialog-close {
+  display: inline-flex;
+  width: var(--spacing-6);
+  height: var(--spacing-6);
+  justify-content: center;
+  align-items: center;
+  background-color: transparent;
+  border-color: transparent;
+  border-radius: var(--border-radius_medium);
+  color: var(--color-white);
+  padding: 0;
+
+  &:hover {
+    background-color: var(--color-blue_medium);
+  }
+}
+
 .alchemy-dialog-body {
   position: relative;
   color: var(--text-color);