fix(home): focus outlines and decorations

src/App.scss

@@ -56,7 +56,9 @@ a {
   text-decoration: none;
   text-decoration-color: inherit;
   transition: ease 0.4s;
+  outline: none;
 
+  &:focus,
   &:hover {
     color: $primary-light;
     text-decoration: underline;

src/pages/home/index.tsx

@@ -136,7 +136,7 @@ export const HomePage = () => {
   const [sort, setSort] = useState<Sort>('desc')
 
   return (
-    <div {...getRootProps()}>
+    <div {...getRootProps()} tabIndex={-1}>
       <Container className={styles.container}>
         <div className={styles.header}>
           <div className={styles.filters}>
@@ -212,26 +212,27 @@ export const HomePage = () => {
                   borderBottomLeftRadius: 0
                 }}
                 variant={'contained'}
-                aria-label="Submit Search"
+                aria-label="submit search"
               >
                 <FontAwesomeIcon icon={faSearch} />
               </Button>
             </form>
           </div>
         </div>
-        <div
+        <button
           className={`${styles.dropzone} ${isDragActive ? styles.isDragActive : ''}`}
+          tabIndex={0}
           onClick={open}
+          type="button"
+          aria-label="upload files"
         >
-          <div>
+          <input {...getInputProps()} />
-            <input {...getInputProps()} />
+          {isDragActive ? (
-            {isDragActive ? (
+            <p>Drop the files here ...</p>
-              <p>Drop the files here ...</p>
+          ) : (
-            ) : (
+            <p>Click or drag files to upload!</p>
-              <p>Click or drag files to upload!</p>
+          )}
-            )}
+        </button>
-          </div>
-        </div>
         <div className={styles.submissions}>
           {Object.keys(parsedSigits)
             .filter((s) => {

src/pages/home/style.module.scss

@@ -76,6 +76,7 @@
     inset: 15px;
   }
 
+  &:focus,
   &.isDragActive,
   &:hover {
     &::before {
@@ -83,6 +84,14 @@
       background: rgba(0, 0, 0, 0.15);
     }
   }
+
+  // Override button styles
+  padding: 0;
+  border: none;
+  outline: none;
+  letter-spacing: 1px;
+  font-weight: 500;
+  font-family: inherit;
 }
 
 .submissions {

src/theme/index.ts

@@ -33,6 +33,9 @@ export const theme = extendTheme({
           boxShadow: 'unset',
           lineHeight: 'inherit',
           borderRadius: '4px',
+          ':focus': {
+            textDecoration: 'none'
+          },
           ':hover': {
             background: 'var(--primary-light)',
             boxShadow: 'unset'