Update URLPopover role and focus return (WordPress#61313)

* Return focus from URLPopover in social link block * Fix media-placeholder focus return and aria-haspopup * Label the URL Popover * Adjust labelling * Revert "Avoid deleting the block when pressing delete key one too many times in URLPopover" This reverts commit 78a8521. * Add `aria-modal="true"` to URLPopover ---- Co-authored-by: talldan <[email protected]> Co-authored-by: ntsekouras <[email protected]> Co-authored-by: alexstine <[email protected]> Co-authored-by: Mamaduka <[email protected]> Co-authored-by: afercia <[email protected]> Co-authored-by: ciampo <[email protected]>
carstingaxion · Jul 18, 2024 · 8e72b2c · 8e72b2c
1 parent f77863e
commit 8e72b2c
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 33 deletions.
diff --git a/packages/block-editor/src/components/media-placeholder/index.js b/packages/block-editor/src/components/media-placeholder/index.js
@@ -60,28 +60,37 @@ const InsertFromURLPopover = ( {
 	</URLPopover>
 );
 
-const URLSelectionUI = ( {
-	isURLInputVisible,
-	src,
-	onChangeSrc,
-	onSubmitSrc,
-	openURLInput,
-	closeURLInput,
-} ) => {
+const URLSelectionUI = ( { src, onChangeSrc, onSelectURL } ) => {
 	// Use internal state instead of a ref to make sure that the component
 	// re-renders when the popover's anchor updates.
 	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
+	const [ isURLInputVisible, setIsURLInputVisible ] = useState( false );
+
+	const openURLInput = () => {
+		setIsURLInputVisible( true );
+	};
+	const closeURLInput = () => {
+		setIsURLInputVisible( false );
+		popoverAnchor?.focus();
+	};
+
+	const onSubmitSrc = ( event ) => {
+		event.preventDefault();
+		if ( src && onSelectURL ) {
+			onSelectURL( src );
+			closeURLInput();
+		}
+	};
 
 	return (
-		<div
-			className="block-editor-media-placeholder__url-input-container"
-			ref={ setPopoverAnchor }
-		>
+		<div className="block-editor-media-placeholder__url-input-container">
 			<Button
 				className="block-editor-media-placeholder__button"
 				onClick={ openURLInput }
 				isPressed={ isURLInputVisible }
 				variant="secondary"
+				aria-haspopup="dialog"
+				ref={ setPopoverAnchor }
 			>
 				{ __( 'Insert from URL' ) }
 			</Button>
@@ -138,7 +147,6 @@ export function MediaPlaceholder( {
 		return getSettings().mediaUpload;
 	}, [] );
 	const [ src, setSrc ] = useState( '' );
-	const [ isURLInputVisible, setIsURLInputVisible ] = useState( false );
 
 	useEffect( () => {
 		setSrc( value?.src ?? '' );
@@ -159,21 +167,6 @@ export function MediaPlaceholder( {
 		setSrc( event.target.value );
 	};
 
-	const openURLInput = () => {
-		setIsURLInputVisible( true );
-	};
-	const closeURLInput = () => {
-		setIsURLInputVisible( false );
-	};
-
-	const onSubmitSrc = ( event ) => {
-		event.preventDefault();
-		if ( src && onSelectURL ) {
-			onSelectURL( src );
-			closeURLInput();
-		}
-	};
-
 	const onFilesUpload = ( files ) => {
 		if ( ! handleUpload ) {
 			return onSelect( files );
@@ -404,12 +397,9 @@ export function MediaPlaceholder( {
 		return (
 			onSelectURL && (
 				<URLSelectionUI
-					isURLInputVisible={ isURLInputVisible }
 					src={ src }
 					onChangeSrc={ onChangeSrc }
-					onSubmitSrc={ onSubmitSrc }
-					openURLInput={ openURLInput }
-					closeURLInput={ closeURLInput }
+					onSelectURL={ onSelectURL }
 				/>
 			)
 		);

diff --git a/packages/block-editor/src/components/url-popover/index.js b/packages/block-editor/src/components/url-popover/index.js
@@ -71,6 +71,9 @@ const URLPopover = forwardRef(
 		return (
 			<Popover
 				ref={ ref }
+				role="dialog"
+				aria-modal="true"
+				aria-label={ __( 'Edit URL' ) }
 				className="block-editor-url-popover"
 				focusOnMount={ focusOnMount }
 				placement={ computedPlacement }

diff --git a/packages/block-library/src/social-link/edit.js b/packages/block-library/src/social-link/edit.js
@@ -6,11 +6,15 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
+import { DELETE, BACKSPACE } from '@wordpress/keycodes';
+import { useDispatch } from '@wordpress/data';
+
 import {
 	InspectorControls,
 	URLPopover,
 	URLInput,
 	useBlockProps,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useState } from '@wordpress/element';
 import {
@@ -32,17 +36,24 @@ const SocialLinkURLPopover = ( {
 	setAttributes,
 	setPopover,
 	popoverAnchor,
+	clientId,
 } ) => {
+	const { removeBlock } = useDispatch( blockEditorStore );
 	return (
 		<URLPopover
 			anchor={ popoverAnchor }
-			onClose={ () => setPopover( false ) }
+			aria-label={ __( 'Edit social link' ) }
+			onClose={ () => {
+				setPopover( false );
+				popoverAnchor?.focus();
+			} }
 		>
 			<form
 				className="block-editor-url-popover__link-editor"
 				onSubmit={ ( event ) => {
 					event.preventDefault();
 					setPopover( false );
+					popoverAnchor?.focus();
 				} }
 			>
 				<div className="block-editor-url-input">
@@ -56,6 +67,18 @@ const SocialLinkURLPopover = ( {
 						label={ __( 'Enter social link' ) }
 						hideLabelFromVision
 						disableSuggestions
+						onKeyDown={ ( event ) => {
+							if (
+								!! url ||
+								event.defaultPrevented ||
+								! [ BACKSPACE, DELETE ].includes(
+									event.keyCode
+								)
+							) {
+								return;
+							}
+							removeBlock( clientId );
+						} }
 					/>
 				</div>
 				<Button
@@ -73,6 +96,7 @@ const SocialLinkEdit = ( {
 	context,
 	isSelected,
 	setAttributes,
+	clientId,
 } ) => {
 	const { url, service, label = '', rel } = attributes;
 	const {
@@ -143,6 +167,7 @@ const SocialLinkEdit = ( {
 					className="wp-block-social-link-anchor"
 					ref={ setPopoverAnchor }
 					onClick={ () => setPopover( true ) }
+					aria-haspopup="dialog"
 				>
 					<IconComponent />
 					<span
@@ -159,6 +184,7 @@ const SocialLinkEdit = ( {
 						setAttributes={ setAttributes }
 						setPopover={ setPopover }
 						popoverAnchor={ popoverAnchor }
+						clientId={ clientId }
 					/>
 				) }
 			</li>