Accessibility improvement in Choose New Password page

CHANGELOG.md

@@ -28,6 +28,7 @@
 ## Bug fixes
 
 - Fix health facilities missing from dropdown after correcting a record address [#7528](https://github.com/opencrvs/opencrvs-core/issues/7528)
+- "Choose a new password" form now allows the user to submit the form using the "Enter/Return" key [#5502](https://github.com/opencrvs/opencrvs-core/issues/5502)
 
 ## 1.6.0 Release candidate
 

packages/client/src/views/UserSetup/CreatePassword.test.tsx

@@ -28,7 +28,7 @@ describe('CreatePassword page tests', () => {
     component = testComponent
   })
 
-  it('it shows passwords missmatch error when Continue button is pressed', async () => {
+  it('it shows passwords missmatch error when Continue button is clicked', async () => {
     component.find('input#NewPassword').simulate('change', {
       target: { id: 'NewPassword', value: '0crvsPassword' }
     })
@@ -40,14 +40,72 @@ describe('CreatePassword page tests', () => {
       'Passwords do not match'
     )
   })
-  it('it passes validations', () => {
+  it('it shows passwords mismatch error when Enter/Return key is pressed on ConfirmPassword field', async () => {
+    component.find('input#NewPassword').simulate('change', {
+      target: { id: 'NewPassword', value: '0crvsPassword' }
+    })
+    component.find('input#ConfirmPassword').simulate('change', {
+      target: { id: 'ConfirmPassword', value: 'missmatch' }
+    })
+    component.find('input#ConfirmPassword').simulate('keyDown', {
+      key: 'Enter',
+      keyCode: 13,
+      which: 13
+    })
+    expect(component.find('#GlobalError').hostNodes().text()).toEqual(
+      'Passwords do not match'
+    )
+  })
+  it('it shows passwords mismatch error when Enter/Return key is pressed on NewPassword field', async () => {
+    component.find('input#NewPassword').simulate('change', {
+      target: { id: 'NewPassword', value: '0crvsPassword' }
+    })
+    component.find('input#NewPassword').simulate('keyDown', {
+      key: 'Enter',
+      keyCode: 13,
+      which: 13
+    })
+    expect(component.find('#GlobalError').hostNodes().text()).toEqual(
+      'Passwords do not match'
+    )
+  })
+  it('it passes validations when Continue button is clicked', () => {
     component.find('input#NewPassword').simulate('change', {
       target: { id: 'NewPassword', value: '0crvsPassword' }
     })
     component.find('input#ConfirmPassword').simulate('change', {
       target: { id: 'ConfirmPassword', value: '0crvsPassword' }
     })
     component.find('button#Continue').simulate('click')
+    expect(component.find('#GlobalError').hostNodes().text().length).toBe(0)
+  })
+  it('it passes validations when Enter/Return key is pressed on ConfirmPassword field', () => {
+    component.find('input#NewPassword').simulate('change', {
+      target: { id: 'NewPassword', value: '0crvsPassword' }
+    })
+    component.find('input#ConfirmPassword').simulate('change', {
+      target: { id: 'ConfirmPassword', value: '0crvsPassword' }
+    })
+    component.find('input#ConfirmPassword').simulate('keyDown', {
+      key: 'Enter',
+      keyCode: 13,
+      which: 13
+    })
+    expect(component.find('#GlobalError').hostNodes().text().length).toBe(0)
+  })
+  it('it passes validations when Enter/Return key is pressed on NewPassword field', () => {
+    component.find('input#NewPassword').simulate('change', {
+      target: { id: 'NewPassword', value: '0crvsPassword' }
+    })
+    component.find('input#ConfirmPassword').simulate('change', {
+      target: { id: 'ConfirmPassword', value: '0crvsPassword' }
+    })
+    component.find('input#NewPassword').simulate('keyDown', {
+      key: 'Enter',
+      keyCode: 13,
+      which: 13
+    })
+    expect(component.find('#GlobalError').hostNodes().text().length).toBe(0)
   })
   it('it shows disabled continue button when no password is given', () => {
     expect(

packages/client/src/views/UserSetup/CreatePassword.tsx

@@ -116,6 +116,12 @@ export function CreatePassword({ setupData, goToStep }: IProps) {
       })
     }
   }
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === 'Enter') {
+      event.preventDefault()
+      whatNext()
+    }
+  }
 
   const continueActionButton = (
     <PrimaryButton
@@ -169,6 +175,7 @@ export function CreatePassword({ setupData, goToStep }: IProps) {
                 touched={true}
                 value={newPassword}
                 onChange={checkPasswordStrength}
+                onKeyDown={handleKeyDown}
                 error={continuePressed && newPassword.length === 0}
               />
             </InputField>
@@ -207,6 +214,7 @@ export function CreatePassword({ setupData, goToStep }: IProps) {
                 error={continuePressed && passwordMismatched}
                 value={confirmPassword}
                 onChange={matchPassword}
+                onKeyDown={handleKeyDown}
               />
             </InputField>
             {passwordMismatched && (