From c210e95d48662c9e0bbbb88e806b81975719da37 Mon Sep 17 00:00:00 2001
From: Elena Stoeva <59341489+ElenaStoeva@users.noreply.github.com>
Date: Fri, 27 Oct 2023 11:05:01 +0100
Subject: [PATCH] [Management] Improve a11y of icontips in nav bar (#169649)

Fixes https://github.com/elastic/kibana/issues/154418

## Summary

This PR improves a11y of the tooltips in the Management nav bar by
replacing `EuiToolTip` with `EuiIconTip`:

- The tooltips are now accessible by keyboard navigation only (pressing
TAB) - see video below.
- The tooltip icons are slightly bigger and more visible.




https://github.com/elastic/kibana/assets/59341489/12f85657-074a-41cf-b6e6-73bbbe0393be


<img width="1922" alt="Screenshot 2023-10-24 at 13 57 20"
src="https://github.com/elastic/kibana/assets/59341489/87fb5273-918f-4961-932d-d954ecda4404">
---
 .../management_sidebar_nav.tsx                | 22 +++++++++----------
 1 file changed, 10 insertions(+), 12 deletions(-)

diff --git a/src/plugins/management/public/components/management_sidebar_nav/management_sidebar_nav.tsx b/src/plugins/management/public/components/management_sidebar_nav/management_sidebar_nav.tsx
index 0cfcd81b57b2a..bcd693ac8f56e 100644
--- a/src/plugins/management/public/components/management_sidebar_nav/management_sidebar_nav.tsx
+++ b/src/plugins/management/public/components/management_sidebar_nav/management_sidebar_nav.tsx
@@ -9,7 +9,7 @@
 import React from 'react';
 import { sortBy } from 'lodash';
 
-import { EuiIcon, EuiSideNavItemType, EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui';
+import { EuiIcon, EuiSideNavItemType, EuiFlexGroup, EuiFlexItem, EuiIconTip } from '@elastic/eui';
 import { AppMountParameters } from '@kbn/core/public';
 import { reactRouterNavigate } from '@kbn/kibana-react-plugin/public';
 import { ManagementApp, ManagementSection } from '../../utils';
@@ -53,21 +53,19 @@ export const managementSidebarNav = ({
       }),
     }));
 
-  interface TooltipWrapperProps {
+  interface HeaderWrapperProps {
     text: string;
     tip?: string;
   }
 
-  const TooltipWrapper = ({ text, tip }: TooltipWrapperProps) => (
-    <EuiToolTip content={tip} position="right">
-      <EuiFlexGroup alignItems="center" gutterSize="xs" responsive={false}>
-        <EuiFlexItem grow={false}>{text}</EuiFlexItem>
+  const HeaderWrapper = ({ text, tip }: HeaderWrapperProps) => (
+    <EuiFlexGroup alignItems="center" gutterSize="xs" responsive={false}>
+      <EuiFlexItem grow={false}>{text}</EuiFlexItem>
 
-        <EuiFlexItem grow={false}>
-          <EuiIcon color="subdued" size="s" type="questionInCircle" />
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    </EuiToolTip>
+      <EuiFlexItem grow={false}>
+        <EuiIconTip content={tip} position="top" />
+      </EuiFlexItem>
+    </EuiFlexGroup>
   );
 
   const createNavItem = <T extends ManagementItem>(
@@ -78,7 +76,7 @@ export const managementSidebarNav = ({
 
     return {
       id: item.id,
-      name: item.tip ? <TooltipWrapper text={item.title} tip={item.tip} /> : item.title,
+      name: item.tip ? <HeaderWrapper text={item.title} tip={item.tip} /> : item.title,
       isSelected: item.id === selectedId,
       icon: iconType ? <EuiIcon type={iconType} size="m" /> : undefined,
       'data-test-subj': item.id,