diff --git a/src/Components/CreateImageWizard/steps/ImageOutput/TargetEnvironment.tsx b/src/Components/CreateImageWizard/steps/ImageOutput/TargetEnvironment.tsx index 4c72be67..5cb66d76 100644 --- a/src/Components/CreateImageWizard/steps/ImageOutput/TargetEnvironment.tsx +++ b/src/Components/CreateImageWizard/steps/ImageOutput/TargetEnvironment.tsx @@ -71,6 +71,13 @@ const TargetEnvironment = () => { } }; + const handleKeyDown = (e: React.KeyboardEvent, env: ImageTypes) => { + if (e.key === ' ') { + e.preventDefault(); + handleToggleEnvironment(env); + } + }; + return ( { onClick={() => { handleToggleEnvironment('aws'); }} + onKeyDown={(e) => handleKeyDown(e, 'aws')} onMouseEnter={() => prefetchSources({ provider: 'aws' })} isSelected={environments.includes('aws')} isStacked @@ -120,6 +128,7 @@ const TargetEnvironment = () => { onClick={() => { handleToggleEnvironment('gcp'); }} + onKeyDown={(e) => handleKeyDown(e, 'gcp')} isSelected={environments.includes('gcp')} onMouseEnter={() => prefetchSources({ provider: 'gcp' })} isStacked @@ -143,6 +152,7 @@ const TargetEnvironment = () => { onClick={() => { handleToggleEnvironment('azure'); }} + onKeyDown={(e) => handleKeyDown(e, 'azure')} onMouseEnter={() => prefetchSources({ provider: 'azure' })} isSelected={environments.includes('azure')} isStacked @@ -164,6 +174,7 @@ const TargetEnvironment = () => { onClick={() => { handleToggleEnvironment('oci'); }} + onKeyDown={(e) => handleKeyDown(e, 'oci')} isSelected={environments.includes('oci')} isStacked isDisplayLarge diff --git a/src/test/Components/CreateImageWizard/CreateImageWizard.test.tsx b/src/test/Components/CreateImageWizard/CreateImageWizard.test.tsx index de90a6a9..94174459 100644 --- a/src/test/Components/CreateImageWizard/CreateImageWizard.test.tsx +++ b/src/test/Components/CreateImageWizard/CreateImageWizard.test.tsx @@ -270,21 +270,19 @@ describe('Keyboard accessibility', () => { }); }); - // test('target environment tiles are keyboard selectable', async () => { - // const testTile = async (tile: HTMLElement) => { - // tile.focus(); - // await user.keyboard('{space}'); - // expect(tile).toHaveClass('pf-m-selected'); - // await user.keyboard('{space}'); - // expect(tile).not.toHaveClass('pf-m-selected'); - // }; - // - // await setUp(); - // await clickNext(); - // - // await waitFor(() => screen.findByTestId('upload-aws')); - // testTile(await screen.findByTestId('upload-aws')); - // testTile(await screen.findByTestId('upload-google')); - // testTile(await screen.findByTestId('upload-azure')); - // }); + test('target environment tiles are keyboard selectable', async () => { + const testTile = async (tile: HTMLElement) => { + tile.focus(); + await waitFor(() => user.keyboard(' ')); + expect(tile).toHaveClass('pf-m-selected'); + await waitFor(() => user.keyboard(' ')); + expect(tile).not.toHaveClass('pf-m-selected'); + }; + + await setUp(); + + await testTile(await screen.findByTestId('upload-aws')); + await testTile(await screen.findByTestId('upload-google')); + await testTile(await screen.findByTestId('upload-azure')); + }); });