Fix review comments

Author: maximthomas

openam-ui/openam-ui-js-sdk/src/lib/Home.tsx

@@ -21,17 +21,17 @@ import type { UserService } from "./userService";
 export default function Home({userService}:{userService: UserService}) {
 
     const navigate = useNavigate();
-    const init = async () => {
+    useEffect(() => {
+        const init = async () => {
             const userData = await userService.getUserIdFromSession()
             if (!userData || !userData.id) {
                 navigate('/login')        
             } else {
                 navigate('/user')
             }
         }
-    useEffect(() => {
         init();
-    }, []);
+    }, [userService, navigate]);
 
     return <h2>Loading</h2>;
 }

openam-ui/openam-ui-js-sdk/src/lib/Login.tsx

@@ -89,7 +89,7 @@ const Login: React.FC<LoginProps> = ({ loginService }) => {
         }
         initAuth();
 
-    }, [])
+    }, [loginService, realm, service, navigate])
 
     const setCallbackValue = (i: number, val: string | number) => {
         if (!authData) {

openam-ui/openam-ui-js-sdk/src/lib/components/DefaultCallbackElement.tsx

@@ -18,7 +18,7 @@ import { useEffect } from "react";
 import type { Callback } from "../types";
 import type { CallbackElement } from "./types";
 
-const ScriptElement = (scriptText: string) => {
+const ScriptElement: React.FC<{ scriptText: string }> = ({ scriptText })  => {
     useEffect(() => {
         const script = document.createElement('script');
         script.innerHTML = scriptText;
@@ -28,7 +28,7 @@ const ScriptElement = (scriptText: string) => {
                 document.body.removeChild(script);
             }
         };
-    }, []);
+    }, [scriptText]);
 
     return null; // This component renders nothing in the DOM
 }
@@ -50,7 +50,7 @@ const DefaultCallbackElement: CallbackElement = ({ callback, setCallbackValue })
             case "2":
                 return <p>{message}</p>
             case "4":
-                return ScriptElement(message);
+                return <ScriptElement scriptText={message} />;
             default:
                 console.log(`unknown message type: ${messageType}`)
                 return <></>;

openam-ui/openam-ui-js-sdk/src/lib/components/DefaultUserForm.test.tsx

@@ -15,7 +15,7 @@
  */
 
 import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen, fireEvent, act } from '@testing-library/react';
 import DefaultUserForm from './DefaultUserForm';
 import { mockUserData } from '../__tests__/mocks';
 import type { UserData } from '../types';
@@ -149,6 +149,54 @@ describe('DefaultUserForm', () => {
          expect(defaultProps.savePasswordHandler).toHaveBeenCalledTimes(1);
     });
 
-
+    describe('Change Password button accessibility', () => {
+        it('has role="button" for assistive technology', () => {
+            render(<DefaultUserForm {...defaultProps} />);
+ 
+            const changePasswordButton = screen.getByRole('button', { name: 'Change Password' });
+            expect(changePasswordButton).toBeInTheDocument();
+        });
+ 
+        it('is focusable via keyboard (tabIndex=0)', () => {
+            render(<DefaultUserForm {...defaultProps} />);
+ 
+            const changePasswordButton = screen.getByRole('button', { name: 'Change Password' });
+            expect(changePasswordButton).toHaveAttribute('tabindex', '0');
+        });
+ 
+        it('opens password modal on Enter key press', () => {
+            render(<DefaultUserForm {...defaultProps} />);
+ 
+            act(() => {
+                fireEvent.keyDown(screen.getByRole('button', { name: 'Change Password' }), { key: 'Enter' });
+            });
+ 
+            expect(screen.getByLabelText('New:')).toBeInTheDocument();
+            expect(screen.getByLabelText('Confirm:')).toBeInTheDocument();
+            expect(screen.getByText('Update Password')).toBeInTheDocument();
+        });
+ 
+        it('opens password modal on Space key press', () => {
+            render(<DefaultUserForm {...defaultProps} />);
+ 
+            act(() => {
+                fireEvent.keyDown(screen.getByRole('button', { name: 'Change Password' }), { key: ' ' });
+            });
+ 
+            expect(screen.getByLabelText('New:')).toBeInTheDocument();
+            expect(screen.getByLabelText('Confirm:')).toBeInTheDocument();
+            expect(screen.getByText('Update Password')).toBeInTheDocument();
+        });
+ 
+        it('does not open password modal on other key presses', () => {
+            render(<DefaultUserForm {...defaultProps} />);
+ 
+            act(() => {
+                fireEvent.keyDown(screen.getByRole('button', { name: 'Change Password' }), { key: 'Tab' });
+            });
+ 
+            expect(screen.queryByLabelText('New:')).not.toBeInTheDocument();
+        });
+    });
 
 });

