[9.2] [Search][A11y] Search application disable add selected button when error in selected indices (#241031) (#241626)

# Backport

This will backport the following commits from `main` to `9.2`:
- [[Search][A11y] Search application disable add selected button when
error in selected indices
(#241031)](#241031)

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

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

<!--BACKPORT [{"author":{"name":"Saarika
Bhasi","email":"[email protected]"},"sourceCommit":{"committedDate":"2025-11-03T13:40:17Z","message":"[Search][A11y]
Search application disable add selected button when error in selected
indices (#241031)\n\n## Summary\n\nFix A11y issue. When there is an
error in the search application -> add\nnew indices-> select indices
combo box, add selected button should
be\ndisabled.\n\n**Preconditions**\nStateful Search Applications ->
Content page is opened.\nSearch application is added.\nI used Mac voice
over or Screen Reader (NVDA). \n\n**To reproduce:** \n\n1. Using only
keyboard Navigate to Add new indices button by pressing\nTab key.\n2.
Press Enter.\n3. Navigate to Select searchable indices field.\n4. Enter
any text (f.e.: test).\n5. Navigate to Add selected button.\n6. Press
Enter.\n7. Observe screen reader.\n8. Press Tab key.\n9. Observe the
page.\n\n### Screenshot\n<img width=\"2052\" height=\"1250\"
alt=\"Screenshot 2025-10-28 at 3
51\n07 PM\"\nsrc=\"https://github.com/user-attachments/assets/c07c5c75-f3ca-47b9-ae2f-6ba2e972d103\"\n/>\n\n\n###
Checklist\n\n- [x] Any text added follows [EUI's
writing\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\nsentence case text and includes
[i18n\nsupport](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)","sha":"221078a04ad005ccc8e9fa3f33792839b5bf2a3c","branchLabelMapping":{"^v9.3.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","backport:all-open","v9.3.0"],"title":"[Search][A11y]
Search application disable add selected button when error in selected
indices","number":241031,"url":"https://github.com/elastic/kibana/pull/241031","mergeCommit":{"message":"[Search][A11y]
Search application disable add selected button when error in selected
indices (#241031)\n\n## Summary\n\nFix A11y issue. When there is an
error in the search application -> add\nnew indices-> select indices
combo box, add selected button should
be\ndisabled.\n\n**Preconditions**\nStateful Search Applications ->
Content page is opened.\nSearch application is added.\nI used Mac voice
over or Screen Reader (NVDA). \n\n**To reproduce:** \n\n1. Using only
keyboard Navigate to Add new indices button by pressing\nTab key.\n2.
Press Enter.\n3. Navigate to Select searchable indices field.\n4. Enter
any text (f.e.: test).\n5. Navigate to Add selected button.\n6. Press
Enter.\n7. Observe screen reader.\n8. Press Tab key.\n9. Observe the
page.\n\n### Screenshot\n<img width=\"2052\" height=\"1250\"
alt=\"Screenshot 2025-10-28 at 3
51\n07 PM\"\nsrc=\"https://github.com/user-attachments/assets/c07c5c75-f3ca-47b9-ae2f-6ba2e972d103\"\n/>\n\n\n###
Checklist\n\n- [x] Any text added follows [EUI's
writing\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\nsentence case text and includes
[i18n\nsupport](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)","sha":"221078a04ad005ccc8e9fa3f33792839b5bf2a3c"}},"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/241031","number":241031,"mergeCommit":{"message":"[Search][A11y]
Search application disable add selected button when error in selected
indices (#241031)\n\n## Summary\n\nFix A11y issue. When there is an
error in the search application -> add\nnew indices-> select indices
combo box, add selected button should
be\ndisabled.\n\n**Preconditions**\nStateful Search Applications ->
Content page is opened.\nSearch application is added.\nI used Mac voice
over or Screen Reader (NVDA). \n\n**To reproduce:** \n\n1. Using only
keyboard Navigate to Add new indices button by pressing\nTab key.\n2.
Press Enter.\n3. Navigate to Select searchable indices field.\n4. Enter
any text (f.e.: test).\n5. Navigate to Add selected button.\n6. Press
Enter.\n7. Observe screen reader.\n8. Press Tab key.\n9. Observe the
page.\n\n### Screenshot\n<img width=\"2052\" height=\"1250\"
alt=\"Screenshot 2025-10-28 at 3
51\n07 PM\"\nsrc=\"https://github.com/user-attachments/assets/c07c5c75-f3ca-47b9-ae2f-6ba2e972d103\"\n/>\n\n\n###
Checklist\n\n- [x] Any text added follows [EUI's
writing\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\nsentence case text and includes
[i18n\nsupport](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)","sha":"221078a04ad005ccc8e9fa3f33792839b5bf2a3c"}}]}]
BACKPORT-->

Co-authored-by: Saarika Bhasi <[email protected]>

Author: kibanamachine

x-pack/solutions/search/plugins/enterprise_search/public/applications/applications/components/search_application/add_indices_flyout.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 
 import { useActions, useValues } from 'kea';
 
@@ -63,6 +63,8 @@ export const AddIndicesFlyout: React.FC<AddIndicesFlyoutProps> = ({ onClose }) =
     [setSelectedIndices]
   );
 
+  const [isIndicesSelectComboBoxDisabled, setIndicesSelectComboBoxDisabled] =
+    useState<boolean>(false);
   return (
     <EuiFlyout onClose={onClose} aria-labelledby={modalTitleId}>
       <EuiFlyoutHeader hasBorder>
@@ -102,6 +104,7 @@ export const AddIndicesFlyout: React.FC<AddIndicesFlyoutProps> = ({ onClose }) =
             'xpack.enterpriseSearch.searchApplications.searchApplication.indices.addIndicesFlyout.selectableLabel',
             { defaultMessage: 'Select searchable indices' }
           )}
+          setIndicesSelectComboBoxDisabled={setIndicesSelectComboBoxDisabled}
         />
       </EuiFlyoutBody>
       <EuiFlyoutFooter>
@@ -113,6 +116,7 @@ export const AddIndicesFlyout: React.FC<AddIndicesFlyoutProps> = ({ onClose }) =
               data-telemetry-id="entSearchApplications-indices-addNewIndices-submit"
               iconType="plusInCircle"
               onClick={submitSelectedIndices}
+              disabled={isIndicesSelectComboBoxDisabled}
             >
               {i18n.translate(
                 'xpack.enterpriseSearch.searchApplications.searchApplication.indices.addIndicesFlyout.submitButton',

x-pack/solutions/search/plugins/enterprise_search/public/applications/applications/components/search_applications/components/indices_select_combobox.tsx

@@ -37,13 +37,22 @@ export type IndicesSelectComboBoxProps = Omit<
   'data-telemetry-id'?: string;
   ignoredOptions?: string[];
   label?: string;
+  setIndicesSelectComboBoxDisabled?: (isInvalid: boolean) => void;
 };
 
-export const IndicesSelectComboBox = ({ ignoredOptions, ...props }: IndicesSelectComboBoxProps) => {
+export const IndicesSelectComboBox = ({
+  setIndicesSelectComboBoxDisabled,
+  ignoredOptions,
+  ...props
+}: IndicesSelectComboBoxProps) => {
   const [searchQuery, setSearchQuery] = useState<string | undefined>(undefined);
   const { makeRequest } = useActions(FetchIndicesForSearchApplicationsAPILogic);
   const { status, data } = useValues(FetchIndicesForSearchApplicationsAPILogic);
   const isInvalid = Boolean(searchQuery && !props.selectedOptions?.length);
+  useEffect(() => {
+    if (!setIndicesSelectComboBoxDisabled) return;
+    setIndicesSelectComboBoxDisabled(isInvalid);
+  }, [isInvalid]);
 
   useEffect(() => {
     makeRequest({ searchQuery });