From 7cd4f969676f4296a2ac2dcc6afb521955e46615 Mon Sep 17 00:00:00 2001
From: Jody LeCompte <jody.lecompte@vincit.fi>
Date: Sun, 2 Oct 2022 20:44:52 -0500
Subject: [PATCH 1/6] Render buttons as buttons for better a11y

---
 app/renderer/controls/Button.tsx     | 3 ++-
 app/renderer/modals/NewBookModal.tsx | 6 ++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/app/renderer/controls/Button.tsx b/app/renderer/controls/Button.tsx
index 2a4e41a..d7fedc6 100644
--- a/app/renderer/controls/Button.tsx
+++ b/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,6 +19,7 @@ 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;
diff --git a/app/renderer/modals/NewBookModal.tsx b/app/renderer/modals/NewBookModal.tsx
index 2a287e6..802ad67 100644
--- a/app/renderer/modals/NewBookModal.tsx
+++ b/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}>

From 4a421eaa4710f22471b3ba572bb0ac0adfb2c5dc Mon Sep 17 00:00:00 2001
From: Jody LeCompte <jody.lecompte@vincit.fi>
Date: Mon, 3 Oct 2022 11:32:35 -0500
Subject: [PATCH 2/6] Add focus-visible outline color for button

---
 app/renderer/controls/Button.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/app/renderer/controls/Button.tsx b/app/renderer/controls/Button.tsx
index d7fedc6..ec20d7a 100644
--- a/app/renderer/controls/Button.tsx
+++ b/app/renderer/controls/Button.tsx
@@ -26,6 +26,10 @@ const StyledButton = styled.button<StyledButtonProps>`
   text-overflow: ellipsis;
   font-size: 0.9em;
 
+  &:focus-visible {
+    outline: ${(p) =>
+      `4px solid ${Color(p.theme.buttonPrimaryBg).alpha(0.5).toString()};`}
+
   ${(p) =>
     !p.isLoading &&
     !p.isDisabled &&

From bfb1e7b1f47ec2f6ea4205ac5f89b8c14ac8c070 Mon Sep 17 00:00:00 2001
From: Jody LeCompte <jody.lecompte@vincit.fi>
Date: Mon, 3 Oct 2022 19:41:31 -0500
Subject: [PATCH 3/6] Cleanup + Remove click handler

---
 app/renderer/controls/Button.tsx          |  5 +++--
 app/renderer/modals/GenerateBookModal.tsx | 14 ++++----------
 2 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/app/renderer/controls/Button.tsx b/app/renderer/controls/Button.tsx
index ec20d7a..1b7e5ba 100644
--- a/app/renderer/controls/Button.tsx
+++ b/app/renderer/controls/Button.tsx
@@ -27,8 +27,9 @@ const StyledButton = styled.button<StyledButtonProps>`
   font-size: 0.9em;
 
   &:focus-visible {
-    outline: ${(p) =>
-      `4px solid ${Color(p.theme.buttonPrimaryBg).alpha(0.5).toString()};`}
+    outline: 4px solid
+      ${(p) => Color(p.theme.buttonPrimaryBg).alpha(0.5).toString()};
+  }
 
   ${(p) =>
     !p.isLoading &&
diff --git a/app/renderer/modals/GenerateBookModal.tsx b/app/renderer/modals/GenerateBookModal.tsx
index c5a261f..6af5504 100644
--- a/app/renderer/modals/GenerateBookModal.tsx
+++ b/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} disabled={!pdfPlatformToggleValue}>
             Generate
           </Button>
         </StyledButtonDiv>

From 213a6000ddb405bc7b4fd208c55dd9c957f2d994 Mon Sep 17 00:00:00 2001
From: Jody LeCompte <jody.lecompte@vincit.fi>
Date: Tue, 4 Oct 2022 19:38:40 -0500
Subject: [PATCH 4/6] Correct disabled state for button

---
 app/renderer/controls/Button.tsx     | 14 +++++++++-----
 app/renderer/modals/NewBookModal.tsx |  8 +-------
 2 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/app/renderer/controls/Button.tsx b/app/renderer/controls/Button.tsx
