CreateImageWizard: Make steps autofocus on first input upon render

The default behavior of Data Driven Forms when moving to the previous or
next step is to maintain focus on the previous or next button,
respectively.

This commit makes the UI more friendly to keyboard users by focusing
on the first input element of a given step when it is rendered.

Whenever possible, autofocus is achieved by passing components the
autoFocus prop. When this is not possible, then useRef and useEffect hooks
are used to set focus.

At the moment, it is not possible to autofocus the image output step's
release selector or the file system configuration step's toggle using the
above methods. This is because these PatternFly components do not
currently pass props to the appropriate child component and do not
support ref forwarding. The best option for autofocus in these cases is
currently being investigated.

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

@@ -1399,3 +1399,92 @@ describe('Click through all steps', () => {
         expect(store.getStore().getState().composes.allIds).toEqual(ids);
     });
 });
+
+describe('Keyboard accessibility', () => {
+    const setUp = async () => {
+        const view = renderWithReduxRouter(<CreateImageWizard />, {}, '/imagewizard');
+        history = view.history;
+    };
+
+    const clickNext = () => {
+        const next = screen.getByRole('button', { name: /Next/ });
+        next.click();
+    };
+
+    const selectAllEnvironments = () => {
+        const awsTile = screen.getByTestId('upload-aws');
+        awsTile.click();
+        const googleTile = screen.getByTestId('upload-google');
+        googleTile.click();
+        const azureTile = screen.getByTestId('upload-azure');
+        azureTile.click();
+        const virtualizationCheckbox = screen.getByRole('checkbox', {
+            name: /virtualization guest image checkbox/i
+        });
+        virtualizationCheckbox.click();
+    };
+
+    const fillAzureInputs = () => {
+        userEvent.type(screen.getByTestId('azure-tenant-id'), 'b8f86d22-4371-46ce-95e7-65c415f3b1e2');
+        userEvent.type(screen.getByTestId('azure-subscription-id'), '60631143-a7dc-4d15-988b-ba83f3c99711');
+        userEvent.type(screen.getByTestId('azure-resource-group'), 'testResourceGroup');
+    };
+
+    test('autofocus on each step first input element', async () => {
+        setUp();
+
+        // Details
+        const detailsInput = screen.getByRole('textbox', { name: /image name/i });
+        expect(detailsInput).toHaveFocus();
+        clickNext();
+
+        // Image output
+        selectAllEnvironments();
+        clickNext();
+
+        // Target environment aws
+        const awsInput = screen.getByRole('textbox', { name: /aws account id/i });
+        expect(awsInput).toHaveFocus();
+        userEvent.type(awsInput, '012345678901');
+        clickNext();
+
+        // Target environment google
+        const googleAccountRadio = screen.getByRole('radio', {  name: /google account/i });
+        expect(googleAccountRadio).toHaveFocus();
+        userEvent.type(screen.getByTestId('input-google-email'), 'test@test.com');
+        clickNext();
+
+        // Target environment azure
+        const tenantIDInput = screen.getByTestId('azure-tenant-id');
+        expect(tenantIDInput).toHaveFocus();
+        fillAzureInputs();
+        clickNext();
+
+        // Registration
+        const registerRadio = screen.getByRole('radio', {
+            name: /register and connect image instances with red hat/i
+        });
+        expect(registerRadio).toHaveFocus();
+        clickNext();
+
+        // File system configuration
+        clickNext();
+
+        // Packages
+        let availablePackagesInput;
+        // eslint-disable-next-line testing-library/no-unnecessary-act
+        await act(async() => {
+            const view = screen.getByTestId('search-available-pkgs-input');
+
+            availablePackagesInput = within(view).getByRole('textbox', {
+                name: /search input/i
+            });
+        });
+        expect(availablePackagesInput).toHaveFocus();
+        clickNext();
+
+        // Review
+        const targetEnvironmentTab = screen.getByTestId('tab-target');
+        expect(targetEnvironmentTab).toHaveFocus();
+    });
+});