Simplify keyboard and focus events

t-hamano · Jul 19, 2023 · 5ba4f72 · 5ba4f72
1 parent f1a5b91
commit 5ba4f72
Show file tree

Hide file tree

Showing 3 changed files with 1 addition and 19 deletions.
diff --git a/src/components/keyboard/index.tsx b/src/components/keyboard/index.tsx
@@ -36,6 +36,7 @@ const Keyboard = ( { activeKeys, keyLayout, onKeyClick }: Props ) => {
 				{ keys.map( ( key, index ) => (
 					<button
 						key={ index }
+						tabIndex={ -1 }
 						className={ classnames( 'piano-block-keyboard__key', {
 							'piano-block-keyboard__key--white': ! key.isBlackKey,
 							'piano-block-keyboard__key--black': key.isBlackKey,

diff --git a/src/components/keyboard/style.scss b/src/components/keyboard/style.scss
@@ -35,11 +35,6 @@
 			cursor: pointer;
 		}
 
-		&:focus-visible {
-			outline: var(--wp-admin-theme-color, #007cba) auto 4px;
-			outline-offset: -2px;
-		}
-
 		&.is-pressed,
 		&:active {
 

diff --git a/src/components/piano/index.tsx b/src/components/piano/index.tsx
@@ -107,18 +107,6 @@ const Piano = ( { settings, onChange }: Props ) => {
 
 	// Trigger the note corresponding to the pressed key.
 	const onKeyDown = ( event: KeyboardEvent ): void => {
-		// Remove focus from key.
-		const activeElement = ref.current?.ownerDocument.activeElement;
-		if ( activeElement && activeElement.classList.contains( 'piano-block-keyboard__key' ) ) {
-			ref.current.focus();
-		}
-
-		// Disable unexpected key events on select elements.
-		const isAcceptableKey = [ 'ArrowUp', 'ArrowDown', 'Enter', 'Tab' ].includes( event.key );
-		if ( activeElement && activeElement?.tagName === 'SELECT' && ! isAcceptableKey ) {
-			event.preventDefault();
-		}
-
 		if ( ! isReady || ! piano ) {
 			return;
 		}
@@ -148,8 +136,6 @@ const Piano = ( { settings, onChange }: Props ) => {
 
 	// Stop the note when the key is released.
 	const onKeyUp = ( event: KeyboardEvent ) => {
-		event.preventDefault();
-
 		if ( ! isReady || ! piano ) {
 			return;
 		}