diff --git a/packages/eui/changelogs/upcoming/8134.md b/packages/eui/changelogs/upcoming/8134.md
new file mode 100644
index 00000000000..2e5c8af863d
--- /dev/null
+++ b/packages/eui/changelogs/upcoming/8134.md
@@ -0,0 +1,19 @@
+
+## [Unreleased]
+
+### Added
+- **Wrapper Container for Disabled Items:**
+ - Introduced a higher-level wrapper with `cursor: not-allowed` to properly indicate the disabled status of items.
+ - Added the `default_item_action.styles.ts` file to house additional styles for this and potential future enhancements.
+
+### Removed
+- **Native `title` Option for Disabled Items:**
+ - Removed condition to show tooltip when action item is disabled.
+ - Removed the display of the native `title` attribute when an item is disabled.
+
+### Fixed
+- **`not-allowed` Cursor Behavior:**
+ - Addressed an issue where the `user-select: none` property was overriding the `not-allowed` status. The solution involved applying the cursor style to the wrapper container, ensuring the correct cursor is displayed.
+
+### Visual Improvements
+- Enhanced the disabled state representation with clear visual feedback, including the proper cursor icon and simplified styles.
diff --git a/packages/eui/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap b/packages/eui/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap
index 8f693343da0..7e5fda4ff04 100644
--- a/packages/eui/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap
+++ b/packages/eui/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap
@@ -485,42 +485,50 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
-
-
-
-
+
+
+
-
-
+
+
+
-
-
-
-
+
+
+
-
-
+
+
+
-
-
-
-
+
+
+
-
-
+
+
+
-
-
+
+
+
`;
exports[`DefaultItemAction renders an EuiButtonIcon with screen reader text when \`type="icon"\` 1`] = `
-
-
-
- showOnHover
+
+ showOnHover
+
-
-
-
+
+
+
`;
diff --git a/packages/eui/src/components/basic_table/basic_table.styles.ts b/packages/eui/src/components/basic_table/basic_table.styles.ts
index 2aaea2280e0..21810ce4395 100644
--- a/packages/eui/src/components/basic_table/basic_table.styles.ts
+++ b/packages/eui/src/components/basic_table/basic_table.styles.ts
@@ -57,3 +57,7 @@ export const euiBasicTableBodyLoading = ({ euiTheme }: UseEuiTheme) => css`
export const safariLoadingWorkaround = css`
position: relative;
`;
+
+export const iconButtonWrapper = css`
+ cursor: not-allowed;
+`;
diff --git a/packages/eui/src/components/basic_table/default_item_action.styles.ts b/packages/eui/src/components/basic_table/default_item_action.styles.ts
new file mode 100644
index 00000000000..ccdc1e8573a
--- /dev/null
+++ b/packages/eui/src/components/basic_table/default_item_action.styles.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+
+export const euiIconButtonWrapperStyles = () => {
+ return {
+ isDisabled: css`
+ cursor: not-allowed;
+ `,
+ };
+};
diff --git a/packages/eui/src/components/basic_table/default_item_action.tsx b/packages/eui/src/components/basic_table/default_item_action.tsx
index e026adf6ceb..b4ff31c97e4 100644
--- a/packages/eui/src/components/basic_table/default_item_action.tsx
+++ b/packages/eui/src/components/basic_table/default_item_action.tsx
@@ -22,6 +22,8 @@ import {
DefaultItemAction as Action,
callWithItemIfFunction,
} from './action_types';
+import { useEuiMemoizedStyles } from '../../services';
+import { euiIconButtonWrapperStyles } from './default_item_action.styles';
export interface DefaultItemActionProps {
action: Action;
@@ -65,6 +67,9 @@ export const DefaultItemAction = ({
let ariaLabelledBy: ReactNode;
let button;
+ const styles = useEuiMemoizedStyles(euiIconButtonWrapperStyles);
+ const cssStyles = [styles.isDisabled];
+
if (action.type === 'icon') {
if (!icon) {
throw new Error(`Cannot render item action [${action.name}]. It is configured to render as an icon but no
@@ -81,9 +86,6 @@ export const DefaultItemAction = ({
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
@@ -112,19 +114,14 @@ export const DefaultItemAction = ({
);
}
- return enabled ? (
- <>
+ return (
+
{button}
{/* SR text has to be rendered outside the tooltip,
otherwise EuiToolTip's own aria-labelledby won't properly clone */}
{ariaLabelledBy}
-
- ) : (
- <>
- {button}
- {ariaLabelledBy}
-
+