diff --git a/packages/components/src/focal-point-picker/index.js b/packages/components/src/focal-point-picker/index.js
index bdce052292573a..f50a321604e4d8 100644
--- a/packages/components/src/focal-point-picker/index.js
+++ b/packages/components/src/focal-point-picker/index.js
@@ -12,7 +12,6 @@ import {
 	__experimentalUseDragging as useDragging,
 	useInstanceId,
 } from '@wordpress/compose';
-import { UP, DOWN, LEFT, RIGHT } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
@@ -28,6 +27,8 @@ import {
 } from './styles/focal-point-picker-style';
 import { INITIAL_BOUNDS } from './utils';
 
+const arrowKeyList = [ 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowUp' ];
+
 export default function FocalPointPicker( {
 	autoPlay = true,
 	className,
@@ -126,14 +127,15 @@ export default function FocalPointPicker( {
 	};
 
 	const arrowKeyStep = ( event ) => {
-		const { keyCode, shiftKey } = event;
-		if ( ! [ UP, DOWN, LEFT, RIGHT ].includes( keyCode ) ) return;
+		const { key, shiftKey } = event;
+		if ( ! arrowKeyList.includes( key ) ) return;
 
 		event.preventDefault();
 		const value = { x, y };
 		const step = shiftKey ? 0.1 : 0.01;
-		const delta = keyCode === UP || keyCode === LEFT ? -1 * step : step;
-		const axis = keyCode === UP || keyCode === DOWN ? 'y' : 'x';
+		const delta =
+			key === 'ArrowUp' || key === 'ArrowLeft' ? -1 * step : step;
+		const axis = key === 'ArrowUp' || key === 'ArrowDown' ? 'y' : 'x';
 		value[ axis ] = parseFloat( value[ axis ] ) + delta;
 		sendPoint( getFinalValue( value ) );
 	};
diff --git a/packages/components/src/focal-point-picker/test/index.js b/packages/components/src/focal-point-picker/test/index.js
index 59cb6530913556..fd8d0aba93b62d 100644
--- a/packages/components/src/focal-point-picker/test/index.js
+++ b/packages/components/src/focal-point-picker/test/index.js
@@ -104,7 +104,7 @@ describe( 'FocalPointPicker', () => {
 			// Focus and press arrow up
 			const dragArea = getByRole( 'button' );
 			dragArea.focus();
-			fireEvent.keyDown( dragArea, { charCode: 0, keyCode: 38 } );
+			fireEvent.keyDown( dragArea, { key: 'ArrowUp' } );
 			expect( spyChange ).toHaveBeenCalledWith( {
 				x: '0.14',
 				y: '0.61',