fix(InlineCloseButton): use semantic button

EOSC-synergy · Sep 18, 2023 · 4bbc078 · 4bbc078
1 parent e2df48d
commit 4bbc078
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/components/InlineCloseButton.module.scss b/components/InlineCloseButton.module.scss
@@ -0,0 +1,4 @@
+.unstyledButton {
+    border: none;
+    background: none;
+}
diff --git a/components/InlineCloseButton.tsx b/components/InlineCloseButton.tsx
@@ -1,6 +1,6 @@
 import { type FC } from 'react';
 import { X } from 'react-bootstrap-icons';
-import actionable from 'styles/actionable.module.css';
+import styles from './InlineCloseButton.module.scss';
 import clsx from 'clsx';
 
 type InlineCloseButtonProps = { onClose: () => void };
@@ -14,13 +14,13 @@ type InlineCloseButtonProps = { onClose: () => void };
  * @param props.onClose callback to call when button is pressed
  */
 const InlineCloseButton: FC<InlineCloseButtonProps> = ({ onClose }) => (
-    <div
+    <button
         onClick={() => onClose()}
-        className={clsx('d-inline-block', actionable['actionable'])}
-        role="button"
+        className={clsx('d-inline-block', styles['unstyledButton'])}
+        type="button"
     >
         <X />
-    </div>
+    </button>
 );
 
 export default InlineCloseButton;