Fix keyboard shortcuts

src/components/ActiveLocales.tsx

@@ -61,6 +61,38 @@
 		setSelectedLanguage( languages.at( -1 ) );
 	} );
 
+	useShortcut( 'preferred-languages/select-previous', ( event ) => {
+		event.preventDefault();
+
+		if ( isEmpty ) {
+			return;
+		}
+
+		const foundIndex = languages.findIndex(
+			( { locale } ) => locale === selectedLanguage.locale
+		);
+
+		if ( languages[ foundIndex - 1 ] ) {
+			setSelectedLanguage( languages[ foundIndex - 1 ] );
+		}
+	} );
+
+	useShortcut( 'preferred-languages/select-next', ( event ) => {
+		event.preventDefault();
+
+		if ( isEmpty ) {
+			return;
+		}
+
+		const foundIndex = languages.findIndex(
+			( { locale } ) => locale === selectedLanguage.locale
+		);
+
+		if ( languages[ foundIndex + 1 ] ) {
+			setSelectedLanguage( languages[ foundIndex + 1 ] );
+		}
+	} );
+
 	const onRemove = () => {
 		const foundIndex = languages.findIndex(
 			( { locale } ) => locale === selectedLanguage.locale
@@ -248,7 +280,7 @@
 					<Button
 						variant="secondary"
 						showTooltip
-						aria-keyshortcuts="ArrowUp"
+						aria-keyshortcuts="Alt+ArrowUp"
 						aria-label={ sprintf(
 							/* translators: accessibility text */
 							__( 'Move up (%s)', 'preferred-languages' ),
@@ -269,7 +301,7 @@
 					<Button
 						variant="secondary"
 						showTooltip
-						aria-keyshortcuts="ArrowDown"
+						aria-keyshortcuts="Alt+ArrowDown"
 						aria-label={ sprintf(
 							/* translators: accessibility text */
 							__( 'Move down (%s)', 'preferred-languages' ),

src/components/PreferredLanguages.tsx

@@ -51,12 +51,34 @@ function PreferredLanguages( props: PreferredLanguagesProps ) {
 
 	const { registerShortcut } = useDispatch( keyboardShortcutsStore );
 	useEffect( () => {
+		registerShortcut( {
+			name: 'preferred-languages/select-previous',
+			category: 'global',
+			description: __(
+				'Select previous language',
+				'preferred-languages'
+			),
+			keyCombination: {
+				character: 'ArrowUp',
+			},
+		} );
+
+		registerShortcut( {
+			name: 'preferred-languages/select-next',
+			category: 'global',
+			description: __( 'Select next language', 'preferred-languages' ),
+			keyCombination: {
+				character: 'ArrowDown',
+			},
+		} );
+
 		registerShortcut( {
 			name: 'preferred-languages/move-up',
 			category: 'global',
 			description: __( 'Move language up', 'preferred-languages' ),
 			keyCombination: {
 				character: 'ArrowUp',
+				modifier: 'alt',
 			},
 		} );
 
@@ -66,6 +88,7 @@ function PreferredLanguages( props: PreferredLanguagesProps ) {
 			description: __( 'Move language down', 'preferred-languages' ),
 			keyCombination: {
 				character: 'ArrowDown',
+				modifier: 'alt',
 			},
 		} );
 

src/components/test/PreferredLanguages.tsx

@@ -64,13 +64,15 @@ function moveUp() {
 	fireEvent.keyDown( screen.getByRole( 'listbox' ), {
 		key: 'ArrowUp',
 		keyCode: UP,
+		altKey: true,
 	} );
 }
 
 function moveDown() {
 	fireEvent.keyDown( screen.getByRole( 'listbox' ), {
 		key: 'ArrowDown',
 		keyCode: DOWN,
+		altKey: true,
 	} );
 }
 

tests/e2e/plugins/custom-internationalized-plugin/custom-internationalized-plugin.php

@@ -5,7 +5,7 @@
 Description: For testing purposes only.
 Version: 1.0.0
 Text Domain: custom-internationalized-plugin
-Domain Path: languages/
+Domain Path: /languages
 */
 
 function custom_i18n_plugin_test() {

tests/e2e/specs/settings.spec.ts

@@ -131,7 +131,7 @@ test.describe( 'Settings Page', () => {
 		).toBeEnabled();
 
 		// After moving one position up, none of the buttons should be disabled anymore.
-		await page.keyboard.press( 'ArrowUp' );
+		await page.keyboard.press( 'Alt+ArrowUp' );
 
 		await expect(
 			page.getByRole( 'button', { name: /Move up/ } )
@@ -144,8 +144,8 @@ test.describe( 'Settings Page', () => {
 		).toBeEnabled();
 
 		// After moving two up again, the "Move Up" button should be disabled because we reached the top.
-		await page.keyboard.press( 'ArrowUp' );
-		await page.keyboard.press( 'ArrowUp' );
+		await page.keyboard.press( 'Alt+ArrowUp' );
+		await page.keyboard.press( 'Alt+ArrowUp' );
 
 		await expect(
 			page.getByRole( 'button', { name: /Move up/ } )