Skip to content

Commit

Permalink
fix: Enter doesn't fire trust click event (#132)
Browse files Browse the repository at this point in the history 
* fix: Enter doesn't fire trust click event

* Commit fixture
  • Loading branch information
@dmtrKovalenko
dmtrKovalenko authored Jul 26, 2021
1 parent 39a09d9 commit 5978a6e
Show file tree
Hide file tree
Showing 4 changed files with 67 additions and 14 deletions.
28 changes: 28 additions & 0 deletions cypress/fixtures/keyboard-accessibility-test.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<body>
<main>
<h1>Test enter accessibility</h1>

<button id="click-enter">Test</button>

<ul id="events"></ul>
</main>
</body>

<script>
document.getElementById("click-enter").addEventListener("click", (e) => {
let li = document.createElement("li");
li.appendChild(
document.createTextNode(
JSON.stringify({
isTrusted: e.isTrusted,
type: e.type,
})
)
);

window.events.appendChild(li);
});
</script>
</html>
24 changes: 24 additions & 0 deletions cypress/integration/press.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,4 +72,28 @@ describe("cy.realPress", () => {
cy.realPress(["Alt", "Shift", "F5"]);
});
});

context.only("Keyboard a11y testing", () => {
it("Dispatches beforeinput and keypress event for Enter", () => {
cy.visit("https://w3c.github.io/uievents/tools/key-event-viewer");
cy.realPress("Enter");

cy.contains(".keycell.etype", "beforeinput");
cy.contains(".keycell.etype", "keypress");
});

it("Fires trusted click on Enter", () => {
cy.visit("./cypress/fixtures/keyboard-accessibility-test.html");
cy.get("#click-enter").focus().realPress("Enter");

cy.get("ul").contains(JSON.stringify({ isTrusted: true, type: "click" }));
});

it("Fires trusted click on Space", () => {
cy.visit("./cypress/fixtures/keyboard-accessibility-test.html");
cy.get("#click-enter").focus().realPress("Space");

cy.get("ul").contains(JSON.stringify({ isTrusted: true, type: "click" }));
});
});
});
17 changes: 9 additions & 8 deletions src/commands/realPress.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,20 +69,21 @@ 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,
});

if (key.code === "Enter") {

This comment has been minimized.

Sign in to view

Copy link
@Andarist

Andarist Dec 7, 2021 •
edited
Loading

Collaborator

note (mostly for myself) - in Playwright those work without an additional command for the "char":

const spaceParams = {
  type: 'keyDown',
  modifiers: 0,
  windowsVirtualKeyCode: 32,
  code: 'Space',
  commands: [],
  key: ' ',
  text: ' ',
  unmodifiedText: ' ',
  autoRepeat: false,
  location: 0,
  isKeypad: false
}
const enterParams = {
  type: 'keyDown',
  modifiers: 0,
  windowsVirtualKeyCode: 13,
  code: 'Enter',
  commands: [],
  key: 'Enter',
  text: '\r',
  unmodifiedText: '\r',
  autoRepeat: false,
  location: 0,
  isKeypad: false
}

This comment has been minimized.

Sign in to view

Copy link
@dmtrKovalenko

dmtrKovalenko Dec 7, 2021

Author Owner

This code mostly copied from puppeteer

This comment has been minimized.

Sign in to view

Copy link
@Andarist

Andarist Dec 7, 2021

Collaborator

Do you maybe recall where that code was? It seems that it's currently not a part of the Keybaord#down method:
https://github.com/puppeteer/puppeteer/blob/327282e0475b1b680471cce6b9e74ecc14fd6536/src/common/Input.ts#L113-L124

Either way - I'm just refactoring some stuff here, looking at how things interact, and learning the CDP 😉 I think that if we could drop this special handling for Enter then that would be a small gain for the simplicity of the implementation. Obviously - to do that all existing tests must pass.
await fireCdpCommand("Input.dispatchKeyEvent", {
type: "char",
unmodifiedText: "\r",
text: "\r",
});
}

await new Promise((res) => setTimeout(res, options.pressDelay ?? 25));
}

Expand Down
12 changes: 6 additions & 6 deletions src/keyCodeDefinitions.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,11 @@ export const keyCodeDefinitions = {
'{backspace}': {'keyCode': 8, 'code': 'Backspace', 'key': 'Backspace'},
'Tab': {'keyCode': 9, 'code': 'Tab', 'key': 'Tab'},
'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'},
'NumpadEnter': {'keyCode': 13, 'code': 'NumpadEnter', 'key': 'Enter', 'location': 3},
'{enter}': {'keyCode': 13, 'code': 'Enter', 'key': 'Enter'},
'Enter': {'keyCode': 13, 'code': 'Enter', 'key': 'Enter'},
'\r': {'keyCode': 13, 'code': 'Enter', 'key': 'Enter'},
'\n': {'keyCode': 13, 'code': 'Enter', 'key': 'Enter'},
'ShiftLeft': {'keyCode': 16, 'code': 'ShiftLeft', 'key': 'Shift', 'location': 1},
'ShiftRight': {'keyCode': 16, 'code': 'ShiftRight', 'key': 'Shift', 'location': 2},
'ControlLeft': {'keyCode': 17, 'code': 'ControlLeft', 'key': 'Control', 'location': 1},
Expand Down Expand Up @@ -262,4 +262,4 @@ export const keyCodeDefinitions = {
'|': {'keyCode': 220, 'key': '|', 'code': 'Backslash'},
'}': {'keyCode': 221, 'key': '}', 'code': 'BracketRight'},
'"': {'keyCode': 222, 'key': '"', 'code': 'Quote'}
} as const
} as const

0 comments on commit 5978a6e

Please sign in to comment.