fix: Makes button dropdown main action clickable with Enter (#2897)

cloudscape-design · Oct 18, 2024 · e97273e · e97273e
1 parent b69c9b2
commit e97273e
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 32 deletions.
diff --git a/pages/button-dropdown/main-action.page.tsx b/pages/button-dropdown/main-action.page.tsx
@@ -1,24 +1,48 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import * as React from 'react';
+import React, { useState } from 'react';
 
-import ButtonDropdown from '~components/button-dropdown';
+import { Box, Button, ButtonDropdown, SpaceBetween } from '~components';
+import InternalButtonDropdown from '~components/button-dropdown/internal';
 
 export default function ButtonDropdownPage() {
+  const [clickedButton, setClickedButton] = useState('');
   return (
     <>
-      <h1>Button dropdown with main action</h1>
-      <ButtonDropdown
-        items={[
-          {
-            text: 'Launch instance from template',
-            id: 'launch-instance-from-template',
-          },
-        ]}
-        mainAction={{ text: 'Launch instance' }}
-        ariaLabel="More launch options"
-        variant="primary"
-      />
+      <Box margin="m">
+        <h1>Button dropdown with main action</h1>
+        <SpaceBetween size="m">
+          <Button data-testid="focus-before" variant="inline-link">
+            focus before
+          </Button>
+
+          <ButtonDropdown
+            data-testid="with-main-action-and-dropdown"
+            items={[
+              {
+                text: 'Launch instance from template',
+                id: 'launch-instance-from-template',
+              },
+            ]}
+            onItemClick={() => setClickedButton('Launch instance from template')}
+            mainAction={{ text: 'Launch instance', onClick: () => setClickedButton('Launch instance') }}
+            ariaLabel="More launch options"
+            variant="primary"
+          />
+
+          <InternalButtonDropdown
+            data-testid="with-main-action-only"
+            items={[]}
+            mainAction={{
+              text: 'Launch instance (main action only)',
+              onClick: () => setClickedButton('Launch instance (main action only)'),
+            }}
+            showMainActionOnly={true}
+          />
+
+          <div id="clicked">{clickedButton}</div>
+        </SpaceBetween>
+      </Box>
     </>
   );
 }
diff --git a/src/button-dropdown/__integ__/button-dropdown-events.test.ts b/src/button-dropdown/__integ__/button-dropdown-events.test.ts
@@ -1,6 +1,8 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
+import { BasePageObject } from '@cloudscape-design/browser-test-tools/page-objects';
 import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
+import { createWrapper } from '@cloudscape-design/test-utils-core/selectors';
 
 import ButtonDropdownPage from '../../__integ__/page-objects/button-dropdown-page';
 
@@ -76,4 +78,21 @@ describe('clicking on a ButtonDropdown item', () => {
       await expect(page.getLocation()).resolves.toEqual(oldLocation);
     })
   );
+  test(
+    'main action can be pressed with Enter',
+    useBrowser(async browser => {
+      const focusBefore = createWrapper().findButton('[data-testid="focus-before"]');
+
+      const page = new BasePageObject(browser);
+      await browser.url('#/light/button-dropdown/main-action');
+      await page.waitForVisible(focusBefore.toSelector());
+
+      await page.click(focusBefore.toSelector());
+      await page.keys(['Tab', 'Enter']);
+      await expect(page.getElementsText('#clicked')).resolves.toEqual(['Launch instance']);
+
+      await page.keys(['Tab', 'Tab', 'Enter']);
+      await expect(page.getElementsText('#clicked')).resolves.toEqual(['Launch instance (main action only)']);
+    })
+  );
 });
diff --git a/src/button-dropdown/internal.tsx b/src/button-dropdown/internal.tsx
@@ -230,9 +230,7 @@ const InternalButtonDropdown = React.forwardRef(
           {text}
         </InternalButton>
       );
-      trigger = showMainActionOnly ? (
-        <div className={styles['split-trigger']}>{mainActionButton}</div>
-      ) : (
+      trigger = (
         <div role="group" aria-label={ariaLabel} className={styles['split-trigger-wrapper']}>
           <div
             className={clsx(
@@ -256,21 +254,23 @@ const InternalButtonDropdown = React.forwardRef(
           >
             {mainActionButton}
           </div>
-          <div
-            className={clsx(
-              styles['trigger-item'],
-              styles['dropdown-trigger'],
-              isVisualRefresh && styles['visual-refresh'],
-              styles[`variant-${variant}`],
-              baseTriggerProps.disabled && styles.disabled,
-              baseTriggerProps.loading && styles.loading
-            )}
-            {...getAnalyticsMetadataAttribute(analyticsMetadata)}
-          >
-            <InternalButton ref={triggerRef} {...baseTriggerProps} __emitPerformanceMarks={false}>
-              {children}
-            </InternalButton>
-          </div>
+          {!showMainActionOnly && (
+            <div
+              className={clsx(
+                styles['trigger-item'],
+                styles['dropdown-trigger'],
+                isVisualRefresh && styles['visual-refresh'],
+                styles[`variant-${variant}`],
+                baseTriggerProps.disabled && styles.disabled,
+                baseTriggerProps.loading && styles.loading
+              )}
+              {...getAnalyticsMetadataAttribute(analyticsMetadata)}
+            >
+              <InternalButton ref={triggerRef} {...baseTriggerProps} __emitPerformanceMarks={false}>
+                {children}
+              </InternalButton>
+            </div>
+          )}
         </div>
       );
     } else {