[EuiListItemLayout] Add support for focusable disabled items via hasAriaDisabled (#9584)

Author: mgadewoll

packages/eui/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx

@@ -273,7 +273,7 @@ export class EuiComboBoxOptionsList<T> extends Component<
         showIndicator={!!singleSelection}
         textWrap={rowHeight !== 'auto' ? 'truncate' : 'wrap'}
         tooltipProps={
-          toolTipContent
+          toolTipContent && !optionIsDisabled
             ? {
                 ...toolTipProps,
                 content: toolTipContent,

packages/eui/src/components/list_group/list_group_item.stories.tsx

@@ -23,12 +23,20 @@ const meta: Meta<EuiListGroupItemProps> = {
     iconType: {
       control: { type: 'text' },
     },
+    hasAriaDisabled: {
+      description: `NOTE: Beta feature, may be changed or removed in the future.<br/>
+      Changes the native \`disabled\` attribute for \`element="button"\` usages to \`aria-disabled\` to preserve focusability.
+      This results in a semantically disabled button without the default browser handling of the disabled state.<br/>
+      Use e.g. when a disabled button element should have a tooltip.
+      `,
+    },
   },
   args: {
     color: 'text',
     showToolTip: false,
     isActive: false,
     isDisabled: false,
+    hasAriaDisabled: false,
   },
 };
 disableStorybookControls(meta, ['buttonRef']);

packages/eui/src/components/list_group/list_group_item.test.tsx

@@ -90,6 +90,26 @@ describe('EuiListGroupItem', () => {
       });
     });
 
+    describe('hasAriaDisabled', () => {
+      it('renders interactive items with `aria-disabled` when `isDisabled=true`', () => {
+        const { getByTestSubject } = render(
+          <EuiListGroupItem
+            label="Label"
+            hasAriaDisabled
+            isDisabled
+            onClick={() => {}}
+            data-test-subj="euiListGroupItem"
+          />
+        );
+
+        const button = getByTestSubject('euiListGroupItem');
+
+        expect(button).toBeEuiDisabled();
+        expect(button).toHaveAttribute('aria-disabled', 'true');
+        expect(button).not.toHaveAttribute('disabled');
+      });
+    });
+
     describe('iconType', () => {
       test('is rendered', () => {
         const { container } = render(

packages/eui/src/components/list_group/list_group_item.tsx

@@ -21,6 +21,7 @@ import {
   getSecureRelForTarget,
   useEuiMemoizedStyles,
   cloneElementWithCss,
+  EuiDisabledProps,
 } from '../../services';
 import { validateHref } from '../../services/security/href_validator';
 import { ExclusiveUnion, CommonProps } from '../common';
@@ -58,7 +59,8 @@ export type EuiListGroupItemProps = CommonProps &
       HTMLAttributes<HTMLSpanElement>
     >,
     'onClick' | 'color' | 'target' | 'rel'
-  > & {
+  > &
+  EuiDisabledProps & {
     /**
      * By default the item will get the color `text`.
      * You can customize the color of the item by passing a color name.
@@ -76,11 +78,6 @@ export type EuiListGroupItemProps = CommonProps &
      */
     isActive?: boolean;
 
-    /**
-     * Apply styles indicating an item is disabled
-     */
-    isDisabled?: boolean;
-
     /**
      * Make the list item label a link.
      * While permitted, `href` and `onClick` should not be used together in most cases and may create problems.

packages/eui/src/components/list_item_layout/_list_item_layout.stories.tsx

@@ -125,13 +125,21 @@ const meta: Meta<EuiListItemLayoutProps> = {
     role: {
       control: 'text',
     },
+    hasAriaDisabled: {
+      description: `NOTE: Beta feature, may be changed or removed in the future.<br/>
+      Changes the native \`disabled\` attribute for \`element="button"\` usages to \`aria-disabled\` to preserve focusability.
+      This results in a semantically disabled button without the default browser handling of the disabled state.<br/>
+      Use e.g. when a disabled button element should have a tooltip.
+      `,
+    },
   },
   args: {
     element: 'li',
     checked: undefined,
     prepend: undefined,
     append: undefined,
     isDisabled: false,
+    hasAriaDisabled: false,
     isFocused: false,
     isSelected: false,
     isSingleSelection: false,
@@ -205,12 +213,19 @@ export const TooltipProps: Story = {
   name: 'tooltipProps (prop)',
   parameters: {
     controls: {
-      include: ['element', 'tooltipProps', 'isFocused', 'children'],
+      include: [
+        'element',
+        'tooltipProps',
+        'isFocused',
+        'children',
+        'isDisabled',
+        'hasAriaDisabled',
+      ],
     },
   },
   args: {
     children: 'List item',
-    component: 'button',
+    element: 'button',
     isFocused: true,
     tooltipProps: {
       title: 'Tooltip',
@@ -301,7 +316,13 @@ export const KitchenSink: Story = {
   tags: ['vrt-only'],
   parameters: {
     controls: {
-      include: ['isDisabled', 'isFocused', 'isSelected', 'children'],
+      include: [
+        'isDisabled',
+        'hasAriaDisabled',
+        'isFocused',
+        'isSelected',
+        'children',
+      ],
     },
   },
   args: {

packages/eui/src/components/list_item_layout/_list_item_layout.styles.ts

@@ -137,6 +137,17 @@ export const euiListItemLayoutStyles = (euiThemeContext: UseEuiTheme) => {
       cursor: not-allowed;
       background-color: transparent;
     `,
+    buttonIsDisabled: css`
+      /* prevent user (mouse) interactions for custom disabled buttons.
+      Covers user interaction only. Programmatic event handling is done in the \`useEuiDisabledElement\` hook */
+      &[aria-disabled='true'] {
+        pointer-events: none;
+
+        > * {
+          pointer-events: none;
+        }
+      }
+    `,
     isFocused: css`
       ${highlightedStyles}
     `,
@@ -168,6 +179,11 @@ export const euiListItemLayoutStyles = (euiThemeContext: UseEuiTheme) => {
           .backgroundBaseInteractiveSelectHover};
       }
     `,
+    tooltip: {
+      isDisabled: css`
+        cursor: not-allowed;
+      `,
+    },
   };
 };
 

packages/eui/src/components/list_item_layout/_list_item_layout.test.tsx

@@ -571,6 +571,36 @@ describe('EuiListItemLayout', () => {
       });
     });
 
+    describe('hasAriaDisabled', () => {
+      it('renders `aria-disabled` when `isDisabled=true` for `element="button"`', () => {
+        const { getByTestSubject } = render(
+          <EuiListItemLayout element="button" isDisabled hasAriaDisabled>
+            Option
+          </EuiListItemLayout>
+        );
+
+        const button = getByTestSubject('euiListItemLayout');
+
+        expect(button).toBeEuiDisabled();
+        expect(button).toHaveAttribute('aria-disabled', 'true');
+        expect(button).not.toHaveAttribute('disabled');
+      });
+
+      it('renders `aria-disabled` when `isDisabled=true` for `element="a"`', () => {
+        const { getByTestSubject } = render(
+          <EuiListItemLayout element="a" isDisabled hasAriaDisabled>
+            Option
+          </EuiListItemLayout>
+        );
+
+        const button = getByTestSubject('euiListItemLayout');
+
+        expect(button).toBeEuiDisabled();
+        expect(button).toHaveAttribute('aria-disabled', 'true');
+        expect(button).not.toHaveAttribute('disabled');
+      });
+    });
+
     describe('checked', () => {
       it('applies a checked state for multi-selection items when `checked="on"`', () => {
         const { getByTestSubject } = render(