[8.16] [Search][a11y] Announce success and error events for screen re…

…aders (#203555) (#204429) # Backport This will backport the following commits from `main` to `8.16`: - [[Search][a11y] Announce success and error events for screen readers (#203555)](#203555)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: José Luis González <joseluisgj@gmail.com>
elastic · Dec 16, 2024 · 8e78b8e · 8e78b8e
1 parent 165abc4
commit 8e78b8e
Show file tree

Hide file tree

Showing 8 changed files with 68 additions and 22 deletions.
diff --git a/...public/applications/enterprise_search_content/api/connector/delete_connector_api_logic.ts b/...public/applications/enterprise_search_content/api/connector/delete_connector_api_logic.ts
@@ -4,6 +4,7 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
+import { i18n } from '@kbn/i18n';
 
 import { DeleteConnectorResponse } from '../../../../../common/types/connectors';
 
@@ -12,30 +13,42 @@ import { HttpLogic } from '../../../shared/http';
 
 export interface DeleteConnectorApiLogicArgs {
   connectorId: string;
+  connectorName: string;
   shouldDeleteIndex: boolean;
 }
 
 export interface DeleteConnectorApiLogicResponse {
-  acknowledged: boolean;
+  connectorName: string;
 }
 
 export const deleteConnector = async ({
   connectorId,
+  connectorName,
   shouldDeleteIndex = false,
-}: DeleteConnectorApiLogicArgs) => {
-  return await HttpLogic.values.http.delete(
-    `/internal/enterprise_search/connectors/${connectorId}`,
-    {
-      query: {
-        shouldDeleteIndex,
-      },
-    }
-  );
+}: DeleteConnectorApiLogicArgs): Promise<DeleteConnectorApiLogicResponse> => {
+  await HttpLogic.values.http.delete(`/internal/enterprise_search/connectors/${connectorId}`, {
+    query: {
+      shouldDeleteIndex,
+    },
+  });
+  return { connectorName };
 };
 
 export const DeleteConnectorApiLogic = createApiLogic(
   ['delete_connector_api_logic'],
-  deleteConnector
+  deleteConnector,
+  {
+    showSuccessFlashFn: ({ connectorName }) =>
+      i18n.translate(
+        'xpack.enterpriseSearch.content.connectors.deleteConnector.successToast.title',
+        {
+          defaultMessage: 'The connector {connectorName} was successfully deleted',
+          values: {
+            connectorName,
+          },
+        }
+      ),
+  }
 );
 
 export type DeleteConnectorApiLogicActions = Actions<

