From a4b8423f4d3a4b8dcb89b8dab8dea4363c6b567a Mon Sep 17 00:00:00 2001
From: Andrew Nelson <andy@andyhub.com>
Date: Thu, 5 Oct 2023 14:42:25 -0700
Subject: [PATCH] feat: changed template links to buttons (#2526)

Co-authored-by: Brandon Lenz <15805554+brandonlenz@users.noreply.github.com>
Co-authored-by: Shauna Keating <59394696+shkeating@users.noreply.github.com>
---
 src/components/forms/Form/Form.stories.tsx    | 42 +++++++++----------
 .../templates/createaccount.stories.tsx       | 22 +++++-----
 src/stories/templates/signin.stories.tsx      | 22 +++++-----
 3 files changed, 39 insertions(+), 47 deletions(-)

diff --git a/src/components/forms/Form/Form.stories.tsx b/src/components/forms/Form/Form.stories.tsx
index c2d1458fe7..74d31337f9 100644
--- a/src/components/forms/Form/Form.stories.tsx
+++ b/src/components/forms/Form/Form.stories.tsx
@@ -236,18 +236,16 @@ 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"
+          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>
@@ -290,17 +288,15 @@ 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"
+          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..7f2b810185 100644
--- a/src/stories/templates/createaccount.stories.tsx
+++ b/src/stories/templates/createaccount.stories.tsx
@@ -204,18 +204,16 @@ 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"
+                        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..1316c15cbd 100644
--- a/src/stories/templates/signin.stories.tsx
+++ b/src/stories/templates/signin.stories.tsx
@@ -165,18 +165,16 @@ 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"
+                        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>