CreateImageWizard: Override Data Driven Form Enter behavior

Resolves #466. The default behavior for the DDF Wizard is to either advance to
the next step or submit the form when the ENTER is pressed.

This is inappropriate for complex forms that contain many different
types of elements that are typically interacted with using ENTER. For
instance, the default behavior when a link is focused and ENTER is pressed
is not to open the link in a browser but to advance or submit the form.

This commit overrides the default behavior by passing an onKeyDown prop
to the wizard which calls a custom onKeyDown function. The new custom
function does not define any behavior for when ENTER is pressed,
but does recreate DDF's default ESCAPE behavior, which is to close the
modal.

src/Components/CreateImageWizard/CreateImageWizard.js

@@ -26,6 +26,12 @@ import {
     fileSystemConfigurationValidator,
 } from './validators';
 
+const handleKeyDown = (e, handleClose) => {
+    if (e.key === 'Escape') {
+        handleClose();
+    }
+};
+
 const onSave = (values) => {
     let customizations = {
         packages: values['selected-packages']?.map(p => p.name),
@@ -393,8 +399,10 @@ const CreateImageWizard = () => {
     const initialState = requestToState(composeRequest);
     const stepHistory = formStepHistory(composeRequest);
 
+    const handleClose = () => navigate('/');
+
     return <ImageCreator
-        onClose={ () => navigate('/') }
+        onClose={ handleClose }
         onSubmit={ ({ values, setIsSaving }) => {
             setIsSaving(() => true);
             const requests = onSave(values);
@@ -434,6 +442,7 @@ const CreateImageWizard = () => {
                     className: 'image_builder',
                     isDynamic: true,
                     inModal: true,
+                    onKeyDown: (e) => { handleKeyDown(e, handleClose); },
                     buttonLabels: {
                         submit: 'Create image',
                     },

src/test/Components/CreateImageWizard/CreateImageWizard.test.js

@@ -1487,4 +1487,16 @@ describe('Keyboard accessibility', () => {
         const targetEnvironmentTab = screen.getByTestId('tab-target');
         expect(targetEnvironmentTab).toHaveFocus();
     });
+
+    test('pressing Esc closes the wizard', async () => {
+        setUp();
+        userEvent.keyboard('{esc}');
+        expect(history.location.pathname).toBe('/');
+    });
+
+    test('pressing Enter does not advance the wizard', async () => {
+        setUp();
+        userEvent.keyboard('{enter}');
+        screen.getByText('Image name');
+    });
 });