[9.1] [Index Management] Fix data retention modal validation (elastic#240062) (elastic#240828)

# Backport

This will backport the following commits from `main` to `9.1`:
- [[Index Management] Fix data retention modal validation
(elastic#240062)](elastic#240062)

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

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

<!--BACKPORT [{"author":{"name":"Sonia Sanz
Vivas","email":"[email protected]"},"sourceCommit":{"committedDate":"2025-10-27T14:03:02Z","message":"[Index
Management] Fix data retention modal validation (elastic#240062)\n\nFixes
https://github.com/elastic/kibana/issues/239656\n## Summary\n\nWe had a
bug in the validation for data retention modal in data streams.\nThe
data retention period field couldn't left blank even if the enable\ndata
retention toggle was disabled or the keep data indefinitely\nenabled. To
fix this, we need to re-validate the form whenever a form\nfield
changes.\n\n### how to test\n\n- Open the edit data retention modal for
some data stream\n- Toggle on `Enable data retention`, leave data
retention period blank,\nlet `Keep data indefinitely` disabled.\n-
Verify that you see the validation warning and you are not allowed
to\nsave (this is ok!)\n<img width=\"739\" height=\"431\"
alt=\"Screenshot 2025-10-22 at 13 13
07\"\nsrc=\"https://github.com/user-attachments/assets/c59cfb5e-d405-4176-9efd-46bf76a9332d\"\n/>\n\n-
Now enable `Keep data indefinitely`. \n- The validation error should
disappear and you should be allowed to\nsave (great!).\n \n<img
width=\"748\" height=\"417\" alt=\"Screenshot 2025-10-22 at 13 13
13\"\nsrc=\"https://github.com/user-attachments/assets/aef71367-663d-4643-bf2e-de9072e7e854\"\n/>\n\n-
Disable `Keep data indefinitely`, leave data retention period blank\nand
toggle off `Enable data retention`\n- The validation error should
disappear and you should be allowed to\nsave (great!).\n<img
width=\"717\" height=\"394\" alt=\"Screenshot 2025-10-22 at 13 12
38\"\nsrc=\"https://github.com/user-attachments/assets/7ace405c-9877-4a36-ad52-d36a29eba437\"\n/>\n\nNote:
the Save button won't be enabled unless the form is dirty.\n\n**Bonus
track**: Fixed some accessibility warnings in the file by
adding\naria-labels to the
buttons.","sha":"57ff405bf4958951568fb90ff8e72c591d119b6a","branchLabelMapping":{"^v9.3.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Feature:Index
Management","Team:Kibana
Management","release_note:skip","backport:all-open","v9.3.0"],"title":"[Index
Management] Fix data retention modal
validation","number":240062,"url":"https://github.com/elastic/kibana/pull/240062","mergeCommit":{"message":"[Index
Management] Fix data retention modal validation (elastic#240062)\n\nFixes
https://github.com/elastic/kibana/issues/239656\n## Summary\n\nWe had a
bug in the validation for data retention modal in data streams.\nThe
data retention period field couldn't left blank even if the enable\ndata
retention toggle was disabled or the keep data indefinitely\nenabled. To
fix this, we need to re-validate the form whenever a form\nfield
changes.\n\n### how to test\n\n- Open the edit data retention modal for
some data stream\n- Toggle on `Enable data retention`, leave data
retention period blank,\nlet `Keep data indefinitely` disabled.\n-
Verify that you see the validation warning and you are not allowed
to\nsave (this is ok!)\n<img width=\"739\" height=\"431\"
alt=\"Screenshot 2025-10-22 at 13 13
07\"\nsrc=\"https://github.com/user-attachments/assets/c59cfb5e-d405-4176-9efd-46bf76a9332d\"\n/>\n\n-
Now enable `Keep data indefinitely`. \n- The validation error should
disappear and you should be allowed to\nsave (great!).\n \n<img
width=\"748\" height=\"417\" alt=\"Screenshot 2025-10-22 at 13 13
13\"\nsrc=\"https://github.com/user-attachments/assets/aef71367-663d-4643-bf2e-de9072e7e854\"\n/>\n\n-
Disable `Keep data indefinitely`, leave data retention period blank\nand
toggle off `Enable data retention`\n- The validation error should
disappear and you should be allowed to\nsave (great!).\n<img
width=\"717\" height=\"394\" alt=\"Screenshot 2025-10-22 at 13 12
38\"\nsrc=\"https://github.com/user-attachments/assets/7ace405c-9877-4a36-ad52-d36a29eba437\"\n/>\n\nNote:
the Save button won't be enabled unless the form is dirty.\n\n**Bonus
track**: Fixed some accessibility warnings in the file by
adding\naria-labels to the
buttons.","sha":"57ff405bf4958951568fb90ff8e72c591d119b6a"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.3.0","branchLabelMappingKey":"^v9.3.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/240062","number":240062,"mergeCommit":{"message":"[Index
Management] Fix data retention modal validation (elastic#240062)\n\nFixes
https://github.com/elastic/kibana/issues/239656\n## Summary\n\nWe had a
bug in the validation for data retention modal in data streams.\nThe
data retention period field couldn't left blank even if the enable\ndata
retention toggle was disabled or the keep data indefinitely\nenabled. To
fix this, we need to re-validate the form whenever a form\nfield
changes.\n\n### how to test\n\n- Open the edit data retention modal for
some data stream\n- Toggle on `Enable data retention`, leave data
retention period blank,\nlet `Keep data indefinitely` disabled.\n-
Verify that you see the validation warning and you are not allowed
to\nsave (this is ok!)\n<img width=\"739\" height=\"431\"
alt=\"Screenshot 2025-10-22 at 13 13
07\"\nsrc=\"https://github.com/user-attachments/assets/c59cfb5e-d405-4176-9efd-46bf76a9332d\"\n/>\n\n-
Now enable `Keep data indefinitely`. \n- The validation error should
disappear and you should be allowed to\nsave (great!).\n \n<img
width=\"748\" height=\"417\" alt=\"Screenshot 2025-10-22 at 13 13
13\"\nsrc=\"https://github.com/user-attachments/assets/aef71367-663d-4643-bf2e-de9072e7e854\"\n/>\n\n-
Disable `Keep data indefinitely`, leave data retention period blank\nand
toggle off `Enable data retention`\n- The validation error should
disappear and you should be allowed to\nsave (great!).\n<img
width=\"717\" height=\"394\" alt=\"Screenshot 2025-10-22 at 13 12
38\"\nsrc=\"https://github.com/user-attachments/assets/7ace405c-9877-4a36-ad52-d36a29eba437\"\n/>\n\nNote:
the Save button won't be enabled unless the form is dirty.\n\n**Bonus
track**: Fixed some accessibility warnings in the file by
adding\naria-labels to the
buttons.","sha":"57ff405bf4958951568fb90ff8e72c591d119b6a"}}]}]
BACKPORT-->

---------

Co-authored-by: Sonia Sanz Vivas <[email protected]>

Author: kibanamachine

x-pack/platform/plugins/shared/index_management/public/application/sections/home/data_stream_list/edit_data_retention_modal/edit_data_retention_modal.tsx

@@ -96,13 +96,11 @@ export const EditDataRetentionModal: React.FunctionComponent<Props> = ({
   const formHasErrors = form.getErrors().length > 0;
   const disableSubmit = formHasErrors || !isDirty || form.isValid === false;
 
-  // Whenever the timeUnit field changes, we need to re-validate
+  // Whenever a form data field changes, we need to re-validate
   // the dataRetention field
   useEffect(() => {
-    if (formData.dataRetention) {
-      form.validateFields(['dataRetention']);
-    }
-  }, [formData.timeUnit, form, formData.dataRetention]);
+    form.validateFields(['dataRetention']);
+  }, [form, formData]);
 
   const onSubmitForm = async () => {
     const { isValid, data } = await form.submit();
@@ -202,6 +200,12 @@ export const EditDataRetentionModal: React.FunctionComponent<Props> = ({
       onClose={() => onClose()}
       data-test-subj="editDataRetentionModal"
       css={{ width: 650 }}
+      aria-label={i18n.translate(
+        'xpack.idxMgmt.dataStreams.editDataRetentionModal.modalAriaLabel',
+        {
+          defaultMessage: 'Edit data retention modal',
+        }
+      )}
     >
       <Form form={form} data-test-subj="editDataRetentionForm">
         <EuiModalHeader>
@@ -395,7 +399,16 @@ export const EditDataRetentionModal: React.FunctionComponent<Props> = ({
         </EuiModalBody>
 
         <EuiModalFooter>
-          <EuiButtonEmpty data-test-subj="cancelButton" onClick={() => onClose()}>
+          <EuiButtonEmpty
+            data-test-subj="cancelButton"
+            onClick={() => onClose()}
+            aria-label={i18n.translate(
+              'xpack.idxMgmt.dataStreams.editDataRetentionModal.cancelButtonAriaLabel',
+              {
+                defaultMessage: 'Cancel editing data retention',
+              }
+            )}
+          >
             <FormattedMessage
               id="xpack.idxMgmt.dataStreams.editDataRetentionModal.cancelButtonLabel"
               defaultMessage="Cancel"