feat: changed template links to buttons (#2526)

Co-authored-by: Brandon Lenz <[email protected]> Co-authored-by: Shauna Keating <[email protected]>
trussworks · Oct 5, 2023 · a4b8423 · a4b8423
1 parent 2892424
commit a4b8423
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 47 deletions.
diff --git 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
@@ -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
@@ -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>