Skip to content

Proposal: New Failure Technique — Failure of SC 2.1.1 and SC 3.2.2 due to using keydown/keyup event handlers without guarding against IME composition #5075

@mehm8128

Description

@mehm8128

I'd like to propose a new failure technique for SC 2.1.1 Keyboard and SC 3.2.2 On Input.

Failure description

When a keydown or keyup handler checks for the Enter key (or other keys used as IME shortcuts) without guarding against IME composition, users who rely on an IME — such as those in CJK regions — experience broken behavior. Pressing Enter to confirm an IME candidate fires keydown, which accidentally triggers the application's action (e.g., form submission) before the user has finished composing their input.

  • SC 2.1.1: The keyboard interface becomes unreliable for IME users, as the IME's own keyboard shortcuts collide with the application's shortcuts.
  • SC 3.2.2: An unexpected change of context (e.g., form submission) is triggered by input that the user intended solely for the IME.

Failure example

// ❌ Failure — triggers during IME composition
inputElement.addEventListener("keydown", (event) => {
  if (event.key === "Enter") submit();
});

Sufficient techniques to avoid this failure

// ✅ Option 1 — guard with isComposing (+ keyCode 229 for Safari)
inputElement.addEventListener("keydown", (event) => {
  if (event.isComposing || event.keyCode === 229) return;
  if (event.key === "Enter") submit();
});

// ✅ Option 2 — use the form submit event instead
formElement.addEventListener("submit", (event) => {
  event.preventDefault();
  submit();
});

The keyCode === 229 check is necessary to cover a known Safari bug where compositionend fires before keydown, causing isComposing to be false on the final confirmation keypress. MDN also recommends this workaround.
note: This bug has been fixed in a recent Safari version, but users on older versions remain affected. Therefore, adding || event.keyCode === 229 as a fallback is still recommended to ensure correct behavior across the full range of Safari versions in use.

References

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions