feat: Make cy.realPress {enter} to be functional for accessibility na…

…vigation (#69) * Modified keyDown event to allow {enter} to be functional * Add tests * remove only Co-authored-by: Dmitriy Kovalenko <[email protected]>
dmtrKovalenko · May 31, 2021 · 712899e · 712899e
1 parent 2911c0c
commit 712899e
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 27 deletions.
diff --git a/cypress/integration/press.spec.ts b/cypress/integration/press.spec.ts
@@ -21,47 +21,55 @@ describe("cy.realPress", () => {
       cy.realPress("Tab");
       cy.get("[aria-label='Search by voice']").should("be.focused");
     });
+
+    it("Can use Enter for a11y navigation", () => {
+      cy.get("input[name=q]").focus();
+      cy.realType("something");
+      cy.realPress("Tab");
+
+      cy.get("input[name=q]").should("have.value", "something");
+      cy.realPress("Enter");
+      cy.get("input[name=q]").should("have.value", "");
+    });
   });
 
   context("shortcuts", () => {
     beforeEach(() => {
-      cy.visit("https://wangchujiang.com/hotkeys/")
-      cy.get('[data-key=27]').realClick() // just activate the listener
-    })
-
+      cy.visit("https://wangchujiang.com/hotkeys/");
+      cy.get("[data-key=27]").realClick(); // just activate the listener
+    });
 
     it("Can fire shortcuts", () => {
-
       cy.realPress(["Control", "Shift", "R"]);
       cy.realPress(["Alt", "Shift", "F5"]);
     });
 
     it("Fires correct js events", () => {
-      cy.document().then(document => { 
-        document.addEventListener("keyup", e => {
-          expect(e.isTrusted).to.be.true
-          expect(e.shiftKey).to.be.true
-          expect(e.altKey).to.be.true
+      cy.document().then((document) => {
+        document.addEventListener("keyup", (e) => {
+          expect(e.isTrusted).to.be.true;
+          expect(e.shiftKey).to.be.true;
+          expect(e.altKey).to.be.true;
 
-          if (e.key === "Alt") { 
-            expect(e.altKey).to.be.true
-            expect(e.code).to.eq("AltLeft")
-            expect(e.keyCode).to.eq(18)
+          if (e.key === "Alt") {
+            expect(e.altKey).to.be.true;
+            expect(e.code).to.eq("AltLeft");
+            expect(e.keyCode).to.eq(18);
           }
-          if (e.key === "Shift") { 
-            expect(e.altKey).to.be.true
-            expect(e.code).to.eq("ShiftLeft")
-            expect(e.keyCode).to.eq(16)
+          if (e.key === "Shift") {
+            expect(e.altKey).to.be.true;
+            expect(e.code).to.eq("ShiftLeft");
+            expect(e.keyCode).to.eq(16);
           }
-          if (e.key === "F5") { 
-            expect(e.altKey).to.be.true
-            expect(e.code).to.eq("F5")
-            expect(e.keyCode).to.eq(116)
+          if (e.key === "F5") {
+            expect(e.altKey).to.be.true;
+            expect(e.code).to.eq("F5");
+            expect(e.keyCode).to.eq(116);
           }
-        })
-      })
-      
+        });
+      });
+
       cy.realPress(["Alt", "Shift", "F5"]);
-    })
+    });
   });
 });
diff --git a/src/commands/realPress.ts b/src/commands/realPress.ts
@@ -69,10 +69,17 @@ export async function realPress(
 
   for (const key of keyDefinitions) {
     modifiers |= keyToModifierBitMap[key.key] ?? 0;
-
     await fireCdpCommand("Input.dispatchKeyEvent", {
       type: key.text ? "keyDown" : "rawKeyDown",
       modifiers,
+      enter:
+        key.code === "Enter"
+          ? {
+              type: "char",
+              unmodifiedText: "\r",
+              text: "\r",
+            }
+          : {},
       ...key,
     });
 

diff --git a/src/keyCodeDefinitions.ts b/src/keyCodeDefinitions.ts
@@ -21,6 +21,7 @@ export const keyCodeDefinitions =  {
   'Numpad5': {'keyCode': 12, 'shiftKeyCode': 101, 'key': 'Clear', 'code': 'Numpad5', 'shiftKey': '5', 'location': 3},
   'NumpadEnter': {'keyCode': 13, 'code': 'NumpadEnter', 'key': 'Enter', 'text': '\r', 'location': 3},
   '{enter}': {'keyCode': 13, 'code': 'Enter', 'key': 'Enter', 'text': '\r'},
+  'Enter': {'keyCode': 13, 'code': 'Enter', 'key': 'Enter', 'text': '\r'},
   '\r': {'keyCode': 13, 'code': 'Enter', 'key': 'Enter', 'text': '\r'},
   '\n': {'keyCode': 13, 'code': 'Enter', 'key': 'Enter', 'text': '\r'},
   'ShiftLeft': {'keyCode': 16, 'code': 'ShiftLeft', 'key': 'Shift', 'location': 1},