[8.x] [Security Solution] [Security Assistant] Fixes Security Assista…

…nt accessibility (a11y) issues (#207122) (#207895) # Backport This will backport the following commits from `main` to `8.x`: - [[Security Solution] [Security Assistant] Fixes Security Assistant accessibility (a11y) issues (#207122)](#207122)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Andrew Macri <[email protected]>
elastic · Jan 22, 2025 · 19b8dc9 · 19b8dc9
1 parent d733fd6
commit 19b8dc9
Show file tree

Hide file tree

Showing 8 changed files with 240 additions and 9 deletions.
diff --git a/...elastic-assistant/impl/assistant/assistant_header/get_anonymization_tooltip/index.test.ts b/...elastic-assistant/impl/assistant/assistant_header/get_anonymization_tooltip/index.test.ts
@@ -0,0 +1,42 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { getAnonymizationTooltip } from '.';
+import {
+  SHOW_ANONYMIZED,
+  SHOW_REAL_VALUES,
+  THIS_CONVERSATION_DOES_NOT_INCLUDE_ANONYMIZED_FIELDS,
+} from '../translations';
+
+describe('getAnonymizationTooltip', () => {
+  it('returns the expected tooltip when conversationHasReplacements is false', () => {
+    const result = getAnonymizationTooltip({
+      conversationHasReplacements: false, // <-- false
+      showAnonymizedValuesChecked: false,
+    });
+
+    expect(result).toBe(THIS_CONVERSATION_DOES_NOT_INCLUDE_ANONYMIZED_FIELDS);
+  });
+
+  it('returns SHOW_REAL_VALUES when showAnonymizedValuesChecked is true', () => {
+    const result = getAnonymizationTooltip({
+      conversationHasReplacements: true,
+      showAnonymizedValuesChecked: true, // <-- true
+    });
+
+    expect(result).toBe(SHOW_REAL_VALUES);
+  });
+
+  it('returns SHOW_ANONYMIZED when showAnonymizedValuesChecked is false', () => {
+    const result = getAnonymizationTooltip({
+      conversationHasReplacements: true,
+      showAnonymizedValuesChecked: false, // <-- false
+    });
+
+    expect(result).toBe(SHOW_ANONYMIZED);
+  });
+});
diff --git a/.../kbn-elastic-assistant/impl/assistant/assistant_header/get_anonymization_tooltip/index.ts b/.../kbn-elastic-assistant/impl/assistant/assistant_header/get_anonymization_tooltip/index.ts
@@ -0,0 +1,22 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import * as i18n from '../translations';
+
+export const getAnonymizationTooltip = ({
+  conversationHasReplacements,
+  showAnonymizedValuesChecked,
+}: {
+  conversationHasReplacements: boolean;
+  showAnonymizedValuesChecked: boolean;
+}): string => {
+  if (!conversationHasReplacements) {
+    return i18n.THIS_CONVERSATION_DOES_NOT_INCLUDE_ANONYMIZED_FIELDS;
+  }
+
+  return showAnonymizedValuesChecked ? i18n.SHOW_REAL_VALUES : i18n.SHOW_ANONYMIZED;
+};
diff --git a/...form/packages/shared/kbn-elastic-assistant/impl/assistant/assistant_header/index.test.tsx b/...form/packages/shared/kbn-elastic-assistant/impl/assistant/assistant_header/index.test.tsx
@@ -6,12 +6,20 @@
  */
 
 import React from 'react';
-import { act, fireEvent, render } from '@testing-library/react';
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import userEvent, { PointerEventsCheckLevel } from '@testing-library/user-event';
+
 import { AssistantHeader } from '.';
 import { TestProviders } from '../../mock/test_providers/test_providers';
 import { alertConvo, emptyWelcomeConvo, welcomeConvo } from '../../mock/conversation';
 import { useLoadConnectors } from '../../connectorland/use_load_connectors';
 import { mockConnectors } from '../../mock/connectors';
+import {
+  CLOSE,
+  SHOW_ANONYMIZED,
+  SHOW_REAL_VALUES,
+  THIS_CONVERSATION_DOES_NOT_INCLUDE_ANONYMIZED_FIELDS,
+} from './translations';
 
 const onConversationSelected = jest.fn();
 const mockConversations = {
@@ -139,4 +147,103 @@ describe('AssistantHeader', () => {
       cTitle: alertConvo.title,
     });
   });