diff --git a/...c/applications/enterprise_search_content/components/connectors/delete_connector_modal.tsx b/...c/applications/enterprise_search_content/components/connectors/delete_connector_modal.tsx
@@ -46,7 +46,7 @@ export const DeleteConnectorModal: React.FC<DeleteConnectorModalProps> = ({ isCr
     isDeleteModalVisible,
   } = useValues(ConnectorsLogic);
 
-  const connectorName = isCrawler ? deleteModalIndexName : deleteModalConnectorName;
+  const connectorName = (isCrawler ? deleteModalIndexName : deleteModalConnectorName) || '';
 
   const [inputConnectorName, setInputConnectorName] = useState('');
   const [shouldDeleteIndex, setShouldDeleteIndex] = useState(false);
@@ -80,6 +80,7 @@ export const DeleteConnectorModal: React.FC<DeleteConnectorModalProps> = ({ isCr
         } else {
           deleteConnector({
             connectorId,
+            connectorName,
             shouldDeleteIndex,
           });
           setConnectorUiOptions(omit(connectorUiOptions, connectorId));

diff --git a/...tions/enterprise_search_content/components/search_index/pipelines/pipelines_logic.test.ts b/...tions/enterprise_search_content/components/search_index/pipelines/pipelines_logic.test.ts
@@ -138,7 +138,10 @@ describe('PipelinesLogic', () => {
     describe('apiSuccess', () => {
       it('should call flashSuccessToast', () => {
         PipelinesLogic.actions.apiSuccess({ connectorId: 'a', pipeline: newPipeline });
-        expect(flashSuccessToast).toHaveBeenCalledWith('Pipelines updated');
+        expect(flashSuccessToast).toHaveBeenCalledWith('Pipelines updated', {
+          'aria-live': 'assertive',
+          role: 'alert',
+        });
       });
     });
     describe('createCustomPipelineError', () => {
@@ -154,7 +157,10 @@ describe('PipelinesLogic', () => {
         PipelinesLogic.actions.fetchCustomPipeline = jest.fn();
         PipelinesLogic.actions.fetchIndexApiSuccess(connectorIndex);
         PipelinesLogic.actions.createCustomPipelineSuccess({ [connectorIndex.name]: {} });
-        expect(flashSuccessToast).toHaveBeenCalledWith('Custom pipeline created');
+        expect(flashSuccessToast).toHaveBeenCalledWith('Custom pipeline created', {
+          'aria-live': 'assertive',
+          role: 'alert',
+        });
         expect(PipelinesLogic.actions.setPipelineState).toHaveBeenCalledWith({
           ...PipelinesLogic.values.pipelineState,
           name: connectorIndex.name,

diff --git a/...k/plugins/enterprise_search/public/applications/shared/api_logic/create_api_logic.test.ts b/...k/plugins/enterprise_search/public/applications/shared/api_logic/create_api_logic.test.ts
@@ -91,7 +91,10 @@ describe('CreateApiLogic', () => {
         const { mount: messageMount } = messageLogic;
         messageMount();
         messageLogic.actions.apiSuccess({});
-        expect(flashSuccessToast).toHaveBeenCalledWith('test message');
+        expect(flashSuccessToast).toHaveBeenCalledWith('test message', {
+          'aria-live': 'assertive',
+          role: 'alert',
+        });
       });
     });
     describe('apiError', () => {

diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/api_logic/create_api_logic.ts b/x-pack/plugins/enterprise_search/public/applications/shared/api_logic/create_api_logic.ts
@@ -59,7 +59,10 @@ export const createApiLogic = <Result, Args>(
       },
       apiSuccess: (result) => {
         if (options.showSuccessFlashFn) {
-          flashSuccessToast(options.showSuccessFlashFn(result));
+          flashSuccessToast(options.showSuccessFlashFn(result), {
+            'aria-live': 'assertive',
+            role: 'alert',
+          });
         }
       },
       makeRequest: async (args, breakpoint) => {

diff --git a/...ins/enterprise_search/public/applications/shared/flash_messages/handle_api_errors.test.ts b/...ins/enterprise_search/public/applications/shared/flash_messages/handle_api_errors.test.ts
@@ -103,9 +103,18 @@ describe('toastAPIErrors', () => {
   it('converts API errors into flash messages', () => {
     toastAPIErrors(mockHttpError);
 
-    expect(flashErrorToast).toHaveBeenNthCalledWith(1, 'Could not find X');
-    expect(flashErrorToast).toHaveBeenNthCalledWith(2, 'Could not find Y');
-    expect(flashErrorToast).toHaveBeenNthCalledWith(3, 'Something else bad happened');
+    expect(flashErrorToast).toHaveBeenNthCalledWith(1, 'Could not find X', {
+      'aria-live': 'assertive',
+      role: 'alert',
+    });
+    expect(flashErrorToast).toHaveBeenNthCalledWith(2, 'Could not find Y', {
+      'aria-live': 'assertive',
+      role: 'alert',
+    });
+    expect(flashErrorToast).toHaveBeenNthCalledWith(3, 'Something else bad happened', {
+      'aria-live': 'assertive',
+      role: 'alert',
+    });
   });
 
   it('falls back to the basic message for http responses without an errors array', () => {
@@ -117,7 +126,10 @@ describe('toastAPIErrors', () => {
       },
     } as any);
 
-    expect(flashErrorToast).toHaveBeenCalledWith('Not Found');
+    expect(flashErrorToast).toHaveBeenCalledWith('Not Found', {
+      'aria-live': 'assertive',
+      role: 'alert',
+    });
   });
 
   it('displays a generic error message and re-throws non-API errors', () => {
@@ -127,7 +139,10 @@ describe('toastAPIErrors', () => {
       toastAPIErrors(error as any);
     }).toThrowError(error);
 
-    expect(flashErrorToast).toHaveBeenCalledWith(expect.any(String));
+    expect(flashErrorToast).toHaveBeenCalledWith(expect.any(String), {
+      'aria-live': 'assertive',
+      role: 'alert',
+    });
   });
 });
 

diff --git a/.../plugins/enterprise_search/public/applications/shared/flash_messages/handle_api_errors.ts b/.../plugins/enterprise_search/public/applications/shared/flash_messages/handle_api_errors.ts
@@ -74,7 +74,10 @@ export const toastAPIErrors = (response: HttpResponse<ErrorResponse>) => {
   const messages = getErrorsFromHttpResponse(response);
 
   for (const message of messages) {
-    flashErrorToast(message);
+    flashErrorToast(message, {
+      'aria-live': 'assertive',
+      role: 'alert',
+    });
   }
   // If this was a programming error or a failed request (such as a CORS) error,
   // we rethrow the error so it shows up in the developer console

diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/flash_messages/types.ts b/x-pack/plugins/enterprise_search/public/applications/shared/flash_messages/types.ts
@@ -19,7 +19,9 @@ export interface IFlashMessage {
 
 // @see EuiGlobalToastListToast for more props
 export interface ToastOptions {
+  'aria-live'?: 'assertive' | 'polite'; // Defaults to 'polite'
   iconType?: string;
+  role?: string; // Defaults to the log role. The alert role can be considered only if all toasts in this list will require immediate user attention.
   text?: string; // Additional text below the message/title, same as EuiToast['text']
   toastLifeTimeMs?: number; // Allows customizing per-toast timeout
 }