From 49c47e2a09db349fe7b97109d4bc3f7a22a266f0 Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Wed, 28 Aug 2024 11:46:48 -0500
Subject: [PATCH] Make social icon one arrow key instead of two to move between

blockProps makes each top level item a tabindex=0 for navigating between them. In the unique case of social icons, it's a list of LIs with a focusable button inside of it. This means each social icon is _two_ indistinguishable keypresses to move between them. What's more is an enter keypress to open the popover only works when you're on the button, but it's not possible to know which one.

By adding the tabindex=-1, we make the LI that doesn't have an onClick get skipped so we only need one keypress and always land on the one that has the interaction to open the popover.
---
 packages/block-library/src/social-link/edit.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-library/src/social-link/edit.js b/packages/block-library/src/social-link/edit.js
index f6d46731a399f3..5085f61c2951a3 100644
--- a/packages/block-library/src/social-link/edit.js
+++ b/packages/block-library/src/social-link/edit.js
@@ -165,7 +165,7 @@ const SocialLinkEdit = ( {
 					onChange={ ( value ) => setAttributes( { rel: value } ) }
 				/>
 			</InspectorControls>
-			<li { ...blockProps }>
+			<li { ...blockProps } tabIndex={ -1 }>
 				<button
 					className="wp-block-social-link-anchor"
 					ref={ setPopoverAnchor }