openam-ui/openam-ui-js-sdk/src/lib/components/DefaultUserForm.tsx

@@ -82,7 +82,10 @@ const DefaultUserForm: UserForm = ({ userData, setUserData, saveHandler, savePas
                 </div>
                 <div
                     className="change-password-link"
+                    role="button"
+                    tabIndex={0}
                     onClick={() => setIsPasswordModalOpen(true)}
+                    onKeyDown={(e) => (e.key === "Enter" || e.key === " ") && setIsPasswordModalOpen(true)}
                     style={{ marginBottom: "1.5rem" }} // Inline style to ensure spacing from button
                 >
                     Change Password

openam-ui/openam-ui-js-sdk/src/lib/loginService.ts

@@ -59,7 +59,7 @@ class LoginService {
     } catch (e) {
       if(import.meta.env.MODE === 'development') {
         console.log("fallback to test data", e)
-        return JSON.parse(authError) as AuthResponse;
+        return JSON.parse(authDataJSON) as AuthResponse;
       } else {
         throw e
       }
@@ -205,5 +205,81 @@ const successfulAuth = `{
 
 const authError = `{"code":401,"reason":"Unauthorized","message":"Authentication Failed"}`
 
+const authDataJSON = `{
+  "authId": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJvdGsiOiJsa21mODI5dHEzbmhraDNyNmVsbGZtYWpybCIsInJlYWxtIjoiZGM9b3BlbmFtLGRjPW9wZW5pZGVudGl0eXBsYXRmb3JtLGRjPW9yZyIsInNlc3Npb25JZCI6IkFRSUM1d00yTFk0U2ZjekloNTRQLTZ1czRod0tSa09ibWFKa251U0p3SUxNYi1VLipBQUpUU1FBQ01ERUFBbE5MQUJNMk56VTVOVEF5T1RrNU5UUXpOemM0T1RZNEFBSlRNUUFBKiJ9.0lYgF063co7bcg_-xbabvrZponm7NMq3s-IeYPaf9Js",
+  "template": "",
+  "stage": "DataStore1",
+  "header": "Sign in to OpenAM",
+  "infoText": [
+    "",
+    ""
+  ],
+  "callbacks": [
+    {
+      "type": "NameCallback",
+      "output": [
+        {
+          "name": "prompt",
+          "value": "User Name:"
+        }
+      ],
+      "input": [
+        {
+          "name": "IDToken1",
+          "value": "demo"
+        }
+      ]
+    },
+    {
+      "type": "PasswordCallback",
+      "output": [
+        {
+          "name": "prompt",
+          "value": "Password:"
+        }
+      ],
+      "input": [
+        {
+          "name": "IDToken2",
+          "value": "changeit"
+        }
+      ]
+    },
+    {
+      "type": "ConfirmationCallback",
+      "output": [
+        {
+          "name": "prompt",
+          "value": ""
+        },
+        {
+          "name": "messageType",
+          "value": 0
+        },
+        {
+          "name": "options",
+          "value": [
+            "Register device",
+            "Skip this step"
+          ]
+        },
+        {
+          "name": "optionType",
+          "value": -1
+        },
+        {
+          "name": "defaultOption",
+          "value": 0
+        }
+      ],
+      "input": [
+        {
+          "name": "IDToken3",
+          "value": "1"
+        }
+      ]
+    }
+  ]
+}`
 
 export { LoginService }

openam-ui/openam-ui-js-sdk/src/lib/userService.ts

@@ -50,7 +50,7 @@ class UserService {
       if (import.meta.env.MODE === 'development') {
         console.log("error getting user id from session", e)
         console.log("fallback to demo user")
-        return JSON.parse(usersSuccessfulResponse)
+        return JSON.parse(userUnauthorizedResponse)
       } else {
         console.log("request error occurred:", e)
       }
@@ -178,7 +178,7 @@ const usersSuccessfulResponse = `{
     "fullLoginURL": "/openam/UI/Login?realm=%2F"
 }`
 
-// const userUnauthorizedResponse = `{"code":401,"reason":"Unauthorized","message":"Access Denied"}`
+const userUnauthorizedResponse = `{"code":401,"reason":"Unauthorized","message":"Access Denied"}`
 
 const testUserData = `{
     "username": "demo",