+
+  it('renders an accessible close button icon', () => {
+    const onCloseFlyout = jest.fn(); // required to render the close button
+
+    render(<AssistantHeader {...testProps} onCloseFlyout={onCloseFlyout} />, {
+      wrapper: TestProviders,
+    });
+
+    expect(screen.getByRole('button', { name: CLOSE })).toBeInTheDocument();
+  });
+
+  it('disables the anonymization toggle button when there are NO replacements', () => {
+    render(
+      <AssistantHeader
+        {...testProps}
+        selectedConversation={{ ...emptyWelcomeConvo, replacements: {} }} // <-- no replacements
+      />,
+      {
+        wrapper: TestProviders,
+      }
+    );
+
+    expect(screen.getByTestId('showAnonymizedValues')).toBeDisabled();
+  });
+
+  it('displays the expected anonymization toggle button tooltip when there are NO replacements', async () => {
+    render(
+      <AssistantHeader
+        {...testProps}
+        selectedConversation={{ ...emptyWelcomeConvo, replacements: {} }} // <-- no replacements
+      />,
+      {
+        wrapper: TestProviders,
+      }
+    );
+
+    await userEvent.hover(screen.getByTestId('showAnonymizedValues'), {
+      pointerEventsCheck: PointerEventsCheckLevel.Never,
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('showAnonymizedValuesTooltip')).toHaveTextContent(
+        THIS_CONVERSATION_DOES_NOT_INCLUDE_ANONYMIZED_FIELDS
+      );
+    });
+  });
+
+  it('enables the anonymization toggle button when there are replacements', () => {
+    render(
+      <AssistantHeader {...testProps} selectedConversation={alertConvo} />, // <-- conversation with replacements
+      {
+        wrapper: TestProviders,
+      }
+    );
+
+    expect(screen.getByTestId('showAnonymizedValues')).toBeEnabled();
+  });
+
+  it('displays the SHOW_ANONYMIZED toggle button tooltip when there are replacements and showAnonymizedValues is false', async () => {
+    render(
+      <AssistantHeader
+        {...testProps}
+        selectedConversation={alertConvo} // <-- conversation with replacements
+        showAnonymizedValues={false} // <-- false
+      />,
+      {
+        wrapper: TestProviders,
+      }
+    );
+
+    await userEvent.hover(screen.getByTestId('showAnonymizedValues'), {
+      pointerEventsCheck: PointerEventsCheckLevel.Never,
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('showAnonymizedValuesTooltip')).toHaveTextContent(SHOW_ANONYMIZED);
+    });
+  });
+
+  it('displays the SHOW_REAL_VALUES toggle button tooltip when there are replacements and showAnonymizedValues is true', async () => {
+    render(
+      <AssistantHeader
+        {...testProps}
+        selectedConversation={alertConvo} // <-- conversation with replacements
+        showAnonymizedValues={true} // <-- true
+      />,
+      {
+        wrapper: TestProviders,
+      }
+    );
+
+    await userEvent.hover(screen.getByTestId('showAnonymizedValues'), {
+      pointerEventsCheck: PointerEventsCheckLevel.Never,
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('showAnonymizedValuesTooltip')).toHaveTextContent(SHOW_REAL_VALUES);
+    });
+  });
 });
diff --git a/.../platform/packages/shared/kbn-elastic-assistant/impl/assistant/assistant_header/index.tsx b/.../platform/packages/shared/kbn-elastic-assistant/impl/assistant/assistant_header/index.tsx
@@ -26,6 +26,7 @@ import { FlyoutNavigation } from '../assistant_overlay/flyout_navigation';
 import { AssistantSettingsModal } from '../settings/assistant_settings_modal';
 import * as i18n from './translations';
 import { AIConnector } from '../../connectorland/connector_selector';
