Give visual focus state to close button

components/common/DialogHeader/index.module.scss

@@ -62,7 +62,7 @@
 
   .close {
     background: transparent;
-    border: none;
+    border: 2px solid transparent;
 
     &:hover {
       cursor: pointer;
@@ -72,6 +72,11 @@
       }
     }
 
+    &:focus {
+      border-radius: $input-corner;
+      border: 2px solid $blue;
+    }
+
     svg {
       fill: $grey-50;
       float: right;

components/common/DialogHeader/index.tsx

@@ -1,6 +1,8 @@
 import React, { PropsWithChildren } from 'react'
 import classNames from 'classnames'
+
 import * as DialogPrimitive from '@radix-ui/react-dialog'
+
 import CrossIcon from '~public/icons/Cross.svg'
 import styles from './index.module.scss'
 
@@ -31,7 +33,7 @@ export const DialogHeader = React.forwardRef<HTMLDivElement, Props>(
           {subtitle && <div className={styles.subtitle}>{subtitle}</div>}
           <div className={styles.title}>{title}</div>
         </div>
-        <DialogPrimitive.Close className={styles.close}>
+        <DialogPrimitive.Close className={styles.close} tabIndex={0}>
           <CrossIcon />
         </DialogPrimitive.Close>
       </header>