From e99b7b7d0bfcec25fd4e0e2758dba409c52701c2 Mon Sep 17 00:00:00 2001
From: lucasgarfield <lucas@redhat.com>
Date: Thu, 10 Mar 2022 18:12:27 +0100
Subject: [PATCH] CreateImageWizard: Make target environments keyboard
 selectable

The AWS, Google, and Azure tiles on the image output step can now be
selected/deselected using SPACE and/or ENTER.
---
 .../formComponents/TargetEnvironment.js         |  9 +++++++++
 .../CreateImageWizard/CreateImageWizard.test.js | 17 +++++++++++++++++
 2 files changed, 26 insertions(+)

diff --git a/src/Components/CreateImageWizard/formComponents/TargetEnvironment.js b/src/Components/CreateImageWizard/formComponents/TargetEnvironment.js
index 29a40191..c4272f74 100644
--- a/src/Components/CreateImageWizard/formComponents/TargetEnvironment.js
+++ b/src/Components/CreateImageWizard/formComponents/TargetEnvironment.js
@@ -32,6 +32,12 @@ const TargetEnvironment = ({ label, isRequired, ...props }) => {
         return newEnv;
     });
 
+    const handleKeyDown = (e, env) => {
+        if (e.key === ' ') {
+            handleSetEnvironment(env);
+        }
+    };
+
     return (
         <>
             <FormGroup isRequired={ isRequired } label={ label } data-testid="target-select">
@@ -45,6 +51,7 @@ const TargetEnvironment = ({ label, isRequired, ...props }) => {
                                 className='provider-icon'
                                 src={ '/apps/frontend-assets/partners-icons/aws.svg' } /> }
                             onClick={ () => handleSetEnvironment('aws') }
+                            onKeyDown = { (e) => handleKeyDown(e, 'aws') }
                             isSelected={ environment.aws }
                             isStacked
                             isDisplayLarge />
@@ -57,6 +64,7 @@ const TargetEnvironment = ({ label, isRequired, ...props }) => {
                                 src={ '/apps/frontend-assets/partners-icons/google-cloud-short.svg' } /> }
                             onClick={ () => handleSetEnvironment('gcp') }
                             isSelected={ environment.gcp }
+                            onKeyDown = { (e) => handleKeyDown(e, 'gcp') }
                             isStacked
                             isDisplayLarge />
                         <Tile
@@ -67,6 +75,7 @@ const TargetEnvironment = ({ label, isRequired, ...props }) => {
                                 className='provider-icon'
                                 src={ '/apps/frontend-assets/partners-icons/microsoft-azure-short.svg' } /> }
                             onClick={ () => handleSetEnvironment('azure') }
+                            onKeyDown = { (e) => handleKeyDown(e, 'azure') }
                             isSelected={ environment.azure }
                             isStacked
                             isDisplayLarge />
diff --git a/src/test/Components/CreateImageWizard/CreateImageWizard.test.js b/src/test/Components/CreateImageWizard/CreateImageWizard.test.js
index 8b0abe47..57db385b 100644
--- a/src/test/Components/CreateImageWizard/CreateImageWizard.test.js
+++ b/src/test/Components/CreateImageWizard/CreateImageWizard.test.js
@@ -1499,4 +1499,21 @@ describe('Keyboard accessibility', () => {
         userEvent.keyboard('{enter}');
         screen.getByText('Image name');
     });
+
+    test('target environment tiles are keyboard selectable', async () => {
+        const testTile = (tile) => {
+            tile.focus();
+            userEvent.keyboard('{space}');
+            expect(tile).toHaveClass('pf-m-selected');
+            userEvent.keyboard('{space}');
+            expect(tile).not.toHaveClass('pf-m-selected');
+        };
+
+        setUp();
+        clickNext();
+
+        testTile(screen.getByTestId('upload-aws'));
+        testTile(screen.getByTestId('upload-google'));
+        testTile(screen.getByTestId('upload-azure'));
+    });
 });