Fix primary actions not correctly becoming visible on keyboard focus

elastic · Nov 17, 2023 · bce2abb · bce2abb
1 parent 202261c
commit bce2abb
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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%);
     }
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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