fix: [Search:Playground page]Tooltip for Instructions is not accessib…

…le via keyboard (#199607) Closes: #199493 ### Description Tooltip present for Instructions is not visible when reaching the field via keyboard. Tooltips which are visible for the user using mouse, should be also visible for the users using only keyboard. ### What was changed?: 1. `EuiIToolkip` was replaced to move a11y-friendly `EuiIconTip` ### Screen: https://github.com/user-attachments/assets/2d5fbc7b-0d80-4c0d-8e99-2ddd8aa9e1cf
elastic · Nov 12, 2024 · 515dbe5 · 515dbe5
1 parent 5b9908e
commit 515dbe5
Showing 1 changed file with 14 additions and 15 deletions.
diff --git a/...ck/plugins/search_playground/public/components/summarization_panel/instructions_field.tsx b/...ck/plugins/search_playground/public/components/summarization_panel/instructions_field.tsx
@@ -7,7 +7,7 @@
 
 import React from 'react';
 
-import { EuiFormRow, EuiIcon, EuiTextArea, EuiToolTip } from '@elastic/eui';
+import { EuiFormRow, EuiTextArea, EuiIconTip } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { isEmpty } from 'lodash';
 import { useUsageTracker } from '../../hooks/use_usage_tracker';
@@ -37,21 +37,20 @@ export const InstructionsField: React.FC<InstructionsFieldProps> = ({ value, onC
   return (
     <EuiFormRow
       label={
-        <EuiToolTip
-          content={i18n.translate('xpack.searchPlayground.sidebar.instructionsField.help', {
-            defaultMessage:
-              'These preliminary instructions and guidelines define the behavior of the model. Be clear and specific for best results.',
+        <span>
+          {i18n.translate('xpack.searchPlayground.sidebar.instructionsField.label', {
+            defaultMessage: 'Instructions',
           })}
-        >
-          <>
-            <span>
-              {i18n.translate('xpack.searchPlayground.sidebar.instructionsField.label', {
-                defaultMessage: 'Instructions',
-              })}
-            </span>
-            <EuiIcon type="questionInCircle" color="subdued" />
-          </>
-        </EuiToolTip>
+          &nbsp;
+          <EuiIconTip
+            type="questionInCircle"
+            color="subdued"
+            content={i18n.translate('xpack.searchPlayground.sidebar.instructionsField.help', {
+              defaultMessage:
+                'These preliminary instructions and guidelines define the behavior of the model. Be clear and specific for best results.',
+            })}
+          />
+        </span>
       }
       fullWidth
     >