+import { getAnonymizationTooltip } from './get_anonymization_tooltip';
 import { SettingsContextMenu } from '../settings/settings_context_menu/settings_context_menu';
 
 interface OwnProps {
@@ -102,6 +103,12 @@ export const AssistantHeader: React.FC<Props> = ({
     [onConversationSelected]
   );
 
+  const conversationHasReplacements = !isEmpty(selectedConversation?.replacements);
+  const anonymizationTooltip = getAnonymizationTooltip({
+    conversationHasReplacements,
+    showAnonymizedValuesChecked,
+  });
+
   return (
     <>
       <FlyoutNavigation
@@ -134,6 +141,7 @@ export const AssistantHeader: React.FC<Props> = ({
           {onCloseFlyout && (
             <EuiFlexItem grow={false}>
               <EuiButtonIcon
+                aria-label={i18n.CLOSE}
                 data-test-subj="euiFlyoutCloseButton"
                 iconType="cross"
                 color="text"
@@ -182,9 +190,8 @@ export const AssistantHeader: React.FC<Props> = ({
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
                 <EuiToolTip
-                  content={
-                    showAnonymizedValuesChecked ? i18n.SHOW_REAL_VALUES : i18n.SHOW_ANONYMIZED
-                  }
+                  content={anonymizationTooltip}
+                  data-test-subj="showAnonymizedValuesTooltip"
                 >
                   <EuiButtonIcon
                     css={css`
@@ -193,12 +200,10 @@ export const AssistantHeader: React.FC<Props> = ({
                     display="base"
                     data-test-subj="showAnonymizedValues"
                     isSelected={showAnonymizedValuesChecked}
-                    aria-label={
-                      showAnonymizedValuesChecked ? i18n.SHOW_ANONYMIZED : i18n.SHOW_REAL_VALUES
-                    }
+                    aria-label={anonymizationTooltip}
                     iconType={showAnonymizedValuesChecked ? 'eye' : 'eyeClosed'}
                     onClick={onToggleShowAnonymizedValues}
-                    isDisabled={isEmpty(selectedConversation?.replacements)}
+                    disabled={!conversationHasReplacements}
                   />
                 </EuiToolTip>
               </EuiFlexItem>

diff --git a/...orm/packages/shared/kbn-elastic-assistant/impl/assistant/assistant_header/translations.ts b/...orm/packages/shared/kbn-elastic-assistant/impl/assistant/assistant_header/translations.ts
@@ -21,6 +21,13 @@ export const ANONYMIZATION = i18n.translate(
   }
 );
 
+export const CLOSE = i18n.translate(
+  'xpack.elasticAssistant.assistant.assistantHeader.closeButtonLabel',
+  {
+    defaultMessage: 'Close',
+  }
+);
+
 export const KNOWLEDGE_BASE = i18n.translate(
   'xpack.elasticAssistant.assistant.settings.knowledgeBase',
   {
@@ -56,6 +63,13 @@ export const SHOW_REAL_VALUES = i18n.translate(
   }
 );
 
+export const THIS_CONVERSATION_DOES_NOT_INCLUDE_ANONYMIZED_FIELDS = i18n.translate(
+  'xpack.elasticAssistant.assistant.settings.thisConversationDoesNotIncludeAnonymizedFieldsTooltip',
+  {
+    defaultMessage: 'This conversation does not include anonymized fields',
+  }
+);
+
 export const CANCEL_BUTTON_TEXT = i18n.translate(
   'xpack.elasticAssistant.assistant.resetConversationModal.cancelButtonText',
   {

diff --git a/...ic-assistant/impl/assistant/settings/settings_context_menu/settings_context_menu.test.tsx b/...ic-assistant/impl/assistant/settings/settings_context_menu/settings_context_menu.test.tsx
@@ -0,0 +1,25 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+
+import { TestProviders } from '../../../mock/test_providers/test_providers';
+import { SettingsContextMenu } from './settings_context_menu';
+import { AI_ASSISTANT_MENU } from './translations';
+
+describe('SettingsContextMenu', () => {
+  it('renders an accessible menu button icon', () => {
+    render(
+      <TestProviders>
+        <SettingsContextMenu />
+      </TestProviders>
+    );
+
+    expect(screen.getByRole('button', { name: AI_ASSISTANT_MENU })).toBeInTheDocument();
+  });
+});
diff --git a/...elastic-assistant/impl/assistant/settings/settings_context_menu/settings_context_menu.tsx b/...elastic-assistant/impl/assistant/settings/settings_context_menu/settings_context_menu.tsx
@@ -24,6 +24,7 @@ import { useAssistantContext } from '../../../..';
 import * as i18n from '../../assistant_header/translations';
 import { AlertsSettingsModal } from '../alerts_settings/alerts_settings_modal';
 import { KNOWLEDGE_BASE_TAB } from '../const';
+import { AI_ASSISTANT_MENU } from './translations';
 
 interface Params {
   isDisabled?: boolean;
@@ -168,7 +169,7 @@ export const SettingsContextMenu: React.FC<Params> = React.memo(
           button={
             <KnowledgeBaseTour>
               <EuiButtonIcon
-                aria-label="test"
+                aria-label={AI_ASSISTANT_MENU}
                 isDisabled={isDisabled}
                 iconType="boxesVertical"
                 onClick={onButtonClick}

diff --git a/...hared/kbn-elastic-assistant/impl/assistant/settings/settings_context_menu/translations.ts b/...hared/kbn-elastic-assistant/impl/assistant/settings/settings_context_menu/translations.ts
@@ -0,0 +1,15 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { i18n } from '@kbn/i18n';
+
+export const AI_ASSISTANT_MENU = i18n.translate(
+  'xpack.elasticAssistant.assistant.settings.settingsContextMenu.aiAssistantMenuAriaLabel',
+  {
+    defaultMessage: 'AI Assistant menu',
+  }
+);