[8.13] fix: [Rules > Detection rules][AXE-CORE]: Interactive contr…

…ols must not be nested (elastic#177710) (elastic#178240) # Backport This will backport the following commits from `main` to `8.13`: - [fix: [Rules > Detection rules][AXE-CORE]: Interactive controls must not be nested (elastic#177710)](elastic#177710)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Alexey Antonov <[email protected]>
kibanamachine · Mar 7, 2024 · 8f94eb0 · 8f94eb0
1 parent 03636de
commit 8f94eb0
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 41 deletions.
diff --git a/...ion/public/detection_engine/rule_management_ui/components/rules_table/popover_tooltip.tsx b/...ion/public/detection_engine/rule_management_ui/components/rules_table/popover_tooltip.tsx
@@ -5,39 +5,61 @@
  * 2.0.
  */
 
-import React, { useState } from 'react';
-import { EuiPopover, EuiButtonIcon } from '@elastic/eui';
+import React, { useState, useCallback } from 'react';
+import type { EuiIconProps, IconColor } from '@elastic/eui';
+import { EuiIcon, EuiPopover, keys } from '@elastic/eui';
 import * as i18n from '../../../../detections/pages/detection_engine/rules/translations';
 
 interface PopoverTooltipProps {
   columnName: string;
   children: React.ReactNode;
+  anchorColor?: IconColor;
 }
 
 /**
  * Table column tooltip component utilizing EuiPopover for rich content like documentation links
  * @param columnName string Name of column to use as aria-label of button
  * @param children React.ReactNode of content to display in popover tooltip
  */
-const PopoverTooltipComponent = ({ columnName, children }: PopoverTooltipProps) => {
+const PopoverTooltipComponent = ({
+  columnName,
+  children,
+  anchorColor = 'primary',
+}: PopoverTooltipProps) => {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 
+  const onClick: EuiIconProps['onClick'] = useCallback(
+    (event) => {
+      setIsPopoverOpen(!isPopoverOpen);
+      event.stopPropagation();
+    },
+    [isPopoverOpen]
+  );
+
+  const onKeyDown: EuiIconProps['onKeyDown'] = useCallback(
+    (event) => {
+      if (keys.ENTER === event.key) {
+        setIsPopoverOpen(!isPopoverOpen);
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    },
+    [isPopoverOpen]
+  );
+
   return (
     <EuiPopover
       anchorPosition={'upCenter'}
       isOpen={isPopoverOpen}
       closePopover={() => setIsPopoverOpen(false)}
       button={
-        <EuiButtonIcon
+        <EuiIcon
           aria-label={i18n.POPOVER_TOOLTIP_ARIA_LABEL(columnName)}
-          onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
-            setIsPopoverOpen(!isPopoverOpen);
-            event.stopPropagation();
-          }}
-          size="xs"
-          color="primary"
-          iconType="questionInCircle"
-          style={{ height: 'auto' }}
+          tabIndex={0}
+          onClick={onClick}
+          onKeyDown={onKeyDown}
+          color={anchorColor}
+          type="questionInCircle"
         />
       }
     >

diff --git a/...ction_engine/rule_management_ui/components/rules_table/table_header_tooltip_cell.test.tsx b/...ction_engine/rule_management_ui/components/rules_table/table_header_tooltip_cell.test.tsx
@@ -12,7 +12,7 @@ import { TableHeaderTooltipCell } from './table_header_tooltip_cell';
 import { render, screen, fireEvent } from '@testing-library/react';
 
 describe('Component TableHeaderTooltipCell', () => {
-  it('shoud render text with icon and tooltip', async () => {
+  it('should render text with icon and tooltip', async () => {
     render(<TableHeaderTooltipCell title="test title" tooltipContent="test tooltip content" />);
 
     expect(screen.getByText('test title')).toBeInTheDocument();
@@ -22,7 +22,7 @@ describe('Component TableHeaderTooltipCell', () => {
     expect(await screen.findByText('test tooltip content')).toBeInTheDocument();
   });
 
-  it('shoud render test element as custom tooltip', () => {
+  it('should render test element as custom tooltip', () => {
     render(
       <TableHeaderTooltipCell
         title="test title"

diff --git a/.../detection_engine/rule_management_ui/components/rules_table/table_header_tooltip_cell.tsx b/.../detection_engine/rule_management_ui/components/rules_table/table_header_tooltip_cell.tsx
@@ -7,7 +7,7 @@
 
 import React from 'react';
 
-import { EuiToolTip, EuiIcon, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiIconTip, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 
 interface Props {
   title: string;
@@ -28,15 +28,15 @@ const TableHeaderTooltipCellComponent = ({ title, tooltipContent, customTooltip
       <span className="eui-textTruncate">{title}</span>
     </EuiFlexItem>
     {customTooltip ?? (
-      <EuiToolTip content={tooltipContent}>
-        <EuiIcon
-          data-test-subj="tableHeaderIcon"
-          size="m"
-          color="subdued"
-          type="questionInCircle"
-          style={{ marginLeft: 4 }}
-        />
-      </EuiToolTip>
+      <EuiIconTip
+        content={tooltipContent}
+        type="questionInCircle"
+        color="subdued"
+        anchorProps={{
+          css: { marginLeft: 4 },
+          'data-test-subj': 'tableHeaderIcon',
+        }}
+      />
     )}
   </EuiFlexGroup>
 );

diff --git a/...olution/public/detection_engine/rule_management_ui/components/rules_table/use_columns.tsx b/...olution/public/detection_engine/rule_management_ui/components/rules_table/use_columns.tsx
@@ -433,24 +433,19 @@ export const useMonitoringColumns = ({
             title={i18n.COLUMN_GAP}
             customTooltip={
               <div style={{ maxWidth: '20px' }}>
-                <PopoverTooltip columnName={i18n.COLUMN_GAP}>
+                <PopoverTooltip columnName={i18n.COLUMN_GAP} anchorColor="subdued">
                   <EuiText style={{ width: 300 }}>
-                    <p>
-                      <FormattedMessage
-                        defaultMessage="Duration of most recent gap in Rule execution. Adjust Rule look-back or {seeDocs} for mitigating gaps."
-                        id="xpack.securitySolution.detectionEngine.rules.allRules.columns.gapTooltip"
-                        values={{
-                          seeDocs: (
-                            <EuiLink
-                              href={`${docLinks.links.siem.troubleshootGaps}`}
-                              target="_blank"
-                            >
-                              {i18n.COLUMN_GAP_TOOLTIP_SEE_DOCUMENTATION}
-                            </EuiLink>
-                          ),
-                        }}
-                      />
-                    </p>
+                    <FormattedMessage
+                      defaultMessage="Duration of most recent gap in Rule execution. Adjust Rule look-back or {seeDocs} for mitigating gaps."
+                      id="xpack.securitySolution.detectionEngine.rules.allRules.columns.gapTooltip"
+                      values={{
+                        seeDocs: (
+                          <EuiLink href={`${docLinks.links.siem.troubleshootGaps}`} target="_blank">
+                            {i18n.COLUMN_GAP_TOOLTIP_SEE_DOCUMENTATION}
+                          </EuiLink>
+                        ),
+                      }}
+                    />
                   </EuiText>
                 </PopoverTooltip>
               </div>