From cbcd154c3126cebe8c83a3e1903d66030f94a56a Mon Sep 17 00:00:00 2001
From: Alexey Antonov <alexwizp@gmail.com>
Date: Fri, 5 Apr 2024 20:40:36 +0300
Subject: [PATCH] fix: [Integrations > Install integration only][KEYBOARD]:
 Tooltips must be keyboard accessible (#180174)

Closes: https://github.com/elastic/security-team/issues/8982

## Description

The [axe browser plugin](https://deque.com/axe) is reporting some
scrollable regions are not keyboard accessible. This isn't happening in
all integrations, but did happen in the Amazon DynamoDB, so I'll use
that as my example. Screenshot below.

### Steps to recreate

1. Create a new Security Serverless project if none exist
2. When the project is ready, open it and go to Integrations, under the
Project Settings in the lower left navigation
3. Search for DynamoDB in the Integrations, and click on the card
4. Click "Add Amazon DynamoDB" to load the prompt page
5. Click "Add integration only (skip agent installation)"
6. Tab through the first few form fields, and verify you cannot expand
the tooltips without hovering them

### What was done?:

1. `EuiToolTip` was replaced to `EuiIconTip`


### Screens

<img width="534" alt="image"
src="https://github.com/elastic/kibana/assets/20072247/5c5ad873-0c79-4fed-94b1-5dd614bbe6b3">
---
 .../components/package_policy_input_var_field.tsx     | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_var_field.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_var_field.tsx
index 064e13ade5e81..eb4e6dd5f5c69 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_var_field.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_var_field.tsx
@@ -24,8 +24,7 @@ import {
   EuiFlexItem,
   EuiButtonEmpty,
   EuiLink,
-  EuiToolTip,
-  EuiIcon,
+  EuiIconTip,
 } from '@elastic/eui';
 import styled from 'styled-components';
 
@@ -344,16 +343,16 @@ const SecretFieldLabel = ({ fieldLabel }: { fieldLabel: string }) => {
           {fieldLabel}
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiToolTip
+          <EuiIconTip
+            type="iInCircle"
+            position="top"
             content={
               <FormattedMessage
                 id="xpack.fleet.createPackagePolicy.stepConfigure.secretLearnMorePopoverContent"
                 defaultMessage="This value is a secret. After you save this integration policy, you won't be able to view the value again."
               />
             }
-          >
-            <EuiIcon aria-label="Secret value" type="questionInCircle" color="subdued" />
-          </EuiToolTip>
+          />
         </EuiFlexItem>
       </EuiFlexGroup>