Text fields using CKEditor 5 do not get visual error indicator

I'll see what I can do on this issue.
Just one question @hooroomoo, I see there is a "Body field is required" inside of the body field on the second picture. Is it present on the first image too?
Because, if only the second example has this it may have been added in purpose to replace the red border as a style choice.

Update (about comment #5), I tested on my site and there isn't any "Body field is required" message inside the field, so a red border is indeed missing.
Bellow I have a comparison between CKEditor 5, CKEditor, and no editor, respectivelly.

I'll keep working on a patch

Apparently the theming/styling of ckeditor is supported by seven theme, (it has its own files for it, like core/themes/seven/css/theme/ckeditor-dialog.css core/themes/seven/js/classy/media_embed_ckeditor.theme.es6.js and even some elements inside core/themes/seven/css/components/form.css use the .cke class), but seven doesn't integrate the ckeditor5.
All styling from ckeditor5 is inside its own module and its elements apparently are all created through .js files with no use of twig. The .js files are gigantic and I don't know how to configure them so I'm unassigning myself from this issue.

Great find, @andregp (oops!) @hooroomoo! 👏

Works beautifully! But I think that we at minimum need to change the selector from .ck to .ck-editor, because the .ck class appears on pretty much every CKEditor 5-owned DOM element:

And maybe we should use .ck-editor > .ck-editor__main, because that will then not include the toolbar in what gets a visual indicator?

I basically agree with comment #13. Even though It might look visually a bit off on one hand if the the toolbar is spared and left out of the focus area but on the other hand if the focus only highlights the actual text fields that require a text entry it might still bring more clarity to the user where interaction is exactly required

but i've noticed one other detail based on the screenshots in comment #6. the document title remains the same after the form submission failed due to a missing required field filled out properly or at all.
it might be helpful for especially screenreader users to update the document title that it shows something like (1 error) Create Article | Drupal 9 instead. that way a screenreader user has a direct feedback on page load knowing that something went wrong on form submission. another use case is for sighted users who have many tabs open. if one users gets distracted and pulled away from the computer for a while and when revisiting the browser with the updated document title it would be easily distinguishable and scanable which was the tab in question with an error.

*the suggestion about the pattern for prepending (x error(s)) to the document.title is from the form design patterns book by adam silver

The textarea.error + .ck-editor > .ck-editor__main selector seems good for me. It feels more accurate to not wrap the toolbar with the red border. This would be also consistent with how focus is indicated in the editable area.

We should ensure there's a follow-up issue for the title proposal in #15.

Perfect! :)

Posted feedback on the MR

Yay, thanks @lauriii and @hooroomoo, that code definitely looks better!

Committed 2ae5a54 and pushed to 10.0.x. Also committed to 9.4.x. Thanks!