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 ( <> @@ -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 /> { 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')); + }); });