particle-os/debian-image-builder-frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Wizard/test: Implement keydown for target tiles

Browse source 
This implements onKeyDown functionality for the Public cloud tiles, allowing selecting them with a Space key.

Corresponding test was also re-enabled.
This commit is contained in:
regexowl 2024-10-08 13:44:49 +02:00 • committed by Klara Simickova
parent a8234d3d98
commit 4e23c476e8
2 changed files with 26 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/Components/CreateImageWizard/steps/ImageOutput/TargetEnvironment.tsx
View file

@ -71,6 +71,13 @@ const TargetEnvironment = () => {
}
};
const handleKeyDown = (e: React.KeyboardEvent, env: ImageTypes) => {
if (e.key === ' ') {
e.preventDefault();
handleToggleEnvironment(env);
}
};
return (
<FormGroup
isRequired={true}
@ -97,6 +104,7 @@ const TargetEnvironment = () => {
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

32
src/test/Components/CreateImageWizard/CreateImageWizard.test.tsx
View file

@ -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'));
});
});