[9.2] [SharedUX][A11y] Fix calendar event description field error text (elastic#240442) (elastic#240863)

# Backport

This will backport the following commits from `main` to `9.2`:
- [[SharedUX][A11y] Fix calendar event description field error text
(elastic#240442)](elastic#240442)

<!--- Backport version: 9.6.6 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Ángeles Martínez
Barrio","email":"[email protected]"},"sourceCommit":{"committedDate":"2025-10-27T16:25:31Z","message":"[SharedUX][A11y]
Fix calendar event description field error text (elastic#240442)\n\nCloses
https://github.com/elastic/kibana/issues/216992\n\n## Summary\n\n- Added
explicit error message for users to better understand why the\nfield is
in an error state: error only appears after the user interacts\nwith the
field (either on change or on blur for keyboard navigation)\n- Added the
`descriptionVisited` state initialized to false to avoid\nshowing the
error on first modal render\n- Added basic field validation to avoid
empty descriptions (spaces)\nbeing saved\n\n### Testing\n\n**Error
behavior:**\nBefore:\n\n\nhttps://github.com/user-attachments/assets/6661c1fd-20ea-46ec-8483-590ba7f02549\n\nAfter:\n\n\nhttps://github.com/user-attachments/assets/33596ede-0370-4190-9d3b-1465709ea1a7\n\n**VoiceOver
error announcement:**\nBefore:\n\n<img width=\"1075\" height=\"322\"
alt=\"Screenshot 2025-10-24 at 12 57
12\"\nsrc=\"https://github.com/user-attachments/assets/683b214c-5d05-4c35-a169-609c44288fbf\"\n/>\n\nAfter:\n\n<img
width=\"1020\" height=\"327\" alt=\"Screenshot 2025-10-24 at 12 56
10\"\nsrc=\"https://github.com/user-attachments/assets/bec8d439-8bcf-4620-8bd1-f73d3ed282a1\"\n/>\n\nCo-authored-by:
Elastic Machine
<[email protected]>","sha":"7e0dded80a6c4e4c4fe63ff4216682a7651946a8","branchLabelMapping":{"^v9.3.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":[":ml","release_note:skip","Team:SharedUX","backport:version","a11y","v9.3.0","v9.2.1"],"title":"[SharedUX][A11y]
Fix calendar event description field error
text","number":240442,"url":"https://github.com/elastic/kibana/pull/240442","mergeCommit":{"message":"[SharedUX][A11y]
Fix calendar event description field error text (elastic#240442)\n\nCloses
https://github.com/elastic/kibana/issues/216992\n\n## Summary\n\n- Added
explicit error message for users to better understand why the\nfield is
in an error state: error only appears after the user interacts\nwith the
field (either on change or on blur for keyboard navigation)\n- Added the
`descriptionVisited` state initialized to false to avoid\nshowing the
error on first modal render\n- Added basic field validation to avoid
empty descriptions (spaces)\nbeing saved\n\n### Testing\n\n**Error
behavior:**\nBefore:\n\n\nhttps://github.com/user-attachments/assets/6661c1fd-20ea-46ec-8483-590ba7f02549\n\nAfter:\n\n\nhttps://github.com/user-attachments/assets/33596ede-0370-4190-9d3b-1465709ea1a7\n\n**VoiceOver
error announcement:**\nBefore:\n\n<img width=\"1075\" height=\"322\"
alt=\"Screenshot 2025-10-24 at 12 57
12\"\nsrc=\"https://github.com/user-attachments/assets/683b214c-5d05-4c35-a169-609c44288fbf\"\n/>\n\nAfter:\n\n<img
width=\"1020\" height=\"327\" alt=\"Screenshot 2025-10-24 at 12 56
10\"\nsrc=\"https://github.com/user-attachments/assets/bec8d439-8bcf-4620-8bd1-f73d3ed282a1\"\n/>\n\nCo-authored-by:
Elastic Machine
<[email protected]>","sha":"7e0dded80a6c4e4c4fe63ff4216682a7651946a8"}},"sourceBranch":"main","suggestedTargetBranches":["9.2"],"targetPullRequestStates":[{"branch":"main","label":"v9.3.0","branchLabelMappingKey":"^v9.3.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/240442","number":240442,"mergeCommit":{"message":"[SharedUX][A11y]
Fix calendar event description field error text (elastic#240442)\n\nCloses
https://github.com/elastic/kibana/issues/216992\n\n## Summary\n\n- Added
explicit error message for users to better understand why the\nfield is
in an error state: error only appears after the user interacts\nwith the
field (either on change or on blur for keyboard navigation)\n- Added the
`descriptionVisited` state initialized to false to avoid\nshowing the
error on first modal render\n- Added basic field validation to avoid
empty descriptions (spaces)\nbeing saved\n\n### Testing\n\n**Error
behavior:**\nBefore:\n\n\nhttps://github.com/user-attachments/assets/6661c1fd-20ea-46ec-8483-590ba7f02549\n\nAfter:\n\n\nhttps://github.com/user-attachments/assets/33596ede-0370-4190-9d3b-1465709ea1a7\n\n**VoiceOver
error announcement:**\nBefore:\n\n<img width=\"1075\" height=\"322\"
alt=\"Screenshot 2025-10-24 at 12 57
12\"\nsrc=\"https://github.com/user-attachments/assets/683b214c-5d05-4c35-a169-609c44288fbf\"\n/>\n\nAfter:\n\n<img
width=\"1020\" height=\"327\" alt=\"Screenshot 2025-10-24 at 12 56
10\"\nsrc=\"https://github.com/user-attachments/assets/bec8d439-8bcf-4620-8bd1-f73d3ed282a1\"\n/>\n\nCo-authored-by:
Elastic Machine
<[email protected]>","sha":"7e0dded80a6c4e4c4fe63ff4216682a7651946a8"}},{"branch":"9.2","label":"v9.2.1","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Ángeles Martínez Barrio <[email protected]>
Co-authored-by: Elastic Machine <[email protected]>

Author: 3 people

x-pack/platform/plugins/shared/ml/public/application/settings/calendars/edit/new_event_modal/new_event_modal.js

@@ -52,6 +52,7 @@ export class NewEventModal extends Component {
       startDate,
       endDate,
       description: '',
+      descriptionVisited: false,
       startDateString: startDate.format(TIME_FORMAT),
       endDateString: endDate.format(TIME_FORMAT),
     };
@@ -60,6 +61,13 @@ export class NewEventModal extends Component {
   onDescriptionChange = (e) => {
     this.setState({
       description: e.target.value,
+      descriptionVisited: true,
+    });
+  };
+
+  onDescriptionBlur = () => {
+    this.setState({
+      descriptionVisited: true,
     });
   };
 
@@ -260,7 +268,9 @@ export class NewEventModal extends Component {
 
   render() {
     const { closeModal } = this.props;
-    const { description } = this.state;
+    const { description, descriptionVisited } = this.state;
+    const isDescriptionInvalid = !description.trim();
+    const isDescriptionInvalidVisible = isDescriptionInvalid && descriptionVisited;
     const modalTitleId = htmlIdGenerator()('modalTitle');
 
     return (
@@ -291,11 +301,16 @@ export class NewEventModal extends Component {
                   />
                 }
                 fullWidth
+                error={i18n.translate('xpack.ml.calendarsEdit.newEventModal.descriptionError', {
+                  defaultMessage: 'Description cannot be empty',
+                })}
+                isInvalid={isDescriptionInvalidVisible}
               >
                 <EuiFieldText
                   name="eventDescription"
+                  onBlur={this.onDescriptionBlur}
                   onChange={this.onDescriptionChange}
-                  isInvalid={!description}
+                  isInvalid={isDescriptionInvalidVisible}
                   fullWidth
                   data-test-subj={'mlCalendarEventDescriptionInput'}
                 />
@@ -317,7 +332,7 @@ export class NewEventModal extends Component {
             <EuiButton
               onClick={this.handleAddEvent}
               fill
-              disabled={!description}
+              disabled={isDescriptionInvalid}
               data-test-subj={'mlCalendarAddEventButton'}
             >
               <FormattedMessage