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

CreateImageWizard: Make target environments keyboard selectable

Browse source 
The AWS, Google, and Azure tiles on the image output step can now be
selected/deselected using SPACE and/or ENTER.
This commit is contained in:
lucasgarfield 2022-03-10 18:12:27 +01:00 • committed by jkozol
parent e649e5c385
commit e99b7b7d0b
2 changed files with 26 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/Components/CreateImageWizard/formComponents/TargetEnvironment.js
View file

@ -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 />

17
src/test/Components/CreateImageWizard/CreateImageWizard.test.js
View file

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