From bce2abb69d36479a93b726eeb1bd8633b8d0cb0f Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Thu, 16 Nov 2023 20:49:54 -0800
Subject: [PATCH] Fix primary actions not correctly becoming visible on
 keyboard focus

---
 changelogs/upcoming/7373.md                        |  1 +
 src-docs/src/views/tables/actions/actions.tsx      |  4 +++-
 src/components/basic_table/default_item_action.tsx |  3 +++
 src/components/table/_table.scss                   | 13 ++++---------
 4 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/changelogs/upcoming/7373.md b/changelogs/upcoming/7373.md
index f317a785f999..6d59952052ed 100644
--- a/changelogs/upcoming/7373.md
+++ b/changelogs/upcoming/7373.md
@@ -13,3 +13,4 @@
 **Accessibility**
 
 - Fixed `EuiBasicTable` and `EuiInMemoryTable` actions not correctly reading out action descriptions to screen readers
+- Fixed `EuiBasicTable` and `EuiInMemoryTable` primary actions not visibly appearing on keyboard focus
diff --git a/src-docs/src/views/tables/actions/actions.tsx b/src-docs/src/views/tables/actions/actions.tsx
index c446b75a0864..77a9faefbe12 100644
--- a/src-docs/src/views/tables/actions/actions.tsx
+++ b/src-docs/src/views/tables/actions/actions.tsx
@@ -189,6 +189,7 @@ export default () => {
           icon: 'editorLink',
           color: 'primary',
           type: 'icon',
+          enabled: ({ online }) => !!online,
           href: ({ id }) => `${window.location.href}?id=${id}`,
           target: '_self',
           'data-test-subj': 'action-outboundlink',
@@ -218,7 +219,8 @@ export default () => {
           {
             name: 'Edit',
             isPrimary: true,
-            available: ({ online }: { online: boolean }) => !online,
+            available: ({ online }) => !online,
+            enabled: ({ online }) => !!online,
             description: 'Edit this user',
             icon: 'pencil',
             type: 'icon',
diff --git a/src/components/basic_table/default_item_action.tsx b/src/components/basic_table/default_item_action.tsx
index d1732b9fb1c8..7b71419502ab 100644
--- a/src/components/basic_table/default_item_action.tsx
+++ b/src/components/basic_table/default_item_action.tsx
@@ -81,6 +81,9 @@ export const DefaultItemAction = <T,>({
         href={href}
         target={action.target}
         data-test-subj={dataTestSubj}
+        // If action is disabled, the normal tooltip can't show - attempt to
+        // provide some amount of affordance with a browser title tooltip
+        title={!enabled ? tooltipContent : undefined}
       />
     );
     // actionContent (action.name) is a ReactNode and must be rendered
diff --git a/src/components/table/_table.scss b/src/components/table/_table.scss
index b433ea621299..1cf0c3422acd 100644
--- a/src/components/table/_table.scss
+++ b/src/components/table/_table.scss
@@ -206,20 +206,15 @@
       transition: opacity $euiAnimSpeedNormal $euiAnimSlightResistance, filter $euiAnimSpeedNormal $euiAnimSlightResistance;
     }
 
-    .expandedItemActions__completelyHide,
-    .expandedItemActions__completelyHide:disabled,
-    .expandedItemActions__completelyHide:disabled:hover,
-    .expandedItemActions__completelyHide:disabled:focus,
-    .euiTableRow:hover & .expandedItemActions__completelyHide:disabled {
+    .expandedItemActions__completelyHide {
       filter: grayscale(0%);
       opacity: 0;
     }
   }
 
-  &:hover .euiTableCellContent--showOnHover .euiTableCellContent__hoverItem:not(:disabled) {
-    &,
-    &:hover,
-    &:focus {
+  &:hover .euiTableCellContent--showOnHover,
+  .euiTableCellContent--showOnHover:focus-within {
+    .euiTableCellContent__hoverItem {
       opacity: 1;
       filter: grayscale(0%);
     }