Make the custom CSS validation error message accessible. (#56690)

Co-authored-by: Alex Stine <[email protected]>

Author: afercia

packages/block-editor/src/components/global-styles/advanced-panel.js

@@ -3,12 +3,11 @@
  */
 import {
 	TextareaControl,
-	Tooltip,
+	Notice,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { Icon, info } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -58,6 +57,11 @@ export default function AdvancedPanel( {
 
 	return (
 		<VStack spacing={ 3 }>
+			{ cssError && (
+				<Notice status="error" onRemove={ () => setCSSError( null ) }>
+					{ cssError }
+				</Notice>
+			) }
 			<TextareaControl
 				label={ __( 'Additional CSS' ) }
 				__nextHasNoMarginBottom
@@ -67,16 +71,6 @@ export default function AdvancedPanel( {
 				className="block-editor-global-styles-advanced-panel__custom-css-input"
 				spellCheck={ false }
 			/>
-			{ cssError && (
-				<Tooltip text={ cssError }>
-					<div className="block-editor-global-styles-advanced-panel__custom-css-validation-wrapper">
-						<Icon
-							icon={ info }
-							className="block-editor-global-styles-advanced-panel__custom-css-validation-icon"
-						/>
-					</div>
-				</Tooltip>
-			) }
 		</VStack>
 	);
 }

packages/block-editor/src/components/global-styles/style.scss

@@ -47,13 +47,3 @@
 	/*rtl:ignore*/
 	direction: ltr;
 }
-
-.block-editor-global-styles-advanced-panel__custom-css-validation-wrapper {
-	position: absolute;
-	bottom: $grid-unit-20;
-	right: $grid-unit * 3;
-}
-
-.block-editor-global-styles-advanced-panel__custom-css-validation-icon {
-	fill: $alert-red;
-}