A11Y Improvements -- Render buttons as buttons

app/renderer/controls/Button.tsx

@@ -9,7 +9,7 @@ type StyledButtonProps = {
   isDisabled?: boolean;
 };
 
-const StyledButton = styled.span<StyledButtonProps>`
+const StyledButton = styled.button<StyledButtonProps>`
   height: 30px;
   position: relative;
   line-height: 30px;
@@ -19,15 +19,21 @@ const StyledButton = styled.span<StyledButtonProps>`
   background-color: ${(p) => p.theme.buttonPrimaryBg};
   color: ${(p) => p.theme.buttonPrimaryText};
   border-radius: 10px;
+  border: none;
   text-align: center;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   font-size: 0.9em;
 
+  &:focus-visible {
+    outline: 4px solid
+      ${(p) => Color(p.theme.buttonPrimaryBg).alpha(0.5).toString()};
+  }
+
   ${(p) =>
     !p.isLoading &&
-    !p.isDisabled &&
+    !p.disabled &&
     css`
       cursor: pointer;
       &:hover {
@@ -69,14 +75,14 @@ type ButtonProps = {
   children?: React.ReactNode;
   onClick?: () => void;
   loading?: boolean;
-  disabled?: boolean;
+  isDisabled?: boolean;
 };
 
 const Button = ({
   children,
   onClick,
   loading = false,
-  disabled = false,
+  isDisabled = false,
 }: ButtonProps) => {
   const theme = useTheme();
   const hoverColor = Color(theme.buttonPrimaryBg).lighten(0.05).hsl().string();
@@ -85,16 +91,16 @@ const Button = ({
     <StyledButton
       hoverBackgroundcolor={hoverColor}
       activeBackgroundColor={activeColor}
+      disabled={isDisabled}
       onClick={() => {
-        if (!loading && !disabled && onClick) {
+        if (!loading && !isDisabled && onClick) {
           onClick();
         }
       }}
       isLoading={loading}
-      isDisabled={disabled}
     >
       {children}
-      <StyledLoader isLoading={loading} isDisabled={disabled}>
+      <StyledLoader isLoading={loading} isDisabled={isDisabled}>
         <BounceLoader
           loading={loading}
           size={20}

app/renderer/modals/GenerateBookModal.tsx

@@ -1,10 +1,10 @@
 import { useRef, useState } from 'react';
 import styled from 'styled-components';
+import { buildBookPdf } from 'renderer/utils/buildPdf';
+import { useOnBookPdfGenerated, useToggle } from 'renderer/hooks';
 import Modal from './Modal';
 import type { ModalProps } from './Modal';
 import { Button, Checkbox } from '../controls';
-import { buildBookPdf } from 'renderer/utils/buildPdf';
-import { useOnBookPdfGenerated, useToggle } from 'renderer/hooks';
 
 const StyledModalContent = styled.div`
   display: flex;
@@ -66,20 +66,14 @@ const GenerateBookModal = (props: ModalProps) => {
           <ModalTitle>Output Platforms</ModalTitle>
           <CheckboxDiv>
             <Checkbox
-              label={'PDF'}
+              label="PDF"
               checked={pdfPlatformToggleValue}
               onChange={togglePdfPlatformToggleValue}
             />
           </CheckboxDiv>
         </StyledModalContent>
         <StyledButtonDiv>
-          <Button
-            loading={isBuildingPdf}
-            onClick={() => {
-              formRef.current?.requestSubmit();
-            }}
-            disabled={!pdfPlatformToggleValue}
-          >
+          <Button loading={isBuildingPdf} isDisabled={!pdfPlatformToggleValue}>
             Generate
           </Button>
         </StyledButtonDiv>

app/renderer/modals/NewBookModal.tsx

@@ -1,4 +1,4 @@
-import { useRef } from 'react';
+import React, { useRef } from 'react';
 import styled from 'styled-components';
 import Modal from './Modal';
 import type { ModalProps } from './Modal';
@@ -20,6 +20,7 @@ const NewBookModal = (props: ModalProps) => {
   const formRef = useRef<HTMLFormElement>(null);
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
+
     const target = e.target as typeof e.target & {
       book: { value: string };
       author: { value: string };
@@ -30,7 +31,8 @@ const NewBookModal = (props: ModalProps) => {
       authorName: target.author.value,
       seriesName: target.series.value,
     });
-    onRequestClose();
+
+    return onRequestClose();
   };
   return (
     <Modal {...props}>
@@ -55,13 +57,7 @@ const NewBookModal = (props: ModalProps) => {
             label="Series Name"
           />
           <div />
-          <Button
-            onClick={() => {
-              formRef.current?.requestSubmit();
-            }}
-          >
-            Create
-          </Button>
+          <Button>Create</Button>
         </StyledModalContent>
       </form>
     </Modal>