fix(tabs): Remove event.preventDefault from TabList (Workday#969)

Fixes Workday#968
alanbsmith · Feb 12, 2021 · 771a215 · 771a215
1 parent b7f87a1
commit 771a215
Show file tree

Hide file tree

Showing 7 changed files with 10 additions and 14 deletions.
diff --git a/cypress/integration/SelectLabs.spec.ts b/cypress/integration/SelectLabs.spec.ts
@@ -304,7 +304,7 @@ describe('Select', () => {
 
         context('when the space key is pressed', () => {
           beforeEach(() => {
-            cy.findByLabelText('Label').type(' ');
+            cy.findByLabelText('Label').type(' ', {force: true}); // disable event.preventDefault checks
           });
 
           context('the select button', () => {

diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts
@@ -1,5 +1,4 @@
 import * as axe from 'axe-core';
-import 'cypress-enter-plugin';
 
 declare global {
   interface Window {

diff --git a/cypress/support/index.ts b/cypress/support/index.ts
@@ -2,6 +2,7 @@ import 'cypress-pipe';
 import 'cypress-plugin-tab';
 import 'cypress-axe';
 import 'cypress-storybook/cypress';
+import 'cypress-keyboard-plugin';
 import '@testing-library/cypress/add-commands';
 
 import './commands';
diff --git a/modules/_labs/select/react/lib/Select.tsx b/modules/_labs/select/react/lib/Select.tsx
@@ -488,7 +488,8 @@ class Select extends React.Component<SelectProps, SelectState> {
         case 'Enter':
           isShortcut = true;
           if (menuVisibility === 'closed' || menuVisibility === 'closing') {
-            this.toggleMenu(true);
+            // allow the click
+            isShortcut = false;
           } else {
             this.handleOptionSelection(focusedOptionIndex);
           }

diff --git a/modules/_labs/tabs/react/lib/TabList.tsx b/modules/_labs/tabs/react/lib/TabList.tsx
@@ -28,7 +28,7 @@ const TabsListInnerContainer = styled('div')({
 const TabList = ({children, ...elemProps}: TabListProps) => {
   const tabsListRef = React.useRef<HTMLDivElement>(null);
   // const [tabIndicatorRef, setDimensions] = useIndicator(tabsListRef);
-  const {setIntentTab, setActiveTab, intentTab, programmaticFocusRef} = useTab();
+  const {setIntentTab, programmaticFocusRef} = useTab();
 
   const onKeyDown = (event: React.KeyboardEvent) => {
     switch (event.key) {
@@ -46,11 +46,6 @@ const TabList = ({children, ...elemProps}: TabListProps) => {
       case 'End':
         setIntentTab('last');
         break;
-      case 'Enter':
-      case ' ':
-        setActiveTab(intentTab);
-        event.preventDefault(); // prevent clicking this button
-        break;
       default:
         break;
     }

diff --git a/package.json b/package.json
@@ -59,7 +59,7 @@
     "cssstats": "^3.3.0",
     "cypress": "^4.4.1",
     "cypress-axe": "^0.5.1",
-    "cypress-enter-plugin": "^1.0.0",
+    "cypress-keyboard-plugin": "^1.0.3",
     "cypress-pipe": "^1.7.0",
     "cypress-plugin-tab": "^1.0.5",
     "cypress-storybook": "^0.2.3",

diff --git a/yarn.lock b/yarn.lock
@@ -8226,10 +8226,10 @@ cypress-axe@^0.5.1:
   resolved "https://registry.yarnpkg.com/cypress-axe/-/cypress-axe-0.5.1.tgz#bc45e042ed9ba8f556bceb2157e5015d082829d4"
   integrity sha512-oj+diADUnnjmiT7635kQuaDx7MG4nMk64oWCuDEIbWpe7Q3v+FzBE3ou8pg346LagGyqDFv8r7GYt6JWve6+Vg==
 
-cypress-enter-plugin@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/cypress-enter-plugin/-/cypress-enter-plugin-1.0.0.tgz#bfddef9b22b42267553b09f702346009f1e751d4"
-  integrity sha512-a9GgjvaNTBYhjrozLJT7HgiUXjg9wl8xx5PuqC+5VuZMrr8srqEpr1sI7w1dzAcJFXuyz9Z7YCZVHktZhqH3qw==
+cypress-keyboard-plugin@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/cypress-keyboard-plugin/-/cypress-keyboard-plugin-1.0.3.tgz#89df38810894873aef3447500a562ce1d54cc725"
+  integrity sha512-Cb3vJ+g4LoiQEif6XqUf9N9KexppWm/6tbMvRxNWbBMBX8r+4PuKR+PNJSvmFJrk7hP9KHZ/ffV5jyJfZafO5g==
 
 cypress-pipe@^1.7.0:
   version "1.7.0"