Issue #3258030 by hooroomoo, lauriii, andregp, Wim Leers, rkoller: Text fields...

Issue #3258030 by hooroomoo, lauriii, andregp, Wim Leers, rkoller: Text fields using CKEditor 5 do not get visual error indicator

core/themes/bartik/css/components/form.css

@@ -319,6 +319,10 @@ input.form-submit:focus {
   border: 2px solid red;
 }
 
+.form-item textarea.error + .ck-editor > .ck-editor__main {
+  border: 2px solid red;
+}
+
 /* Form error message styles. */
 .form-item--error-message {
   color: #e32700;

core/themes/claro/css/components/form--text.css

@@ -165,3 +165,7 @@ _:-ms-fullscreen,
     margin-top: 0;
   }
 }
+
+.form-element--type-textarea.error + .ck-editor > .ck-editor__main {
+  border: var(--input--error-border-size) solid var(--input--error-border-color);
+}

core/themes/claro/css/components/form--text.pcss.css

@@ -137,3 +137,7 @@ _:-ms-fullscreen,
     margin-top: 0;
   }
 }
+
+.form-element--type-textarea.error + .ck-editor > .ck-editor__main {
+  border: var(--input--error-border-size) solid var(--input--error-border-color);
+}

core/themes/olivero/css/components/form-text.css

@@ -86,6 +86,10 @@ textarea {
       outline-offset: -2px;
     }
 
+[type="color"].error + .ck-editor > .ck-editor__main, [type="date"].error + .ck-editor > .ck-editor__main, [type="datetime-local"].error + .ck-editor > .ck-editor__main, [type="email"].error + .ck-editor > .ck-editor__main, [type="file"].error + .ck-editor > .ck-editor__main, [type="month"].error + .ck-editor > .ck-editor__main, [type="number"].error + .ck-editor > .ck-editor__main, [type="password"].error + .ck-editor > .ck-editor__main, [type="search"].error + .ck-editor > .ck-editor__main, [type="tel"].error + .ck-editor > .ck-editor__main, [type="text"].error + .ck-editor > .ck-editor__main, [type="time"].error + .ck-editor > .ck-editor__main, [type="url"].error + .ck-editor > .ck-editor__main, [type="week"].error + .ck-editor > .ck-editor__main, textarea.error + .ck-editor > .ck-editor__main {
+      border: solid 2px var(--color--red);
+    }
+
 [type="color"].form-element--small, [type="date"].form-element--small, [type="datetime-local"].form-element--small, [type="email"].form-element--small, [type="file"].form-element--small, [type="month"].form-element--small, [type="number"].form-element--small, [type="password"].form-element--small, [type="search"].form-element--small, [type="tel"].form-element--small, [type="text"].form-element--small, [type="time"].form-element--small, [type="url"].form-element--small, [type="week"].form-element--small, textarea.form-element--small {
     min-height: var(--sp2-5);
   }

core/themes/olivero/css/components/form-text.pcss.css

@@ -60,6 +60,9 @@ textarea {
       outline-color: var(--color--red);
       outline-offset: -2px;
     }
+    & + .ck-editor > .ck-editor__main {
+      border: solid 2px var(--color--red);
+    }
   }
 
   &.form-element--small {

core/themes/seven/css/components/form.css

@@ -126,6 +126,9 @@ label[for] {
   border-width: 1px;
   border-color: #e62600;
 }
+.form-item textarea.error + .ck-editor > .ck-editor__main {
+  border: 1px solid #e62600;
+}
 .form-item input.error:focus,
 .form-item textarea.error:focus,
 .form-item select.error:focus {