[EuiButton] Support focusable disabled behavior with hasAriaDisabled prop (#9201)

Author: mgadewoll

packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_Disabled_With_Tooltips.png

@@ -0,0 +1,7 @@
+- Added beta prop `hasAriaDisabled` to all base button components: `EuiButton`, `EuiButtonEmpty`, `EuiButtonIcon`, `EuibuttonGroup`, `EuiFilterButton`
+- Added `euiDisabledSelector` variable that combines CSS selectors `:disabled` and `[aria-disabled="true"]`
+- Added custom test matchers that check for both `disabled` and `aria-disabled` attributes:
+  - React testing Library: `.toBeEuiDisabled()`
+  - Enzyme: `.toHaveEuiDisabledProp()`
+  - Cypress: `should('be.euiDisabled)`
+

packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_With_Tooltips.png

@@ -23,6 +23,7 @@ import './keyboard/repeatRealPress';
 import './copy/select_and_copy';
 import './setup/mount';
 import './setup/realMount';
+import './setup/matchers';
 import './css/cssVar';
 import './helpers/wait_for_position_to_settle';
 

packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_Disabled_With_Tooltips.png

@@ -69,5 +69,15 @@ declare global {
        */
       waitForPositionToSettle(): Chainable<JQuery<HTMLElement>>;
     }
+    interface Chainer<Subject> {
+      (chainer: 'be.euiDisabled'): Chainable<Subject>;
+      (chainer: 'be.euiEnabled'): Chainable<Subject>;
+    }
+  }
+  namespace Chai {
+    interface Assertion {
+      euiDisabled: Assertion;
+      euiEnabled: Assertion;
+    }
   }
 }

packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_With_Tooltips.png

@@ -0,0 +1,11 @@
+/*
+ * 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 { setupEuiCypressMatchers } from '../../../src/test/cypress';
+
+setupEuiCypressMatchers();

packages/eui/changelogs/upcoming/9201.md

@@ -8,16 +8,18 @@
 
 import React, { ReactNode } from 'react';
 import './mount';
+import { MountOptions } from './mount';
 
-const realMountCommand = (children: ReactNode) => {
+const realMountCommand = (children: ReactNode, options: MountOptions = {}) => {
   cy.mount(
     <>
       <div
         data-test-subj="cypress-real-event-target"
         style={{ height: '1px', width: '1px' }}
       />
       {children}
-    </>
+    </>,
+    options
   ).then(() => {
     cy.get('[data-test-subj="cypress-real-event-target"]').realClick({
       position: 'topLeft',

packages/eui/cypress/support/component.tsx

@@ -249,7 +249,8 @@ async function compileBundle() {
     'optimize/es/test',
   ].map((dir) => path.join(packageRootDir, dir));
 
-  const testRtlDTSFiles = new glob.Glob('test/rtl/**/*.d.ts', {
+  const testDirectories = ['rtl', 'enzyme'];
+  const testDTSFiles = new glob.Glob('test/**/*.d.ts', {
     cwd: srcDir,
     realpath: true,
   });
@@ -278,12 +279,17 @@ async function compileBundle() {
       },
     });
 
-    await fs.mkdir(path.join(dir, 'rtl'), { recursive: true });
+    for (const testDir of testDirectories) {
+      await fs.mkdir(path.join(dir, testDir), { recursive: true });
+    }
 
-    for await (const filePath of testRtlDTSFiles) {
+    for await (const filePath of testDTSFiles) {
       const fullPath = path.join(srcDir, filePath);
-      const baseName = path.basename(filePath);
-      await fs.copyFile(fullPath, path.join(dir, 'rtl', baseName));
+
+      const relativePath = filePath.replace(/^test\//, '');
+      const destPath = path.join(dir, relativePath);
+
+      await fs.copyFile(fullPath, destPath);
     }
   }