From 0e2762c82e2bce0c3b9a895e433021f8d2059b15 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Wed, 14 Feb 2024 09:48:53 +0100
Subject: [PATCH] Make the custom CSS validation error message accessible.
 (#56690)

Co-authored-by: Alex Stine <alex.stine@yourtechadvisors.com>
---
 .../components/global-styles/advanced-panel.js | 18 ++++++------------
 .../src/components/global-styles/style.scss    | 10 ----------
 2 files changed, 6 insertions(+), 22 deletions(-)

diff --git a/packages/block-editor/src/components/global-styles/advanced-panel.js b/packages/block-editor/src/components/global-styles/advanced-panel.js
index af43552c0a3eb..1ad59451d1468 100644
--- a/packages/block-editor/src/components/global-styles/advanced-panel.js
+++ b/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>
 	);
 }
diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss
index 010c5faaefff4..d2ba88f9f31e0 100644
--- a/packages/block-editor/src/components/global-styles/style.scss
+++ b/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;
-}