From 1961371aa6539a767232acf1f21a359b8bed00f6 Mon Sep 17 00:00:00 2001
From: Andrew Nelson <andy@andyhub.com>
Date: Mon, 24 Jul 2023 18:28:20 -0700
Subject: [PATCH 1/3] changed template links to buttons

---
 src/components/forms/Form/Form.stories.tsx    | 44 +++++++++----------
 .../templates/createaccount.stories.tsx       | 23 +++++-----
 src/stories/templates/signin.stories.tsx      | 23 +++++-----
 3 files changed, 43 insertions(+), 47 deletions(-)

diff --git a/src/components/forms/Form/Form.stories.tsx b/src/components/forms/Form/Form.stories.tsx
index 0876337460..49a597382c 100644
--- a/src/components/forms/Form/Form.stories.tsx
+++ b/src/components/forms/Form/Form.stories.tsx
@@ -211,18 +211,17 @@ export const signInForm = (): React.ReactElement => {
           name="password-sign-in"
           type={showPassword ? 'text' : 'password'}
         />
-        <p className="usa-form__note">
-          <a
-            title="Show password"
-            href="javascript:void(0);"
-            className="usa-show-password"
-            aria-controls="password-sign-in"
-            onClick={(): void =>
-              setShowPassword((showPassword) => !showPassword)
-            }>
-            {showPassword ? 'Hide password' : 'Show password'}
-          </a>
-        </p>
+        <Button
+          title="Show password"
+          type="button"
+          unstyled
+          className="usa-show-password"
+          aria-controls="password-sign-in"
+          onClick={(): void =>
+            setShowPassword((showPassword) => !showPassword)
+          }>
+          {showPassword ? 'Hide password' : 'Show password'}
+        </Button>
 
         <Button type="submit">Sign in</Button>
         <p>
@@ -265,17 +264,16 @@ export const passwordResetForm = (): React.ReactElement => {
           name="confirmPassword"
           type={showPassword ? 'text' : 'password'}
         />
-        <p className="usa-form__note">
-          <a
-            href="javascript:void(0);"
-            className="usa-show-multipassword"
-            aria-controls="newPassword confirmPassword"
-            onClick={(): void =>
-              setShowPassword((showPassword) => !showPassword)
-            }>
-            {showPassword ? 'Hide my typing' : 'Show my typing'}
-          </a>
-        </p>
+        <Button
+          type="button"
+          unstyled
+          className="usa-show-password"
+          aria-controls="newPassword confirmPassword"
+          onClick={(): void =>
+            setShowPassword((showPassword) => !showPassword)
+          }>
+          {showPassword ? 'Hide my typing' : 'Show my typing'}
+        </Button>
 
         <Button type="submit">Reset password</Button>
       </Fieldset>
diff --git a/src/stories/templates/createaccount.stories.tsx b/src/stories/templates/createaccount.stories.tsx
index d0f0d0ba2d..560028464a 100644
--- a/src/stories/templates/createaccount.stories.tsx
+++ b/src/stories/templates/createaccount.stories.tsx
@@ -204,18 +204,17 @@ export const CreateAccount = (): React.ReactElement => {
                         required={true}
                       />
 
-                      <p className="usa-form__note">
-                        <a
-                          title="Show password"
-                          href="javascript:void(0);"
-                          className="usa-show-password"
-                          aria-controls="password-create-account password-create-account-confirm"
-                          onClick={(): void =>
-                            setShowPassword((showPassword) => !showPassword)
-                          }>
-                          {showPassword ? 'Hide password' : 'Show password'}
-                        </a>
-                      </p>
+                      <Button
+                        title="Show password"
+                        type="button"
+                        unstyled
+                        className="usa-show-password"
+                        aria-controls="password-create-account password-create-account-confirm"
+                        onClick={(): void =>
+                          setShowPassword((showPassword) => !showPassword)
+                        }>
+                        {showPassword ? 'Hide password' : 'Show password'}
+                      </Button>
 
                       <Label htmlFor="password-create-account-confirm">
                         Re-type password{' '}
diff --git a/src/stories/templates/signin.stories.tsx b/src/stories/templates/signin.stories.tsx
index 69c4cbdd51..4dd91846c1 100644
--- a/src/stories/templates/signin.stories.tsx
+++ b/src/stories/templates/signin.stories.tsx
@@ -165,18 +165,17 @@ export const SignIn = (): React.ReactElement => {
                         required={true}
                       />
 
-                      <p className="usa-form__note">
-                        <a
-                          title="Show password"
-                          href="javascript:void(0);"
-                          className="usa-show-password"
-                          aria-controls="password-create-account password-create-account-confirm"
-                          onClick={(): void =>
-                            setShowPassword((showPassword) => !showPassword)
-                          }>
-                          {showPassword ? 'Hide password' : 'Show password'}
-                        </a>
-                      </p>
+                      <Button
+                        title="Show password"
+                        type="button"
+                        unstyled
+                        className="usa-show-password"
+                        aria-controls="password-create-account password-create-account-confirm"
+                        onClick={(): void =>
+                          setShowPassword((showPassword) => !showPassword)
+                        }>
+                        {showPassword ? 'Hide password' : 'Show password'}
+                      </Button>
 
                       <Button type="submit">Sign in</Button>
 

From d9d21af441a1a3d8410528f15400a535d68b920b Mon Sep 17 00:00:00 2001
From: Andrew Nelson <andy@andyhub.com>
Date: Thu, 5 Oct 2023 08:51:47 -0700
Subject: [PATCH 2/3] replaced Button component with simple button

---
 src/components/forms/Form/Form.stories.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/forms/Form/Form.stories.tsx b/src/components/forms/Form/Form.stories.tsx
index 3378b23e69..874ad47304 100644
--- a/src/components/forms/Form/Form.stories.tsx
+++ b/src/components/forms/Form/Form.stories.tsx
@@ -289,16 +289,15 @@ export const passwordResetForm = (): React.ReactElement => {
           name="confirmPassword"
           type={showPassword ? 'text' : 'password'}
         />
-        <Button
+        <button
           type="button"
-          unstyled
           className="usa-show-password"
           aria-controls="newPassword confirmPassword"
           onClick={(): void =>
             setShowPassword((showPassword) => !showPassword)
           }>
           {showPassword ? 'Hide my typing' : 'Show my typing'}
-        </Button>
+        </button>
 
         <Button type="submit">Reset password</Button>
       </Fieldset>

From 9f9d03b23d7893286bda92454f5f2cb8068302b8 Mon Sep 17 00:00:00 2001
From: Andrew Nelson <andy@andyhub.com>
Date: Thu, 5 Oct 2023 08:55:56 -0700
Subject: [PATCH 3/3] replaced Button component with simple button

---
 src/components/forms/Form/Form.stories.tsx      | 5 ++---
 src/stories/templates/createaccount.stories.tsx | 5 ++---
 src/stories/templates/signin.stories.tsx        | 5 ++---
 3 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/src/components/forms/Form/Form.stories.tsx b/src/components/forms/Form/Form.stories.tsx
index 874ad47304..74d31337f9 100644
--- a/src/components/forms/Form/Form.stories.tsx
+++ b/src/components/forms/Form/Form.stories.tsx
@@ -236,17 +236,16 @@ export const signInForm = (): React.ReactElement => {
           name="password-sign-in"
           type={showPassword ? 'text' : 'password'}
         />
-        <Button
+        <button
           title="Show password"
           type="button"
-          unstyled
           className="usa-show-password"
           aria-controls="password-sign-in"
           onClick={(): void =>
             setShowPassword((showPassword) => !showPassword)
           }>
           {showPassword ? 'Hide password' : 'Show password'}
-        </Button>
+        </button>
 
         <Button type="submit">Sign in</Button>
         <p>
diff --git a/src/stories/templates/createaccount.stories.tsx b/src/stories/templates/createaccount.stories.tsx
index 560028464a..7f2b810185 100644
--- a/src/stories/templates/createaccount.stories.tsx
+++ b/src/stories/templates/createaccount.stories.tsx
@@ -204,17 +204,16 @@ export const CreateAccount = (): React.ReactElement => {
                         required={true}
                       />
 
-                      <Button
+                      <button
                         title="Show password"
                         type="button"
-                        unstyled
                         className="usa-show-password"
                         aria-controls="password-create-account password-create-account-confirm"
                         onClick={(): void =>
                           setShowPassword((showPassword) => !showPassword)
                         }>
                         {showPassword ? 'Hide password' : 'Show password'}
-                      </Button>
+                      </button>
 
                       <Label htmlFor="password-create-account-confirm">
                         Re-type password{' '}
diff --git a/src/stories/templates/signin.stories.tsx b/src/stories/templates/signin.stories.tsx
index 4dd91846c1..1316c15cbd 100644
--- a/src/stories/templates/signin.stories.tsx
+++ b/src/stories/templates/signin.stories.tsx
@@ -165,17 +165,16 @@ export const SignIn = (): React.ReactElement => {
                         required={true}
                       />
 
-                      <Button
+                      <button
                         title="Show password"
                         type="button"
-                        unstyled
                         className="usa-show-password"
                         aria-controls="password-create-account password-create-account-confirm"
                         onClick={(): void =>
                           setShowPassword((showPassword) => !showPassword)
                         }>
                         {showPassword ? 'Hide password' : 'Show password'}
-                      </Button>
+                      </button>
 
                       <Button type="submit">Sign in</Button>