From 90a870dbcf9c25210d516265c9ebcf64f8bc24e9 Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Fri, 30 Aug 2024 10:18:26 -0500
Subject: [PATCH 1/5] Move social icons blockProps from li to button

By moving the blockProps for the social icon from the <li> to the <button>, we get the appropriate behavior of being able to select and create social icons with a clean keyboard behavior.
---
 .../block-library/src/social-link/edit.js     | 53 ++++++++++++-------
 .../block-library/src/social-link/editor.scss |  6 +++
 2 files changed, 40 insertions(+), 19 deletions(-)

diff --git a/packages/block-library/src/social-link/edit.js b/packages/block-library/src/social-link/edit.js
index 47af181bfe17e..12f75407cd31c 100644
--- a/packages/block-library/src/social-link/edit.js
+++ b/packages/block-library/src/social-link/edit.js
@@ -6,7 +6,7 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { DELETE, BACKSPACE } from '@wordpress/keycodes';
+import { DELETE, BACKSPACE, ENTER } from '@wordpress/keycodes';
 import { useDispatch } from '@wordpress/data';
 
 import {
@@ -16,7 +16,7 @@ import {
 	useBlockProps,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { useState } from '@wordpress/element';
+import { useState, useRef } from '@wordpress/element';
 import {
 	Button,
 	PanelBody,
@@ -24,6 +24,7 @@ import {
 	TextControl,
 	__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
 } from '@wordpress/components';
+import { useMergeRefs } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import { keyboardReturn } from '@wordpress/icons';
 
@@ -112,12 +113,20 @@ const SocialLinkEdit = ( {
 		iconBackgroundColorValue,
 	} = context;
 	const [ showURLPopover, setPopover ] = useState( false );
-	const classes = clsx( 'wp-social-link', 'wp-social-link-' + service, {
-		'wp-social-link__is-incomplete': ! url,
-		[ `has-${ iconColor }-color` ]: iconColor,
-		[ `has-${ iconBackgroundColor }-background-color` ]:
-			iconBackgroundColor,
-	} );
+	const wrapperClasses = clsx(
+		'wp-social-link',
+		// Manually adding this class for backwards compatibility of CSS when moving the
+		// blockProps from the li to the button: https://github.com/WordPress/gutenberg/pull/64883
+		'wp-block-social-link',
+		'wp-social-link__list-item',
+		'wp-social-link-' + service,
+		{
+			'wp-social-link__is-incomplete': ! url,
+			[ `has-${ iconColor }-color` ]: iconColor,
+			[ `has-${ iconBackgroundColor }-background-color` ]:
+				iconBackgroundColor,
+		}
+	);
 
 	// Use internal state instead of a ref to make sure that the component
 	// re-renders when the popover's anchor updates.
@@ -131,11 +140,16 @@ const SocialLinkEdit = ( {
 	// spaces. The PHP render callback fallbacks to the social name as well.
 	const socialLinkText = label.trim() === '' ? socialLinkName : label;
 
+	const ref = useRef();
 	const blockProps = useBlockProps( {
-		className: classes,
-		style: {
-			color: iconColorValue,
-			backgroundColor: iconBackgroundColorValue,
+		className: 'wp-block-social-link-anchor',
+		ref: useMergeRefs( [ setPopoverAnchor, ref ] ),
+		onClick: () => setPopover( true ),
+		onKeyDown: ( event ) => {
+			if ( event.keyCode === ENTER ) {
+				event.preventDefault();
+				setPopover( true );
+			}
 		},
 	} );
 
@@ -169,13 +183,14 @@ const SocialLinkEdit = ( {
 					onChange={ ( value ) => setAttributes( { rel: value } ) }
 				/>
 			</InspectorControls>
-			<li { ...blockProps }>
-				<button
-					className="wp-block-social-link-anchor"
-					ref={ setPopoverAnchor }
-					onClick={ () => setPopover( true ) }
-					aria-haspopup="dialog"
-				>
+			<li
+				className={ wrapperClasses }
+				style={ {
+					color: iconColorValue,
+					backgroundColor: iconBackgroundColorValue,
+				} }
+			>
+				<button aria-haspopup="dialog" { ...blockProps }>
 					<IconComponent />
 					<span
 						className={ clsx( 'wp-block-social-link-label', {
diff --git a/packages/block-library/src/social-link/editor.scss b/packages/block-library/src/social-link/editor.scss
index bd93ad9f055fc..172e658505954 100644
--- a/packages/block-library/src/social-link/editor.scss
+++ b/packages/block-library/src/social-link/editor.scss
@@ -29,6 +29,12 @@
 		// Windows High Contrast mode will show this outline, but not the box-shadow.
 		outline: 3px solid transparent;
 	}
+
+	// Override the shared `.wp-block-social-link` class used on both the li and button
+	// due to backwards compatibility from moving the blockProps from the li to the button.
+	&:hover {
+		transform: none;
+	}
 }
 
 :root :where(.wp-block-social-links.is-style-pill-shape .wp-social-link button) {

From 6b7667f416a8232f8d2e4ad60c7dd6e2c3ac979c Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Fri, 30 Aug 2024 13:39:10 -0500
Subject: [PATCH 2/5] Remove unnecessary css for social icon button focus to
 make it consistent with other focus styles

---
 packages/block-library/src/social-link/editor.scss | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/packages/block-library/src/social-link/editor.scss b/packages/block-library/src/social-link/editor.scss
index 172e658505954..2f5714f5d2ed9 100644
--- a/packages/block-library/src/social-link/editor.scss
+++ b/packages/block-library/src/social-link/editor.scss
@@ -21,15 +21,6 @@
 	// This rule is duplicated from the style.scss and needs to be the same as there.
 	padding: 0.25em;
 
-	// Focus styles replicate the `@wordpress/components` button component.
-	&:focus:not(:disabled) {
-		border-radius: 2px;
-		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-
-		// Windows High Contrast mode will show this outline, but not the box-shadow.
-		outline: 3px solid transparent;
-	}
-
 	// Override the shared `.wp-block-social-link` class used on both the li and button
 	// due to backwards compatibility from moving the blockProps from the li to the button.
 	&:hover {

From 41a2708ff92013e883da77dac4a7b16bc24f8b2a Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Wed, 4 Sep 2024 09:34:12 -0500
Subject: [PATCH 3/5] remove unneeded classname

---
 packages/block-library/src/social-link/edit.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/block-library/src/social-link/edit.js b/packages/block-library/src/social-link/edit.js
index 12f75407cd31c..bc81d3a224fe1 100644
--- a/packages/block-library/src/social-link/edit.js
+++ b/packages/block-library/src/social-link/edit.js
@@ -118,7 +118,6 @@ const SocialLinkEdit = ( {
 		// Manually adding this class for backwards compatibility of CSS when moving the
 		// blockProps from the li to the button: https://github.com/WordPress/gutenberg/pull/64883
 		'wp-block-social-link',
-		'wp-social-link__list-item',
 		'wp-social-link-' + service,
 		{
 			'wp-social-link__is-incomplete': ! url,

From 22d205ec116ecd79860101f729c2edcf5eafbe7f Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Wed, 2 Oct 2024 12:02:29 -0500
Subject: [PATCH 4/5] Add role='button' to social icon button to override
 document role

---
 packages/block-library/src/social-link/edit.js | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/block-library/src/social-link/edit.js b/packages/block-library/src/social-link/edit.js
index bc81d3a224fe1..42a39a23ada3b 100644
--- a/packages/block-library/src/social-link/edit.js
+++ b/packages/block-library/src/social-link/edit.js
@@ -189,7 +189,14 @@ const SocialLinkEdit = ( {
 					backgroundColor: iconBackgroundColorValue,
 				} }
 			>
-				<button aria-haspopup="dialog" { ...blockProps }>
+				{ /*
+				 * Disable reason: The `button` ARIA role is redundant but
+				 * blockProps has a role of `document` automatically applied
+				 * which breaks the semantics of this button since it removes
+				 * the information about the popover.
+				 */
+				/* eslint-disable jsx-a11y/no-redundant-roles */ }
+				<button aria-haspopup="dialog" { ...blockProps } role="button">
 					<IconComponent />
 					<span
 						className={ clsx( 'wp-block-social-link-label', {
@@ -199,6 +206,7 @@ const SocialLinkEdit = ( {
 						{ socialLinkText }
 					</span>
 				</button>
+				{ /* eslint-enable jsx-a11y/no-redundant-roles */ }
 				{ isSelected && showURLPopover && (
 					<SocialLinkURLPopover
 						url={ url }

From 64ca1c90518917b37b8d5644835a36a40a1004d2 Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Mon, 18 Nov 2024 11:24:17 -0600
Subject: [PATCH 5/5] Add role=presentation to li elements in editor

---
 packages/block-library/src/social-link/edit.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/block-library/src/social-link/edit.js b/packages/block-library/src/social-link/edit.js
index 42a39a23ada3b..14b0f11334a09 100644
--- a/packages/block-library/src/social-link/edit.js
+++ b/packages/block-library/src/social-link/edit.js
@@ -182,7 +182,13 @@ const SocialLinkEdit = ( {
 					onChange={ ( value ) => setAttributes( { rel: value } ) }
 				/>
 			</InspectorControls>
+			{ /*
+			 * Because the `<ul>` element has a role=document, the `<li>` is
+			 * not semantically correct, so adding role=presentation is cleaner.
+			 * https://github.com/WordPress/gutenberg/pull/64883#issuecomment-2472874551
+			 */ }
 			<li
+				role="presentation"
 				className={ wrapperClasses }
 				style={ {
 					color: iconColorValue,