index 1b7e5ba..93c175a 100644
--- a/app/renderer/controls/Button.tsx
+++ b/app/renderer/controls/Button.tsx
@@ -26,6 +26,10 @@ const StyledButton = styled.button<StyledButtonProps>`
   text-overflow: ellipsis;
   font-size: 0.9em;
 
+  &:disabled {
+    cursor: unset;
+  }
+
   &:focus-visible {
     outline: 4px solid
       ${(p) => Color(p.theme.buttonPrimaryBg).alpha(0.5).toString()};
@@ -75,14 +79,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();
@@ -91,16 +95,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}
diff --git a/app/renderer/modals/NewBookModal.tsx b/app/renderer/modals/NewBookModal.tsx
index 802ad67..c46f5d0 100644
--- a/app/renderer/modals/NewBookModal.tsx
+++ b/app/renderer/modals/NewBookModal.tsx
@@ -57,13 +57,7 @@ const NewBookModal = (props: ModalProps) => {
             label="Series Name"
           />
           <div />
-          <Button
-            onClick={() => {
-              formRef.current?.requestSubmit();
-            }}
-          >
-            Create
-          </Button>
+          <Button>Create</Button>
         </StyledModalContent>
       </form>
     </Modal>

From 90ba6bd02440f1d08c80bc036e3a352446d2dcac Mon Sep 17 00:00:00 2001
From: Jody LeCompte <jody@jodylecompte.com>
Date: Thu, 6 Oct 2022 01:00:34 -0500
Subject: [PATCH 5/6] Continued adjustments around disabled state/styling

---
 app/renderer/controls/Button.tsx          | 6 +-----
 app/renderer/modals/GenerateBookModal.tsx | 2 +-
 app/renderer/modals/NewBookModal.tsx      | 2 +-
 3 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/app/renderer/controls/Button.tsx b/app/renderer/controls/Button.tsx
index 93c175a..f019fa2 100644
--- a/app/renderer/controls/Button.tsx
+++ b/app/renderer/controls/Button.tsx
@@ -26,10 +26,6 @@ const StyledButton = styled.button<StyledButtonProps>`
   text-overflow: ellipsis;
   font-size: 0.9em;
 
-  &:disabled {
-    cursor: unset;
-  }
-
   &:focus-visible {
     outline: 4px solid
       ${(p) => Color(p.theme.buttonPrimaryBg).alpha(0.5).toString()};
@@ -37,7 +33,7 @@ const StyledButton = styled.button<StyledButtonProps>`
 
   ${(p) =>
     !p.isLoading &&
-    !p.isDisabled &&
+    !p.disabled &&
     css`
       cursor: pointer;
       &:hover {
diff --git a/app/renderer/modals/GenerateBookModal.tsx b/app/renderer/modals/GenerateBookModal.tsx
index 6af5504..ffad4d8 100644
--- a/app/renderer/modals/GenerateBookModal.tsx
+++ b/app/renderer/modals/GenerateBookModal.tsx
@@ -73,7 +73,7 @@ const GenerateBookModal = (props: ModalProps) => {
           </CheckboxDiv>
         </StyledModalContent>
         <StyledButtonDiv>
-          <Button loading={isBuildingPdf} disabled={!pdfPlatformToggleValue}>
+          <Button loading={isBuildingPdf} isDisabled={!pdfPlatformToggleValue}>
             Generate
           </Button>
         </StyledButtonDiv>
diff --git a/app/renderer/modals/NewBookModal.tsx b/app/renderer/modals/NewBookModal.tsx
index c46f5d0..18a2fa1 100644
--- a/app/renderer/modals/NewBookModal.tsx
+++ b/app/renderer/modals/NewBookModal.tsx
@@ -57,7 +57,7 @@ const NewBookModal = (props: ModalProps) => {
             label="Series Name"
           />
           <div />
-          <Button>Create</Button>
+          <Button isDisabled>Create</Button>
         </StyledModalContent>
       </form>
     </Modal>

From 34deec81f9892d2ab293d2fe910cee1234e6ce60 Mon Sep 17 00:00:00 2001
From: Jody LeCompte <jody@jodylecompte.com>
Date: Thu, 6 Oct 2022 01:01:08 -0500
Subject: [PATCH 6/6] Remove orphaned test disabling

---
 app/renderer/modals/NewBookModal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/renderer/modals/NewBookModal.tsx b/app/renderer/modals/NewBookModal.tsx
index 18a2fa1..c46f5d0 100644
--- a/app/renderer/modals/NewBookModal.tsx
+++ b/app/renderer/modals/NewBookModal.tsx
@@ -57,7 +57,7 @@ const NewBookModal = (props: ModalProps) => {
             label="Series Name"
           />
           <div />
-          <Button isDisabled>Create</Button>
+          <Button>Create</Button>
         </StyledModalContent>
       </form>
     </Modal>